vue-el-steps 使用2[代码示例]

效果图

代码

element代码

<template>

    <div class="app-container">

      <el-form :model="queryForm"  size="small" :inline="true">

        <el-form-item label="内容状态">

            <el-button-group>

                <el-button type="primary">全部</el-button>

                <el-button type="primary">通过</el-button>

                <el-button type="primary">待审核</el-button>

                <el-button type="primary">待支付</el-button>

                <el-button type="primary">拒绝</el-button>

                <el-button type="primary">已下架</el-button>

            </el-button-group>

        </el-form-item>

        <el-form-item>

          <el-button type="primary" icon="el-icon-plus" @click="handleAddInfoReleas">新增发布</el-button>

        </el-form-item>

      </el-form>

      <el-table

        v-loading="loadingInfos"

        :data="infoReleasData">

        <el-table-column prop="orderNum" label="id" width="100"></el-table-column>

        <el-table-column prop="orderNum" label="标题" width="100"></el-table-column>

        <el-table-column prop="orderNum" label="图片" ></el-table-column>

        <el-table-column prop="orderNum" label="内容" width="100"></el-table-column>

        <el-table-column prop="orderNum" label="分类" width="100"></el-table-column>

        <el-table-column prop="orderNum" label="发布人" width="100"></el-table-column>

        <el-table-column prop="orderNum" label="置顶类型" width="100"></el-table-column>

        <el-table-column prop="orderNum" label="发布时间" width="100"></el-table-column>

        <el-table-column prop="orderNum" label="刷新时间" width="100"></el-table-column>

        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">

            <template slot-scope="scope">

                <el-button

                    size="mini"

                    type="text"

                    icon="el-icon-edit"

                    >通过

                </el-button>

                <el-button

                    size="mini"

                    type="text"

                    icon="el-icon-search"

                    >拒绝

                </el-button>

                <el-button

                    size="mini"

                    type="text"

                    icon="el-icon-delete"

                    >删除

                </el-button>

                <el-button

                    size="mini"

                    type="text"

                    icon="el-icon-edit"

                    >查看

                </el-button>

                <el-button

                    size="mini"

                    type="text"

                    icon="el-icon-search"

                    >编辑

                </el-button>

                <el-button

                    size="mini"

                    type="text"

                    icon="el-icon-delete"

                    >刷新

                </el-button>

                <el-button

                    size="mini"

                    type="text"

                    icon="el-icon-edit"

                    >更换分类

                </el-button>

                <el-button

                    size="mini"

                    type="text"

                    icon="el-icon-search"

                    >上架

                </el-button>

          </template>

        </el-table-column>

      </el-table>

      <!--增加用户-->

      <el-dialog :title="dialogTitle" :visible.sync="visbleOpen" width="600px"  class="aboutDialog">

        <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">

            <el-step title="选择分类"></el-step>

            <el-step title="填写信息"></el-step>

            <el-step title="完成发布"></el-step>

        </el-steps>

        <el-form :model="releasForm" :rules="rulesReleas" style="margin-top: 10px;">

            <el-form-item label="" label-width="120px" prop="name" v-if="active == 0 ">

                <el-radio v-model="releasForm.type" label="1" border style="margin-top: 10px;margin-left: 0px;">房屋租售</el-radio>

                <el-radio v-model="releasForm.type" label="2" border style="margin-top: 10px;margin-left: 0px;">请求广告</el-radio>

                <el-radio v-model="releasForm.type" label="3" border style="margin-top: 10px;margin-left: 0px;">房屋租售</el-radio>

                <el-radio v-model="releasForm.type" label="4" border style="margin-top: 10px;margin-left: 0px;">请求广告</el-radio>

            </el-form-item>

            <el-form-item label="区域" label-width="120px" prop="name" v-if="active == 1 ">

                <el-select v-model="releasForm.value" placeholder="请选择">

                </el-select>

            </el-form-item>

            <el-form-item label="图片" label-width="120px" prop="name" v-if="active == 1 ">

                <ImageUpload></ImageUpload>

            </el-form-item>

            <el-form-item label="详情描述" label-width="120px" prop="name" v-if="active == 1 ">

                <el-input type="textarea" v-model="releasForm.desc"></el-input>

            </el-form-item>

            <el-form-item label="标签" label-width="120px" prop="name" v-if="active == 1 ">

                <span

                    :class="[item.beal==true?'p_yx_span span_active ':'span p_yx']"

                    @click="onTagSelect(index)"

                    v-for="(item,index) in tagList"

                    :key="index"

                    >{{item.name}}

                </span>

            </el-form-item>

            <el-form-item label="联系人" label-width="120px" prop="name" v-if="active == 1 ">

                <el-input v-model="releasForm.value" placeholder="请输入内容"></el-input>

            </el-form-item>

            <el-form-item label="联系电话" label-width="120px" prop="name" v-if="active == 1 ">

                <el-input v-model="releasForm.value" placeholder="请输入内容"></el-input>

            </el-form-item>

            <el-form-item label="发布时间" label-width="120px" prop="name" v-if="active == 1 ">

                <el-date-picker

                    v-model="releasForm.value"

                    type="date"

                    placeholder="选择日期">

                </el-date-picker>

            </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">

            <el-button @click="visbleOpen = false" type="primary" round>取 消</el-button>

            <el-button style="margin-top: 12px;" @click="upBtn" v-if=" active > 0 && active<=1" type="primary" round>上一步</el-button>

            <el-button style="margin-top: 12px;" @click="nextBtn" v-if="active < 1 " type="primary" round>下一步</el-button>

            <el-button style="margin-top: 12px;" @click="nextBtn" v-if="active == 1 " type="primary" round>保 存</el-button>

        </div>

     </el-dialog>

    </div>

  </template>

