tableTree

<template>

  <div>

    <el-table

      ref="tableRef"

      :data="dataList"

      highlight-current-row

      style="width: 100%;"

      size="small"

      row-key="id"

      :tree-props="{children: 'children', hasChildren: 'children.length>0'}"

      @select="rowSelect"

      @select-all="selectAll"

    >

      >

      <el-table-column type="selection" width="50" />

      <el-table-column prop="menuName" label="菜单名称" sortable />

      <el-table-column prop="menuDes" label="菜单描述" sortable />

      <!-- <el-table-column prop="menuIcon" label="导航图标" sortable>

        <template slot-scope="scope">

          <i :class="scope.row.menuIcon" />

        </template>

      </el-table-column>

      <el-table-column prop="menuPath" label="导航路径" sortable />

      <el-table-column prop="menuComponent" label="Vue文件路径" sortable />

      <el-table-column prop="menuLeaf" label="是否单节点" sortable>

        <template slot-scope="scope">{{ scope.row.menuLeaf === 1?'是':'否' }}</template>

      </el-table-column>

      <el-table-column prop="menuHidden" label="是否隐藏" sortable>

        <template slot-scope="scope">{{ scope.row.menuHidden === 1?'是':'否' }}</template>

      </el-table-column> -->

      <!-- <el-table-column label="状态">

        <template slot-scope="scope">

          <el-tag v-show="scope.row.menuStatus == 1" type="success" effect="dark" size="medium">正常</el-tag>

          <el-tag v-show="scope.row.menuStatus == 2" type="danger" effect="dark" size="medium">禁用</el-tag>

        </template>

      </el-table-column>

      <el-table-column label="操作">

        <template slot-scope="scope">

          <el-button

            v-if="scope.row.menuStatus == 1"

            type="danger"

            size="small"

            @click="changeMenuStatus(scope.row)"

          >禁用</el-button>

          <el-button

            v-if="scope.row.menuStatus == 2"

            type="success"

            size="small"

            @click="changeMenuStatus(scope.row)"

          >启用</el-button>

          <el-button type="primary" size="small" @click="toUpdate(scope.row)">修改</el-button>

        </template>

      </el-table-column> -->

    </el-table>

  </div>

</template>

<style>

.demo-table-expand {

  font-size: 0;

}

.demo-table-expand label {

  width: 90px;

  color: #99a9bf;

}

.demo-table-expand .el-form-item {

  margin-right: 0;

  margin-bottom: 0;

  width: 50%;

}

</style>

<script>

export default {

  data() {

    return {

      dataList: [{

        id: 1,

        menuLevel: 0,

        menuName: '王小虎',

        menuDes: '上海市普陀区金沙江路 1518 弄'

      }, {

        id: 2,

        menuLevel: 0,

        menuName: '王小虎',

        menuDes: '上海市普陀区金沙江路 1517 弄'

      }, {

        id: 3,

        menuLevel: 1,

        menuName: '王小虎',

        menuDes: '上海市普陀区金沙江路 1519 弄',

        children: [{

          id: 31,

          menuPid: 3,

          menuLevel: 2,

          menuName: '王小虎',

          menuDes: '上海市普陀区金沙江路 1519 弄'

        }, {

          id: 32,

          menuPid: 3,

          menuLevel: 2,

          menuName: '王小虎',

          menuDes: '上海市普陀区金沙江路 1519 弄'

        }]

      }, {

        id: 4,

        menuLevel: 0,

        menuName: '王小虎',

        menuDes: '上海市普陀区金沙江路 1516 弄'

      }]

    }

  },

  methods: {

    toggleSelection(rows, flag) {

      if (rows) {

        rows.forEach(row => {

          this.$refs.tableRef.toggleRowSelection(row, flag)

        })

      } else {

        this.$refs.tableRef.clearSelection()

      }

    },

    rowSelect(selection, row) {

      console.log(selection)

      if (selection.indexOf(row) > -1 && row.menuLevel === 1) {

        this.toggleSelection(row.children, true)

      }

      if (selection.indexOf(row) === -1 && row.menuLevel === 1) {

        this.toggleSelection(row.children, false)

      }

      if (selection.indexOf(row) > -1 && row.menuLevel === 2) {

        const s = this.dataList.filter(item => {

          if (item.id === row.menuPid) {

            return item

          }

        })

        this.toggleSelection(s, true)

      }

    },

    selectAll(selection) {

      console.log(selection)

      var flag = false // 默认 为全不选

      selection.forEach(item => {

        if (item.menuLevel === 1) {

          flag = true

          this.toggleSelection(item.children, true)

        }

      })

      if (!flag) {

        this.toggleSelection()

      }

    }

  }

}

</script>