element ui 表格

element ui 表格封装成表格嵌套表格（嵌套表格内容有点不一样）

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      highlight-current-row
      default-expand-all
      :header-cell-style="{ background: '#000', color: '#fff', height: '49px', textAlign: 'center' }"
      :cell-style="{ textAlign: 'center', height: '190px' }"
      :tree-props="{ children: 'children' }"
      :indent="0"
      @row-click="toRow"
    >
      <el-table-column label="全选" width="180">
        <template slot-scope="scope">
          <div v-show="fatherNode(scope.row.id)" @click.stop>
            <el-checkbox v-model="scope.row.checked" @change="checkChangeHandle"> </el-checkbox>
          </div>
        </template>
      </el-table-column>
      <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="num" label="数量" width="180">
        <template slot-scope="scope">
          <div @click.stop.prevent>
            <el-input-number
              size="small"
              v-model="scope.row.num"
              @change="handleChange"
              :disabled="!fatherNode(scope.row.id)"
            ></el-input-number>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column label="">
        <template slot-scope="scope">
          <div
            v-if="fatherNode(scope.row.id)"
            @click.stop="handleDelete(scope.row.id)"
            :style="{ width: '50px', height: '50px', background: 'red' }"
          >
            x
          </div>
        </template>
      </el-table-column>
      <template slot="append">
        <div>
          <div>
            <el-checkbox @change="checkAllChangeHandle" v-model="selectAll" />
            <div>全选</div>
            <div style="cursor: pointer" @click="deleteSelect">删除选中商品</div>
          </div>
          <el-button type="danger" class="subBtn" @click="settleHandle"> 下单结算 </el-button>
        </div>
      </template>
    </el-table>
  </div>
</template>

  </div>
</template>
<script>
export default {
  data() {
    return {
      selectAll: false, // 是否全选
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          num: 16,
          address: '上海市普陀区金沙江路 1518 弄',
          checked: false
        },
        {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          num: 20,
          address: '上海市普陀区金沙江路 1517 弄',
          checked: false
        },
        {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          num: 20,
          address: '上海市普陀区金沙江路 1519 弄',
          checked: false,
          children: [
            {
              id: 31,
              date: '2016-05-01',
              name: 'children--1',
              num: 20,
              address: '上海市普陀区金沙江路 1519 弄'
            },
            {
              id: 32,
              date: '2016-05-01',
              name: 'children--2',
              num: 20,
              address: '上海市普陀区金沙江路 1519 弄'
            }
          ]
        },
        {
          id: 4,
          date: '2016-05-03',
          name: '李莉莉',
          num: 20,
          address: '上海市普陀区金沙江路 1516 弄',
          checked: false
        }
      ]
    }
  },
  computed: {
    fatherNode(id) {
      return function (id) {
        return this.tableData.some((item) => {
          return item.id === id
        })
      }
    }
  },
  methods: {
    toRow(row, column, event) {
      console.log(row)
      console.log(column)
      console.log(event)
    },
    handleChange() {},
    handleDelete(id) {
      console.log(id)
      this.tableData.forEach((arrItem, arrIndex) => {
        if (arrItem.id === id) {
          this.tableData.splice(arrIndex, 1)
        }
      })
    },
    deleteSelect() {},
    settleHandle() {},
    checkChangeHandle(val) {
      if (!val) {
        this.selectAll = val
      } else {
        this.selectAll = !this.tableData.some((item) => {
          return !item.checked
        })
      }
    },
    checkAllChangeHandle(val) {
      this.tableData.forEach((item) => {
        item.checked = val
      })
      this.selectAll = val
    }
  }
}
</script>
<style  scoped>
/deep/ .el-icon-arrow-right::before {
  content: '';
}
/deep/ .el-table__expanded-cell[class*='cell'] {
  padding: 0;
}
</style>