el-table的懒加载怎么通过点击某一单元格来加载

Question

就是点击某一个单元格，通过调接口获取该行的子数据，展示在改行下面，不是通过官方那种点击箭头展开

Answer 1

通过修改css 就可以实现

`<!-- -->
<template>
<div class="data">

<el-table :data="tableData1" style="width: 100%" row-key="id" border lazy :load="load" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
  <el-table-column prop="date" label="日期" width="180">
  </el-table-column>
  <el-table-column prop="name" label="姓名" width="180">
  </el-table-column>
  <el-table-column prop="address" label="地址">
  </el-table-column>
</el-table>

</div>
</template>

<script>
export default {
watch: {},
data() {

return {
  tableData1: [
    {
      id: 1,
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    },
    {
      id: 2,
      date: '2016-05-04',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1517 弄'
    },
    {
      id: 3,
      date: '2016-05-01',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1519 弄',
      hasChildren: true
    },
    {
      id: 4,
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1516 弄'
    }
  ]
}

},
methods: {

load(tree, treeNode, resolve) {
  setTimeout(() => {
    resolve([
      {
        id: 31,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },
      {
        id: 32,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }
    ])
  }, 1000)
}

},
mounted() {}
}
</script>

<style lang="less" scoped>
.data {
/deep/.el-table {

.el-table__expand-icon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: red;
  width: auto;
  height: auto;
  .el-icon {
    &::before {
      content: '';
    }
  }
}
.el-table__expand-icon--expanded {
  transform: rotate(0deg);
  background: yellow;
}

}
}
</style>
`