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