<template>
  <div class="p">
    <div class="p1">
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="id"
            label="id"
        >

        </el-table-column>
        <el-table-column
            v-for="c in checkColumns"
            :prop="c"
            :label="c"
            :key="c">
        </el-table-column>
      </el-table>
    </div>
    <div class="p2">
      <el-tree :data="treeData" show-checkbox :props="defaultProps" @check-change="handleCheckChange"
               @node-click="handleNodeClick"></el-tree>
    </div>


  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {
      checkColumns:[],
      tableData: [{
        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 弄'
      }, {
        id:4,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      treeData: [
        {
          label: 'columns',
          children: [
            {
              label: 'name',
            },
            {
              label: 'date',
            },
            {
              label: 'address',
            },
          ]
        },
        ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleNodeClick( data ) {
      console.log( data );
    },
    handleCheckChange( data, checked ) {
      //选中
      if(checked){
        if(data.label != 'columns'){
          this.checkColumns.push(data.label)
        }
      }else{
        //取消选中
        if(this.checkColumns.indexOf(data.label) != -1){
          this.checkColumns.splice(this.checkColumns.indexOf(data.label),1)
        }
      }
    },
  }
}
</script>

<style scoped>
.p{
  display: flex;
}
.p1{
  width: 80%;
}

</style>