elmentui 表格重写

以下是关于ElementUI表格重写的介绍和演示：

1. 表格展开
可以使用`tree-props="{children: ‘children’, hasChildren: ‘hasChildren’}"`实现表格的展开，但是这样会把icon直接放在第一列，无法单独放到一列。如果想要实现像官网实例一样的效果，可以使用以下方法：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <div style="padding: 20px">
          <p>姓名：{{ props.row.name }}</p>
          <p>年龄：{{ props.row.age }}</p>
          <p>地址：{{ props.row.address }}</p>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <<el-table-column prop="address" label="地址">
      <template slot-scope="scope">
        <span>{{ scope.row.address }}</span>
        <el-button v-if="scope.row.hasChildren" @click="handleExpand(scope.row)">展开</el-button>
      </template>
    </el-table-column>>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        name: '王小明',
        age: 18,
        address: '北京市朝阳区芍药居',
        children: [{
          name: '王小明的儿子',
          age: 1,
          address: '北京市朝阳区芍药居'
        }],
        hasChildren: true
      }, {
        name: '张小刚',
        age: 25,
        address: '北京市海淀区西二旗'
      }, {
        name: '李小红',
        age: 30,
        address: '上海市浦东新区世纪大道'
      }, {
        name: '周小伟',
        age: 26,
        address: '深圳市南山区深南大道'
      }]
    }
  },
  methods: {
    handleExpand(row) {
      row.children.forEach(item => {
        this.tableData.splice(this.tableData.indexOf(row) + 1, 0, item)
      })
      row.hasChildren = false
    }
  }
}
</script>

2. 嵌套表格
如果想要在表格中嵌套表格，可以使用`show-header="false"`去掉内部嵌套表格的头部信息。同时，如果想要使用iconfont，可以将iconfont图标库中的`&#xe6a0`改成`\e6a0`即可展示成功。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
    <<el-table-column label="详情">
      <template slot-scope="scope">
        <el-table :data="scope.row.details" show-header="false">
          <el-table-column prop="type" label="类型"></el-table-column>
          <el-table-column prop="desc" label="描述"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="handleDetailEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button type="text" @click="handleDetailDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-table-column>>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        details: [{
          type: '家具',
          desc: '沙发'
        }, {
          type: '家具',
          desc: '桌子'
        }]
      }, {
        date: '2016-05-04',
        name: '王小虎',
        details: [{
          type: '家具',
          desc: '床'
        }, {
          type: '家具',
          desc: '衣柜'
        }]
      }, {
        date: '2016-05-01',
        name: '王小虎',
        details: [{
          type: '家具',
          desc: '餐桌'
        }, {
          type: '家具',
          desc: '椅子'
        }]
      }, {
        date: '2016-05-03',
        name: '王小虎',
        details: [{
          type: '家具',
          desc: '书桌'
        }, {
          type: '家具',
          desc: '书柜'
        }]
      }]
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(index, row) {
      console.log(index, row)
    },
    handleDetailEdit(index, row) {
      console.log(index, row)
    },
    handleDetailDelete(index, row) {
      console.log(index, row)
    }
  }
}
</script>