elementui表格全选取消和下面联动组件在vue中使用(无反选)

html代码

上面全选，小框和下面跟着选中
小框全选，上面和下面全选跟着选中
下面全选选中，上面的和小框一样选中
完整效果图如下

这里我省略了中间部分，效果图如下

//上面部分
 <el-table
      ref="multipleTable"
      :data="list"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      >
      <!--写html元素需要用插槽,通过scope.row获取数据-->
     	<template slot-scope="scope">
          ￥ {{ scope.row.priceStr | ax }}
        </template>
      //中间部分略。。。。。。
      </el-table-column>
</el-table>


//下面部分
    <div class="zf">
      <el-checkbox
        v-model="checked"
        @change="smallcheckboc"
        >全选</el-checkbox
      >
      <p>
        总价：<span>{{ total }}</span>
      </p>
      <el-button type="danger">结算</el-button>
    </div>
    {{ flag }}
  </div>

js代码

data(){
 return{
 	  list:[], //存放所有数据的数组
	  tablist: [], //选中的数据存放
      checked: false, //绑定下面复选框的状态
	}
}
methods:{
	//以下所有注释为个人理解，如果有误请勿怪
	//多选后数据变化，(全选按钮的变化，里面的val代表被选中的数据)
    handleSelectionChange(val) {
      //将勾选的数据存储起来，与原数据对比
      this.tablist = val;
      //长度相等，即全部勾选
      if (this.tablist.length == this.list.length) {
        //让下面的全选按钮跟着改变
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    //全选/取消全选方法
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //下面复选框的改变事件
    smallcheckboc() {
      console.log("this.checked", this.checked);
      if (this.checked) {
        //取消全选
        //先判断已勾选数据的长度（将已勾选保持勾选状态，否则将会取反一次）
        if (this.tablist.length) {
          this.toggleSelection(this.tablist);
        }
        this.toggleSelection(this.list);
      } else {
        //小框勾选状态为非true时，让它反转勾选
        this.toggleSelection();
      }
    },
}