vue elementui列表嵌套功能实现

    

2.样式

.row_a {
  visibility: hidden;
}
.el-table__expanded-cell{
  // padding:0 !important;
  padding-top: 20px!important;
  padding-bottom: 20px!important;
  padding-left: 10px!important;
  padding-right: 10px!important;
  // border-bottom: none;
}
.hiderow .el-table__expand-column .el-icon {
  visibility: hidden;
}

3.methods

    // 展示图标
    isShowIcon (row, index) {
      // console.log(row, '999999')
      if (row.row.product_type === 0) { return 'hiderow' } else { return 'hiderow' }
    },

        this.tableData = res.data.list
          // const arrList = this.tableDatalist.map(item => {
          //   item['children'] = []
          //   item['skuList'] = item.sku_list
          //   return item
          // })
          // console.log(this.arrList,"arrList")
          // this.tableData = arrList   
          this.tableData.forEach((item, index) => {
            this.expands.push(item.product_id)
            let _this = this
            console.log(this.tableData[index].sku_list,"tableData[index].sku_list")
             this.tableData[index].sku_list.forEach((item1,index1)=>{
                if (item.status !== 1 && item.status !== 3) {
                  item1['skuStatus'] = true
                } else {
                  item1['skuStatus'] = false
                }
             })
          })

4.需要后台数据格式

vue elementui列表嵌套功能实现_第1张图片

你可能感兴趣的:(vue)