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

根据字典值匹配 列的值 优点就是可维护性强 改完字典就会生效 如果写死需求变更难以维护

javascript 复制代码
<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)}}<!--调用getChangeType方法-->
           </template>
      </el-table-column>
 
</el-table>
javascript 复制代码
 getChangeType(e) {
      for (var i = 0; i < this.typeList.length; i++) {
        if (this.typeList[i].value == e) { //value,label保持和上面定义一致
          return this.typeList[i].label;
        }
      }
    },

typeList是你从字典getdict获取的数组 根据对应的value 匹配对应的label

相关推荐
Pikachu8033 分钟前
我在早高峰地铁里对手机吼了几句,隔壁同事直接看傻了
前端·后端
半岛@少年16 分钟前
Webpack在前端项目中究竟发挥什么作用?
前端·webpack·前端工程化
2501_9400417417 分钟前
企业官网与品牌落地页,能直接交付的前端题目
前端
小番茄夫斯基24 分钟前
全球大模型的价格和能力排行汇总
前端·后端·架构
小小小小宇37 分钟前
前端领域 30 个值得安装的 Agent Skills
前端
xkxnq39 分钟前
第八阶段:工程化、质量管控与高级拓展(132天),Vue项目文档自动化:VuePress搭建组件文档(组件示例+API说明)
javascript·vue.js·自动化
喵了几个咪41 分钟前
基于 Next.js 的 Headless CMS 前端架构:技术解析与二次开发导引
前端·javascript·架构
星栈42 分钟前
Makepad 不只是画界面:事件、状态和组件通信,到底怎么写
前端·rust
dsyyyyy110143 分钟前
只用HTML和CSS实现换一换效果
前端·css·html
青山Coding1 小时前
Cesium应用(七):地形开挖的实现思路
前端·cesium