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

相关推荐
Penge66615 分钟前
Ant Design(Antd)了解
前端
wangruofeng38 分钟前
同一行代码,百种渲染:Asuka、React Native 与 Flutter 跨平台渲染机制深度拆解
前端·github
Penge6661 小时前
JavaScript 核心语法速通
前端
wangruofeng2 小时前
写给开发者的〈重构 UI〉实战笔记:从改好一个设置页开始,告别“程序员审美”
前端·aigc
程序员鱼皮3 小时前
格局!刚刚 DeepSeek 正式开放全家桶 API,咱都能复刻 DeepSeek App 了?
前端·aigc·ai编程
ZhengEnCi3 小时前
登录页电脑端怎么设计才不空:5 种布局方案与可粘贴 AI 提示词
前端·css·设计
Penge6663 小时前
JavaScript:DOM 树
前端
Penge6663 小时前
CSS 核心布局指南:盒模型、Flex 布局与 Position 定位
前端
Penge6665 小时前
HTML基础:HTML 标签属性
前端
Penge6665 小时前
HTML 基础:块级元素、行内元素与行内块元素详解
前端