【vue】 SKU属性值 和 数据字典的多层数据展示

简单方法

这样的一个数据结构可以，直接通过循环出来就可以了

 <el-table-column label="属性值">
          <template slot-scope="scope">
            <el-tag v-for="item in scope.row.sku_value_list" :key="item.id" class="tags">{{ item.prod_sku_value }}</el-tag>
          </template>
 </el-table-column>

第二种数据字典情况

 <el-table-column prop="dic_data" label="字典项">
        <template slot-scope="{ row }">{{ row.dic_data }} </template>
      </el-table-column>

// 获取字典数据
    async getDictList() {
      this.loading = true
      const params = {
        keyword: this.queryInfo.keyword,
        pagesize: this.pagination.limit,
        pagenum: this.pagination.currPage,
      }
      try {
        const { code, message, data } = await dictList(params)
        if (code !== 200) return this.$message.fail(message)
        this.tableData = data.map((item) => {
          const { dic_data: oldData, ...orthers } = item
          const dic_data = oldData
            .map((dic) => {
              return `${dic.data_id}:${dic.data_name}`
            })
            .join(' ')
          return { ...orthers, dic_data }
        })