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

相关推荐
Patrick_Wilson13 分钟前
修好 bug 只是开始:一次由监控需求反向重构日志结构的复盘
前端·监控·数据可视化
kyriewen29 分钟前
面试官让我优化一个卡死的表格,我打开 Claude 五秒重写,他放下咖啡问我要不要来当组长
前端·javascript·面试
小粉粉hhh1 小时前
React(二)——dom、组件间通信、useEffect
前端·javascript·react.js
Csvn1 小时前
🤖 AI 生成前端代码的 5 个典型翻车现场及修复指南
前端
IT_陈寒2 小时前
SpringBoot自动装配坑了我一天,原来问题出在这
前端·人工智能·后端
索西引擎3 小时前
【React】key 属性:协调算法中的元素标识机制与最佳实践
前端·javascript·react.js
只会cv的前端攻城狮4 小时前
动态组件架构设计:从配置到事件驱动全链路解析
前端·vue.js
飞天狗4 小时前
Next.js 16 App Router 实战:服务端组件与流式渲染
前端·next.js
万敏4 小时前
Vue3 全栈实战第二周:Pinia + Vite + Router + axios 完整记录
vue.js·node.js·全栈
OpenTiny社区4 小时前
TinyEngine 2.11版本发布:AI 进一步融入画布,Vue 工程可一键转DSL
前端·vue.js·github