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

搜索中 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