iview中tbale树形数据和多选结合

网上没找到现成的！只能自己写个了,直接上代码！

（可以直接复制到 https://run.iviewui.com/上运行）

html

  <Table row-key="id" :columns="columns" :data="tableData" border @on-select="onselect" @on-select-cancel="onselectCancel" @on-expand-tree="onexpandtree"></Table>

js

export default {
  data() {
    return {
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
        },
        {
          title: 'Name',
          key: 'name',
          tree: true,
        },
        {
          title: 'Age',
          key: 'age',
        },
        {
          title: 'Address',
          key: 'address',
        },
      ],
      tableData: [
        {
          id: '100',
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park',
        },
        {
          id: '101',
          name: 'Jim Green',
          age: 24,
          address: 'London No. 1 Lake Park',
          children: [
            {
              id: '10100',
              name: 'John Brown',
              age: 18,
              address: 'New York No. 1 Lake Park',
            },
            {
              id: '10101',
              name: 'Joe Blackn',
              age: 30,
              address: 'Sydney No. 1 Lake Park',
            },
            {
              id: '10102',
              name: 'Jon Snow',
              age: 26,
              address: 'Ottawa No. 2 Lake Park',
              children: [
                {
                  id: '1010200',
                  name: 'Jim Green',
                  age: 24,
                  address: 'New York No. 1 Lake Park',
                },
              ],
            },
          ],
        },
        {
          id: '102',
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park',
        },
        {
          id: '103',
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
        },
      ],
    }
  },
  methods: {
    // 选中某一行
    onselect(sel, row) {
      this.setSelectChange( row, true)
    },
    // 取消选中某一行
    onselectCancel(sel, row) {
      this.setSelectChange( row, false)
    },
    // 修改状态的变化
    setSelectChange( row, _checked) {
      let { mindex, mrow } = this.getSelectIndex(this.tableData, row, _checked)
      //改变数据源
      this.tableData.splice(mindex, 1, mrow)
    },
    // 递归设置选中状态的变化
    getSelectIndex(data, row, _checked) {
      let mindex = -1
      let mrow = row
      data.find((item, index) => {
        if (item.id == row.id) {
          mindex = index
          item._checked = _checked
          mrow =   this.setChildrenChecked(item, _checked)
          return true
        }
        if (item.children) {
        let  {mindex:childIndex,paterChecked:pater_checked}  = this.getSelectIndex(item.children, mrow, _checked)
          if (childIndex>-1) {
						item._checked = pater_checked!=undefined?pater_checked:	item._checked
            mrow = item
            mindex = index
            return true
          }
        }
        return false
      })
	  let paterChecked = mindex > -1? data.every((item) => item._checked):undefined
      return { mindex, mrow,paterChecked}
    },
    // 设置子节点的选中状态
    setChildrenChecked(data, _checked) {
      //判断是否有子节点
      if (data.children) {
        // 设置 data 属性 _showChildren，默认会展开子数据。
        data._showChildren = true
        data.children.forEach((item, index) => {
          item = this.setChildrenChecked(item,_checked)
          item._checked = _checked
        })
      }
      return data
    },
    // 展开或收起时触发
    onexpandtree(rowKey,status) {
	  const   setShowChildren = (data,rowKey,status) => {
         return data.find((item, index) => {
          if (item.id == rowKey) {
           // 设置 data 属性 _showChildren，默认会展开子数据。
          item._showChildren = status
            return true
          }
        if (item.children) {
          let  childIndex  = setShowChildren(item.children, rowKey,status)
          if (childIndex>-1) {
              return true
            }
          } 
          return false
        })
      }
      setShowChildren(this.tableData,rowKey,status)
	},
	   //获取选中的项
    getCheckedArr(){
      const getChecked = (data)=>{
         let checkedArr = []
         data.forEach(item=>{
           if(item.children)
             return checkedArr.push(...getChecked(item.children))  
               if(item._checked)
          checkedArr.push(item) 
          })
        return checkedArr
      }
      return  getChecked(this.tableData)
    },
  },
}