vueelement中表格显示不同的状态

jiezi

5 年前

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

搜索中 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]}}&nbsp;</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