js代码

  <script>

  export default {

    name: "InfoReleas",

    data() {

      return {

        loadingInfos:false,

        infoReleasData:[],

        queryForm:{},

        // 对话框

        dialogTitle:"",

        visbleOpen:false,

        releasForm:{

            tagSelect:[]

        },

        rulesReleas:{},

        // 进度条

        active: 0,

        // 标签值

        tagList:[

            {id: 1, name: 'tag 1',beal:false},

            {id: 2, name: 'tag 2',beal:false},

            {id: 3, name: 'tag 3',beal:false},

            {id: 4, name: 'tag 4',beal:false},

            {id: 5, name: 'tag 5',beal:false},

            {id: 6, name: 'tag 6',beal:false}

        ],

       // 标签选中值

        tagChooseData:[],

      };

    },

    created() {

    },

    methods: {

        handleAddInfoReleas(){

            this.dialogTitle="新增发布";

            this.visbleOpen=true;

        },

        // 上一步

        upBtn(){

            if (this.active-- > 2) this.active = 0;

        },

        // 下一步

        nextBtn(){

            if (this.active++ > 2) this.active = 0;

            console.log(this.active);

        },

        // 标签选择

        onTagSelect(e){

            this.tagList[e].beal = !this.tagList[e].beal;  //点击后改变状态

            if (this.tagList[e].beal == true) {

                this.tagChooseData.push(this.tagList[e].name);   //如果点击后是true那么直接添加

            } else {

                //如果不是true的话说明这个标签已经存在了,那么就要查找然后删除

                var index = this.tagChooseData.map(item => item).indexOf(this.tagList[e].name);

                if (index != -1) {

                this.tagChooseData.splice(index, 1);

                }

            }

        }

    }

  };

  </script>

演示

  <style scoped>

  </style>

  <style>

  .limited-width {

    width: 200px; /* 设置宽度为200像素 */

  }

.span {

  display: inline-block;

  padding: 0 10px;

  height: 20px;

  line-height: 20px;

  background: rgba(255, 255, 255, 1);

  box-shadow: 0px 1px 4px 0px rgba(141, 141, 141, 0.3);

  border-radius: 4px;

  font-size: 12px;

  font-family: Microsoft YaHei;

  font-weight: 400;

  color: rgba(34, 34, 34, 1);

  margin-left: 10px;

  cursor: pointer;

  min-width: 44px;

  text-align: center;

}

.span_active {

  background: rgba(236, 173, 64, 1);

  color: #fff;

}

.p_yx {

  color: #222;

}

