element表格树点击父节点子节点选中 根据数据默认选中

 这里写的是表格树一开始就返回全部的数据

<template>
  <div>
    <el-table @header-click="headerClick" @select-all="selectAll" lazy @row-click="rowClick" @select="handleSelectionChange" ref="treeTable" :data="tableData" style="width: 100%" row-key="id"  border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="date" label="别名/皮肤"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data(){
    return{
      tableData:[],
      rows:{}
    }
  },
  created(){
    this.getTableList()
  },
  methods:{
    //获取数据
    getTableList(){
      let data=[
        {id: 1,date: '打工仔',name: '中路',state:0,
          children: [
            {id: 11,date: '仲夏夜之梦',name: '貂蝉',state:0,},
            {id: 12,date: '凤凰于飞',name: '王昭君',state:0,},
            {id: 13,date: '女仆咖啡',name: '妲己',state:0,},
            {id: 14,date: '缤纷独角兽',name: '小乔',state:0,},
            {id: 15,date: '幻海之心',name: '武则天',state:0,},
            {id: 16,date: '魅语',name: '不知火舞',}
          ]
        },
        {id: 2,date: '孤儿',name: '对抗路',
          children:[
            {id: 21,date: '秩序猎龙将',name: '蒙恬',},
            {id: 22,date: '胖达荣荣',name: '梦琪',},
            {id: 23,date: '年年有余',name: '猪八戒',},
            {id: 24,date: '一念神魔',name: '李信',},
            {id: 25,date: '猫狗日记',name: '孙策',},
            {id: 26,date: '特工战影',name: '狂铁',}
          ]
        },
        {id: 3,date: '弟弟',name: '发育路',
          children: [
            {id: 31,date: '太华',name: '伽罗'},
            {id: 32,date: '特工魅影',name: '百里守约'},
            {id: 33,date: '黄金射手座',name: '后羿'},
            {id: 34,date: '裂魂',name: '黄忠'},
            {id: 35,date: '逐梦之星',name: '马克波罗'},
            {id: 36,date: '云霓雀翎',name: '虞姬'},
          ]
        },
        {id: 4,date: '蹭线王',name: '打野',
          children:[
            {id: 41,date: '汉昭烈帝',name: '刘备'},
            {id: 42,date: '云鹰飞将',name: '曜'},
            {id: 43,date: '纤云弄巧',name: '云中君'},
            {id: 44,date: '白虎志',name: '百里玄策'},
            {id: 45,date: '全息碎影',name: '孙悟空'},
            {id: 46,date: '晚萤',name: '娜可露露'},
          ]
        },
        {id: 5,date: '背锅侠',name: '辅助',
          children:[
            {id: 51,date: '逐梦之光',name: '东皇太一'},
            {id: 52,date: '遇见神鹿',name: '瑶'},
            {id: 53,date: '阿摩斯公爵',name: '鬼谷子'},
            {id: 54,date: '御銮',name: '盾山'},
            {id: 55,date: '虹云星官',name: '明世隐'},
            {id: 56,date: '天使之翼',name: '孙膑'},
          ]},
      ]
      this.tableData=data
      this.defaultSelect(data)
    },
    getNum(data){
      let num=0
      data.forEach(item=>{
        if(item.hasChildren==true){
          num+=1
        }
      })
      return num
    },
    //点击全选复选框
    selectAll(){
      let data=this.$refs.treeTable.data
      let num=this.getNum(data)
      data.forEach(item=>{
        if(num>=0 && num<data.length){
          item.hasChildren=false
        }else{
          item.hasChildren=true
        }
        this.rowClick(item)
      })
    },
    //点击表格头部
    headerClick(){
      let data=this.$refs.treeTable.data
      let num=this.getNum(data)
      data.forEach(item=>{
        if(num>=0 && num<data.length){
          item.hasChildren=false
        }else{
          item.hasChildren=true
        }
        this.rowClick(item)
      })
    },
    //点击列表
    rowClick(row){
      this.rows = this.$refs.treeTable.selection;
      let checkrow = [];
      checkrow.push(row);
      if (row.hasChildren == true) {
        this.clearRow(checkrow);
      } else {
        this.checkRow(checkrow);
      }
    },
    //点击复选框事件
    handleSelectionChange (select, row) {
      this.rows = this.$refs.treeTable.selection;
      let checkrow = [];
      checkrow.push(row);
      if (row.hasChildren == true) {
        if (select == 1) {
          this.$refs.treeTable.toggleRowSelection(row,false);
        }
        this.clearRow(checkrow);
      } else {
        if (select == 1) {
          this.$refs.treeTable.toggleRowSelection(row, true);
        }
        this.checkRow(checkrow);
      }
    },
    //取消选中递归
    clearRow (data) {
      Array.from(data).forEach(row => {
        row.hasChildren = false;
        this.$refs.treeTable.toggleRowSelection(row, false);
       if (row.children) this.clearRow(row.children);
      })
    },
    //选中递归
    checkRow (data) {
      Array.from(data).forEach(row => {
        row.hasChildren = true;//选中是字段值为true
        this.$refs.treeTable.toggleRowSelection(row, true);
        if (row.children) this.checkRow(row.children);
      })
    },
    //默认选中
    defaultSelect(data){
      if(data.length>0){
        this.$nextTick(()=>{
          data.forEach(item=>{
            if(item.state==0){
              this.$refs.treeTable.toggleRowSelection(item, true);
              if (item.children) this.defaultSelect(item.children);
            }
          })
        })
      }
    }
  }
}
</script>