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>