vue列表table组件渲染数据字典

889 阅读1分钟

后台返回值是,1,2,3这种数据,但是渲染到页面中是汉字,解决方案如下,

` 直接上代码 html部分

   <el-table-column
    prop="CATEGORY"
    header-align="center"
    align="center"
    label="标签分组"
  >
  <template slot-scope="scope">{{
      scope.row.CATEGORY ?CATEGORYData[scope.row.CATEGORY].lable : "人口属性"
    }}
    </template>
  </el-table-column>
  <el-table-column
    prop="DATASOURCE"
    header-align="center"
    align="center"
    label="数据来源"
  >
  <template slot-scope="scope">{{
      scope.row.DATASOURCE ? DATASOURCEData[scope.row.DATASOURCE].lable : "移动数据"
    }}
    </template>
  </el-table-column>
  `
  js部分
  
        `    // 数据来源转换表
 DATASOURCEData: {
    1: {
      lable: "移动数据",
    },
    2: {
      lable: "厅局数据",
    },
     3: {
      lable: "自有数据",
    },
  },
    // 所属分组转换表
CATEGORYData: {
    1: {
      lable: "人口属性",
    },
    2: {
      lable: "行为属性",
    },
     3: {
      lable: "兴趣偏好",
    },
  },     `