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

相关推荐
牧艺15 分钟前
从零到协同:构建类飞书在线文档系统的五个技术重难点
前端·人工智能
红尘散仙1 小时前
想写一个像样的终端 App?试试把 React 的开发体验搬进 Rust TUI
前端·rust
袋鼠云数栈UED团队2 小时前
一套 Spec-First 的 AI 编程工作流
前端·人工智能
袋鼠云数栈前端2 小时前
一套 Spec-First 的 AI 编程工作流
前端·ai+
angerdream2 小时前
Android手把手编写儿童手机远程监控App之vue3 路由守卫
前端
不服老的小黑哥2 小时前
AI规范驱动编程-harness工程项目实战
前端
vivo互联网技术2 小时前
从 Web 到桌面:基于 Tauri 2.0 + Vue 3 打造 vivo 线下门店「大头贴」拍照体验系统
前端·rust
光影少年2 小时前
React 合成事件机制、和原生事件区别、事件冒泡阻止
前端·react.js·掘金·金石计划
没有鸡汤吃不下饭2 小时前
告别手动对接口:我用 OpenAPI JSON 做了一个前端接口同步 Skill
前端·ai编程
空栈独白2 小时前
NestJS实战-前后端联调
前端