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]}}&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