Web前端-el-table-column表格匹配字典数据

清疚 2023-10-03 10:54 14阅读 0赞

最近初步学习Vue开发web前端的table表格时，想通过字典中数据进行匹配展示，如下

<el-table v-loading="loading" :data="processList" @selection-change="handleSelectionChange">
    
       <el-table-column type="selection" width="55" align="center" />
    
          
          <el-table-column label="类型" align="center" prop="type">
               <template slot-scope="scope">
                  {
       {getChangeType(scope.row.type)}}
               </template>
          </el-table-column>
    
    </el-table>

数据字典如下：

data() {
       return {
            typeList: [{
              dictValue: '1',
              dictLabel: '小明'
            }, {
              dictValue: '2',
              dictLabel: '小红'
            }, {
              dictValue: '3',
              dictLabel: '小绿'
            }],
       }
    },

下面就说自己解决的方法

data() {
       return {
            typeList: [{
              dictValue: '1',
              dictLabel: '小明'
            }, {
              dictValue: '2',
              dictLabel: '小红'
            }, {
              dictValue: '3',
              dictLabel: '小绿'
            }],
       }
    },
        
    
    methods: {
    	//1、使用插槽（推荐）
        getChangeType(e) {
          for (var i = 0; i < this.typeList.length; i++) {
            if (this.typeList[i].dictValue == e) { //dictValue，dictLabel保持和上面定义一致
              return this.typeList[i].dictLabel;
            }
          }
        },
    
        //2、使用:formatter
        typeFormatter: function(row, column) {
            return row.type == 1
                        ? "小明"
                   : row.type == 2
                        ? "小红"
                   : row.type == 3 
                        ? "小绿" : "无名？";
    		}
    	}
    	//也可以用switch
    	typeFormatter: function(row, column) {
          switch (row.type) {
            case "1":
              return "小明";
              break;
            case "2":
              return "小红";
              break;
            case "3":
              return "小绿";
              break;
        }
    }