.p_yx_span {

  display: inline-block;

  padding: 0 10px;

  height: 20px;

  line-height: 20px;

  background: rgb(76, 96, 193);

  box-shadow: 0px 1px 4px 0px rgba(141, 141, 141, 0.3);

  border-radius: 4px;

  font-size: 12px;

  font-family: Microsoft YaHei;

  font-weight: 400;

  color: rgba(34, 34, 34, 1);

  margin-left: 10px;

  cursor: pointer;

  min-width: 44px;

  text-align: center;

}

  </style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/20521.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker 容器中运行Certbot获取和管理 SSL 证书

如果你在 Docker 容器中运行 Nginx 并希望使用 Certbot 获取和管理 SSL 证书&#xff0c;可以使用 Certbot 的官方 Docker 镜像来完成这项工作。以下是使用 Docker 和 Certbot 获取 SSL 证书并配置 Nginx 的详细步骤&#xff1a; 1. 拉取 Certbot Docker 镜像 首先&#xff0…

window下C语言程序报错

Thread 1 received signal SIGSEGV, Segmentation fault. ___chkstk_ms () at ../../../../../src/gcc-8.1.0/libgcc/config/i386/cygwin.S:126 126 ../../../../../src/gcc-8.1.0/libgcc/config/i386/cygwin.S: No such file or directory. 参考&#xff1a;不同平台下对…

代码随想录训练营Day 46|力扣完全背包、518. 零钱兑换 II、377. 组合总和 Ⅳ

1.完全背包 视频讲解&#xff1a;带你学透完全背包问题&#xff01; 和 01背包有什么差别&#xff1f;遍历顺序上有什么讲究&#xff1f;_哔哩哔哩_bilibili https://programmercarl.com/%E8%83%8C%E5%8C%85%E9%97%AE%E9%A2%98%E7%90%86%E8%AE%BA%E5%9F%BA%E7%A1%80%E5%AE%8C%E…

as keyof GlobalStore

解释 as keyof GlobalStore 在 TypeScript 中&#xff0c;as keyof GlobalStore 是一种类型断言语法。它告诉 TypeScript&#xff0c;返回的值是一个特定类型的值&#xff0c;这里是 GlobalStore 类型的键。这在编译时有助于确保类型安全。 关键点&#xff1a; 类型断言&…

【三国战纪game】

编写一个完整的《三国战纪》游戏是一个庞大的项目&#xff0c;需要一个专业的游戏开发团队和大量的时间。但是&#xff0c;我可以给你一个简化的概念&#xff0c;帮助你开始这个过程。 游戏概念&#xff1a;三国战纪 《三国战纪》是一个以中国三国时期为背景的策略游戏&#…

构建智慧银行保险系统的先进技术架构

随着科技的不断发展&#xff0c;智慧银行保险系统正日益受到关注。在这个数字化时代&#xff0c;构建一个先进的技术架构对于智慧银行保险系统至关重要。本文将探讨如何构建智慧银行保险系统的先进技术架构&#xff0c;以提升服务效率、降低风险并满足客户需求。 ### 1. 智慧银…

qwen-moe

一、定义 qwen-moe 代码讲解&#xff0c; 代码qwen-moe与Mixtral-moe 一样&#xff0c; 专家模块qwen-moe 开源教程Mixture of Experts (MoE) 模型在Transformer结构中如何实现&#xff0c;Gate的实现一般采用什么函数&#xff1f; Sparse MoE的优势有哪些&#xff1f;MoE是如…

C++学习 const 上

&#x1f308; C Primer 的学习笔记 前言 这篇blog 主要是想具体讲讲新学到的const 当然不止是const 而是基于这个const引申出来的指针和引用。还是需要捋一捋的&#xff0c;这还是有点困难的。 我会把每一节的重点都摘出来&#xff0c;放在前面~ 1️⃣首先讲讲const 2️⃣…

Linux C/C++动态库制作

概念&#xff1a;程序在编译时不会把库文件的二进制代码链接到目标程序中&#xff0c;而是在运行时候才被载入。 如果多个进程中用到了同一动态库中的函数或类&#xff0c;那么在内存中只有一份&#xff0c;避免了空间浪费问题。 特点&#xff1a; 程序运行在运行的过程中&…

