2020-08-10

<template>
  <div class="hello">
    <el-container>
      <el-aside width="10%">
        <h4 class="myclass">树形菜单</h4>
        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </el-aside>
      <el-main>
        <el-input placeholder="请输入内容" v-model="input1" style="width:50%">
          <template slot="prepend">用户名称</template>
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @row-click="handleRowClick"
              @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                label="日期"
                >
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                >
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址"
                show-overflow-tooltip>
        </el-table-column>
      </el-table>

        <el-button round plain style="margin-top: 30px;margin-left: 80%">取消</el-button>
        <el-button type="primary" round plain style="margin-top: 30px;margin-bottom: 20px">确定</el-button>
      </el-main>
    </el-container>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        input1: "",
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        multipleSelection: [],
        //树形控件数据
        data: [{
          label: '树形菜单A',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '树形菜单B',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '树形菜单C',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    },

    methods: {
      handleNodeClick(data) {
        console.log(data);
      },

      handleSelectionChange(val) {
        console.log(val)
      if (val.length >2){
          this.$refs.multipleTable.clearSelection();
        }
        else if (val.length >1) {
          this.$refs.multipleTable.clearSelection();
          this.$refs.multipleTable.toggleRowSelection(val.pop());
        }else {
          this.$refs.multipleSelection=val.pop()
        }
      },
      handleRowClick(row){
        this.$refs.multipleTable.toggleRowSelection(row);
        console.log("=========")
        console.log(row)
      }
    }
  }
</script>
<style scoped>
  .el-aside{
    background-color: #f4f4f5;
  }
  .el-tree{
    background: #f4f4f5 !important;
  }
  .el-main{
    //padding-left: 2px !important;
    padding: 0px !important;
  }
  .el-container{
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .myclass{
    margin-left: 10%;
    margin-bottom: 5%;
    margin-top: 5%;
  }
</style>