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

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

<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>
 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 

 

 

相关推荐

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

    2024-05-09 09:32:06       23 阅读
  2. el-table-column叠加el-popover使用

    2024-05-09 09:32:06       36 阅读
  3. 基于 element-ui 表格组件 el-table 导出表格数据

    2024-05-09 09:32:06       30 阅读
  4. el-table表格数据过长如何使用省略号

    2024-05-09 09:32:06       69 阅读
  5. Vue3中el-table表格数据不显示

    2024-05-09 09:32:06       46 阅读
  6. el-table 树状表格查询符合条件的数据

    2024-05-09 09:32:06       27 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-05-09 09:32:06       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-05-09 09:32:06       101 阅读
  3. 在Django里面运行非项目文件

    2024-05-09 09:32:06       82 阅读
  4. Python语言-面向对象

    2024-05-09 09:32:06       91 阅读

热门阅读

  1. vue3+element-plus国际化

    2024-05-09 09:32:06       31 阅读
  2. c++实现数据库连接池

    2024-05-09 09:32:06       33 阅读
  3. 基于单片机的烟雾报警系统的设计与实现

    2024-05-09 09:32:06       26 阅读
  4. 解决后端ID传到前端时被截断,末尾显示00

    2024-05-09 09:32:06       31 阅读
  5. 使用nvm管理多版本node.js

    2024-05-09 09:32:06       34 阅读
  6. 【神经网络】09 - 优化器 torch.optim

    2024-05-09 09:32:06       36 阅读
  7. Apache 开源项目文档中心 (英文 + 中文)

    2024-05-09 09:32:06       36 阅读
  8. Cloudera简介和安装部署

    2024-05-09 09:32:06       30 阅读
  9. Cloudera简介与安装部署

    2024-05-09 09:32:06       35 阅读