Vue+element-UI实现树形表格（全选、取消功能）

 效果图：

代码部分：

<template>

  <div>

    <el–table

      ref=”multipleTable”

      :data=”listTreeData“

      style=”width: 100%; margin-bottom: 20px“

      row–key=”id“

      border

      default–expand–all

      :tree–props=”{

        children: ‘children’

      }”

    &gt;

      <el–table–column width=”105″&gt;

        <template slot=”header” slot-scope=”scope“&gt;

          <span&gt;全选</span&gt;

          <el–checkbox

            v–model=”selecteds“

            style=”padding–left: 10px“

            @change=”checkAllIn(scope)”

          />

        </template>

        <template slot-scope=”scope”>

          <el–checkbox

            v–model=”scope.row.selected“

            style=”padding-left: 10px“

            @change=”checkChange(scope.row)”

          /> </template

      ></el-table–column>

      <el-table–column prop=”label” label=”名字” header–align=”center” align=”center” />

    </el-table>

  </div>

</template>

<script>

export default {

  data () {

    return {

      listTreeData: [

        {

          id: 1,

          label: ‘一级 1’,

          parentId: 0,

          selected: false,

          children: [

            {

              id: 4,

              label: ‘二级 1-1’,

              parentId: 1,

              selected: false,

              children: [

                {

                  id: 9,

                  parentId: 4,

                  selected: false,

                  label: ‘三级 1-1-1’

                },

                {

                  id: 10,

                  parentId: 4,

                  selected: false,

                  label: ‘三级 1-1-2’

                }

              ]

            },

            {

              id: 7,

              parentId: 1,

              selected: false,

              label: ‘二级 1-2’

            }

          ]

        },

        {

          id: 2,

          label: ‘一级 2’,

          parentId: 0,

          selected: false,

          children: [

            {

              id: 5,

              parentId: 2,

              selected: false,

              label: ‘二级 2-1’

            },

            {

              id: 6,

              parentId: 2,

              selected: false,

              label: ‘二级 2-2’

            }

          ]

        }

      ],

      selecteds: ”, // 全选按钮是否选中

      menuData: [], // 数据的二维数组形式

      curParentId: ”, // 当前选中节点的父id

      childrenArr: [] // 当前选中节点的孩子数组

    }

  },

  mounted () {

    this.treeToArr(this.listTreeData)

  },

  methods: {

    // 把树结构的数据变成二维数组

    treeToArr (data) {

      data.forEach((item) => {

        this.menuData.push(item)

        if (item.children &amp;&amp; item.children.length > 0) {

          this.treeToArr(item.children)

        }

      })

    },

    // 全选复选框

    checkAllIn () {

      this.$refs.multipleTable.data.forEach((items) => {

        this.$set(items, ‘selected’, this.selecteds)

        if (items.children &amp;&amp; items.children.length > 0) {

          this.deepCheck(items.children, this.selecteds)

        }

      })

    },

    // 递归查找符合条件的数据

    deepCheck (data, val) {

      data.forEach((item) => {

        this.$set(item, ‘selected’, val)

        if (item.children &amp;&amp; item.children.length > 0) {

          this.deepCheck(item.children, val)

        }

      })

    },

    // 处理树表中子带父的情况

    handlerSonToParent (row) {

      if (this.curParentId !== row.parentId) {

        this.childrenArr.length = 0

        this.menuData.forEach((item) => {

          if (item.parentId === row.parentId) {

            this.childrenArr.push(item)

          }

        })

      }

      this.curParentId = row.parentId

      const filter = this.childrenArr.filter((i) => i.selected)

      if (filter.length === this.childrenArr.length) {

        this.menuData.forEach((item) => {

          if (item.id === this.curParentId) {

            this.$set(item, ‘selected’, true)

          }

        })

      } else {

        this.menuData.forEach((item) => {

          if (item.id === this.curParentId) {

            this.$set(item, ‘selected’, false)

          }

        })

      }

    },

    // 复选框触发的事件

    checkChange (row) {

      // 父选子的情况

      if (row.children) {

        if (row.selected) {

          row.children.forEach((item) => {

            this.$set(item, ‘selected’, true)

            if (item.children &amp;&amp; item.children.length > 0) {

              this.deepCheck(item.children, true)

            }

          })

          this.$set(row, ‘selected’, true)

        } else {

          row.children.forEach((item) => {

            this.$set(item, ‘selected’, false)

            if (item.children &amp;&amp; item.children.length > 0) {

              this.deepCheck(item.children, false)

            }

          })

        }

      }

      // 子带父的情况

      if (row.selected) {

        this.handlerSonToParent(row)

      } else {

        this.handlerSonToParent(row)

      }

    }

  }

}

</script>

<style>

</style>

说明：代码中的数据以及字段可根据实际情况修改，此处仅作为例子参考。