统计信号处理基础 习题解答10-6

题目 在例10.1中&#xff0c;把数据模型修正为&#xff1a; 其中是WGN&#xff0c;如果&#xff0c;那么方差&#xff0c;如果&#xff0c;那么方差。求PDF 。把它与经典情况PDF 进行比较&#xff0c;在经典的情况下A是确定性的&#xff0c;是WGN&#xff0c;它的方差为&#…

5.算法讲解之-二分查找(简单易懂)

1.简介 1.二分查找的思路简单易懂&#xff0c;较难的是如何处理查找过程中的边界条件&#xff0c;当较长时间没写二分查找的时候就容易忘记如何处理边界条件。 2.只有多写代码&#xff0c;多做笔记就不易忘记边界条件 2.算法思路 正常查找都是从头到尾查找一个数字是否在数组中…

使用pycharm+opencv进行视频抽帧(可以用来扩充数据集)+ labelimg的使用(数据标准)

一.视频抽帧 1.新创建一个空Pycharm项目文件&#xff0c;命名为streach zhen 注&#xff1a;然后要做一个前期工作 创建opencv环境 &#xff08;1&#xff09;我们在这个pycharm项目的终端里面输入下面的命令&#xff1a; pip install opencv-python --user -i https://pypi.t…

SettingWithCopyWarning: A value is trying to be set on a copy of a slice fro

SettingWithCopyWarning: A value is trying to be set on a copy of a slice fro 错误代码&#xff1a; while i < len(data_csv_data):if data_csv_data[flowmember][i] j:data_csv_data[label][i] data_csv_label[label][j-1]data_csv_data[classes][i]data_csv_label[…

[数据集][目标检测]猕猴桃检测数据集VOC+YOLO格式1838张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;1838 标注数量(xml文件个数)&#xff1a;1838 标注数量(txt文件个数)&#xff1a;1838 标注…

企业级宽表建设

1 宽表概述 宽表&#xff0c;从字面意义上讲就是字段比较多的数据库表&#xff0c;通常情况下是讲很多相关的数据&#xff0c;包括实时表、维度表、指标等格言录在一起形成的一张数据表。 2 宽表的优点 2.1 开发效率提升 由于把不同的信息放在同一张表存储&#xff0c;宽表…

sensitive-word 敏感词 v0.17.0 新特性之 IPV4 检测

敏感词系列 sensitive-word-admin 敏感词控台 v1.2.0 版本开源 sensitive-word-admin v1.3.0 发布 如何支持分布式部署&#xff1f; 01-开源敏感词工具入门使用 02-如何实现一个敏感词工具&#xff1f;违禁词实现思路梳理 03-敏感词之 StopWord 停止词优化与特殊符号 04-…

详解 Spark 核心编程之 RDD 持久化

一、问题引出 /** 案例&#xff1a;对同一份数据文件分别做 WordCount 聚合操作和 Word 分组操作 期望&#xff1a;针对数据文件只进行一次分词、转换操作得到 RDD 对象&#xff0c;然后再对该对象分别进行聚合和分组&#xff0c;实现数据重用 */ object TestRDDPersist {def …

Jupyter Notebook快速搭建

Jupyter Notebook why Jupyter Notebook Jupyter Notebook 是一个开源的 Web 应用程序&#xff0c;允许你创建和分享包含实时代码、方程、可视化和解释性文本的文档。其应用包括&#xff1a;数据清洗和转换、数值模拟、统计建模、数据可视化、机器学习等等。 Jupyter Notebo…

东芝机械人电池低报警解除与机器人多旋转数据清零

今天启动一台设备,触摸屏一直显示机器人报警(翻译过后为电池电量低),更换电池后关机重启后也不能消除,所以打开示教器,下面就来说说怎么解决此项问题(可以参考官方发的手册,已手册为主)。 一,设备 下面来看看机械手的照片与示教器的照片 四轴机械手(六轴机器人有可…

可视化大屏也在卷组件化设计了?分享一些可视化组件

hello&#xff0c;我是大千UI工场&#xff0c;这次分享一些可视化大屏的组件&#xff0c;供大家欣赏。&#xff08;本人没有源文件提供&#xff09;