vue+element中表格显示不同的状态

实现效果如下:下拉选择中有不同的选项,表格中也会显示多种状态

搜索中 input表单内容

<el-form-item label="工单状态">
   <el-select v-model="queryForm.state" clearable placeholder="请选择">
      <el-option v-for="(item, index) in config.gzdStateList" :key="index" :value="index" :label="item"></el-option>
   </el-select>
</el-form-item>

表格中 状态内容显示

<el-table-column prop="state" label="工单状态" min-width="80px">
    <template slot-scope="scope">
         <span>{{config.gzdStateList[scope.row.state]}} </span>
         <div style="color:#409EFF;cursor:pointer" @click="viewDetail(scope.row)">查看详情</div>
    </template>
</el-table-column>

gzdStateList 在config中定义,因为在很多地方用到

const config = {
        gzdStateList: {
            0: '已派装维',
            1: '已预约',
            2: '已回执(待归档)',
            3: '已归档',
            4: '待转派',
            5: '待撤单',
            6: '已撤单',
            },  
    }
export default config
原文链接:segmentfault.com

上一篇:Hybird App 应用开发中5个必备知识点复习
下一篇:css-开发总结

相关推荐

官方社区

扫码加入 JavaScript 社区