el-tree 跟el-table连用，el-tree每选一个el-table多一列

<template>
  <!--  多维查询-->
  <el-container>
    <div class="card2">
      <div class="serchWrap">
        <div class="left">
          <el-form
              :inline="true"
              :model="listQuery"
              class="demo-form-inline s1"
              @submit.native.prevent
          >
            <el-form-item>
              <el-input>
                <template slot="prepend">新建表名称</template>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <el-table
          :max-height="tableHeight"
          style="width: 100%"
          align="center"
          v-loading="loading"
          element-loading-text="拼命加载中~"
          element-loading-color="#ccc"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.1)"
          row-key="id"

      >
        <el-table-column
            v-for="(item) in tableData"
            :key="item.id"
            show-overflow-tooltip
            :label="item.label"
        >
          <!--          <template slot-scope="scope">-->
          <!--            <span>{{scope.row.id}} </span>-->
          <!--          </template>-->
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-footer v-if="true">
        <el-pagination
            class="comonPage"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="this.listQuery.current"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="this.listQuery.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
      </el-footer>
    </div>
    <div class="card1">
      <div class="title">
        <el-button type="warning"
        ><svg-icon icon-class="菜单_列表" />&nbsp;&nbsp;<span
            v-if="nameNow"
            class="nameNow"
        >{{ nameNow + "--" }}</span
        >
          &nbsp;维度</el-button
        >
      </div>
      <div class="treeWrap">
        <el-tree
            class="treeitems"
            :data="data"
            show-checkbox
            node-key="id"
            :props="defaultProps"
            @node-click="handleNodeClick"
            @check-change="handleCheck"
            default-expand-all
            ref="tree"
        >
        </el-tree>
        <el-button  type="primary"
        ><svg-icon icon-class="保存" />&nbsp;&nbsp;查询</el-button
        >
      </div>
    </div>
  </el-container>
</template>

<script>
import has from "@/directive/has"; //按钮指令
//引入api接口请求
import {} from "@/utils/api";
import { tableMixin } from "@/MiXin/table"; //混入tableHeight、total
export default {
  mixins: [tableMixin],
  components: {},
  directives: {
    has,
  },

  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    //复选框点击事件
    handleCheck(data,change){
      let nodes = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes())
      let filterNodes = nodes.filter(node=>{ // 过滤出子节点，也就是不含childred字段的节点数据
        return node.children === undefined
      })
      this.tableData=filterNodes;//赋值给表格数据
    },
    //删除按钮
    // deleteRow(index,rows,id){
    //   this.$refs.tree.setChecked(id,false);//取消左侧复选框的选中状态
    //   rows.splice(index,1)//从tableData中删除数据
    // },
    //复选框默认选中状态,应在请求数据处调用
    //现在用的是本地数据，如果导入的是请求后的来的数据，并且有返回是否选中的字段，可以将已选中的那些数据的id遍历出来一个数组，类似于[1,2,3],然后放到下方；
    // selection(arrDa){
    //   this.$nextTick(() => {
    //     this.$refs.tree.setCheckedKeys([],true)//默认选中状态
    //   })
    // },
    //用户分页查询
    getList() {
      // this.loading = true;
      // roleList(this.listQuery).then((res) => {
      //   if (res.code == 200) {
      //     this.tableData = [];
      //     this.tableData = res.data.records;
      //
      //     this.loading = false;
      //     this.listQuery.current = res.data.current;
      //     this.listQuery.size = res.data.size;
      //     this.total = res.data.total;
      //   }
      // });
    },

    //页码

    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getList();
    },
    //查询
    searchBtn() {
      this.listQuery.current = 1;
      this.getList();
    },
    //重置
    searchrestBtn() {
      this.listQuery = Object.assign(
          {},
          {
            current: 1,
            size: 10,
          }
      );
      this.getList();
    },
  },
  data() {
    return {
      data: [{
        id:0,
        label: '中国',
        children: [{
          id:1,
          label: '北京',
          children: [{
            id:11,
            label: '通州'
          },{
            id: 17,
            label: '顺义'
          }]
        },
          {
            id:3,
            label: '山西',
            children:[{
              id: 13,
              label: '太原'
            },{
              id: 14,
              label: '阳泉'
            },{
              id:16,
              label: '长治'
            }]
          },{
            id:4,
            label: '黑龙江',
            children: [{
              id:12,
              label: '哈尔滨'
            },{
              id:13,
              label: '齐齐哈尔市'
            },{
              id: 14,
              label: '牡丹江'
            },{
              id: 15,
              label: '佳木斯'
            }]
          }],
      }],
      defaultProps: {
        children: "children",
        label: "label",
      },
      loading: false,
      listQuery: {
        current: 1,
        size: 10,
      },
      tableData: [],
    };
  },
  created() {
    this.getList();
  },
};
</script>

<style lang="less" scoped>
.el-container {
  display: flex;
  justify-content: space-between;

  align-items: flex-flex-start;
  .card1 {
    width: 20%;

    height: calc(100% - 7rem);
    position: fixed;
    right: 0;

    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 3.05rem;
      width: 100%;
      background: #67c23a;
      border-radius: 0.3rem;
      margin-bottom: 0.5rem;
      .el-button {
        height: 100%;
        width: 100%;
        font-size: 13px;
        display: flex;
        align-items: center;
        color: rgb(95, 95, 95);
        font-weight: 600;

        z-index: 11;
      }
    }
    .treeWrap {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-flex-start;
      z-index: 999;
      padding-left: 1rem;
      .el-button {
        z-index: 11;
        cursor: pointer;
        align-self: flex-end;
        margin-top: 1rem;
        border-radius: 0.8rem;
        height: 2rem;
        width: 8rem;
        font-size: 1.2rem;
        color: rgb(95, 95, 95);
        font-weight: 600;
        display: flex;
        align-items: center;

        z-index: 11;
      }
      .el-tree[data-v-79540bf8] /deep/ .el-tree-node__label {
        font-size: 0.34rem !important;
        font-weight: 600 !important;
        color: #7a7979 !important;
      }

      overflow: scroll;
      height: 90%;
      &::-webkit-scrollbar {
        display: none !important;
      }
      .el-tree /deep/ .el-tree-node__label {
        font-size: 1.34rem;
      }
    }
  }
  .card2 {
    width: 80%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    .serchWrap {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.5rem;
      width: 100%;
    }

    .s1 {
      height: 0;
      margin-top: 2.5rem;
      display: flex;
      align-items: center;
    }
  }
}
.table_switch {
  /deep/ .el-switch__label * {
    line-height: 1;
    font-size: 12px !important;
    display: inline-block;
  }
  /deep/ .el-switch__core {
    height: 18px;
    &::after {
      content: "";
      position: absolute;
      top: 1.15px;
      left: 1px;
      border-radius: 100%;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      width: 13px;
      height: 13px;
    }
  }
  &.is-checked /deep/ .el-switch__core::after {
    left: 100%;
    margin-left: -15px !important;
  }
}
.nameNow {
  color: rgb(114, 46, 46);
  font-size: 1.2rem;
  font-weight: 600;
}
</style>