el-select踩的坑记录一下

从后端获取的数据给el-select渲染，渲染失败

前端代码

获取数据

async getSkus(value){
      let sn = value
      sn.forEach(item=>{
        if (sn.length > 1) {
          sn.splice(0, 1)
          console.log('删除了这个->' + item);
        }
      })
      const { data:res } = await this.$http.get('/admin/v1.financial.ThecostofApi/queryCostSku/',
        {params: { Dr_ShopnameSite:sn + '' }}
      )
      this.cost_list_value.skus = res.data
      console.log(this.cost_list_value.skus);
      console.log(value);
      console.log(res.data);
    },

能够成功获取并赋值给数组对象

最后无报错但是数据没有展示

最后解决的前端代码展示

        <el-table-column prop="label" label="SKU" header-align="center" align="center">
          <template v-slot="sku">
          <el-select
              v-model="sku.row.sku"
              filterable
              placeholder="请选择SKU"
              :multiple = false
              ref="select">
            <template v-slot="skus">
              <el-option
                  v-for="item in cost_list_value.skus"
                  :key="item.value"
                :label="item.label"
                :value="item.label">
              </el-option>
            </template>
          </el-select>
          </template>
        </el-table-column>

el模板还提供了 value-key方法代替作用于插槽 - 效果与插槽一样

例子：

<template>
	<el-select 
		v-model="permissionList" 
		multiple 
		placeholder="请选择"
		value-key="groupID"
	>
		<el-option v-for="item in groups" :key="item.groupID" :label="item.name" :value="item" />
	</el-select>
</template>