1.設(shè)置el-table表頭全選框隱藏或禁用：參考鏈接https://blog.csdn.net/weixin_63896561/article/details/128922622

2.el-table表格勾選判斷當(dāng)前操作是勾選還是取消勾選（只支持用戶手動點擊表格前面勾選框的勾選）參考鏈接
https://blog.csdn.net/Amnesiac666/article/details/111602066

<template>
  <el-dialog :title="title" width="850px" :visible="show" @close="onClose" :close-on-click-modal="false">
    <div class="containner" style="height:600px">
      <el-form :model="form" ref="form" label-width="80px" :inline="true" size="small">
        <el-form-item label="姓名:">
          <el-input v-model="form.name" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="賬號:">
          <el-input v-model="form.account" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="部門:">
          <treeselect style="width:200px" :default-expand-level="3" v-model="form.orgId" noResultsText="暫無結(jié)果" :searchable="true" :options="orgList" :normalizer="normalizer" :show-count="true" placeholder="請選擇部門" />
        </el-form-item>
        <el-form-item label="電話號碼:">
          <el-input style="width:200px" v-model="form.mobile"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getList" type="primary" icon="el-icon-search">查詢</el-button>
          <el-button @click="cacelList" icon="el-icon-delete">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table @select='onTableSelect' border :row-key="getRowKeys" highlight-current-row :height="430" class="tableAll" ref="multipleTable" :header-cell-style="{ background: '#F4F4F4' }" :data="tableData" style="width: 100%;margin-bottom: 20px;">
        <el-table-column align="center" type="selection" :reserve-selection="true" width="80" />
        <el-table-column prop="name" label="用戶名"></el-table-column>
        <el-table-column prop="account" label="賬號"></el-table-column>
        <el-table-column prop="mobile" label="賬號"></el-table-column>
      </el-table>
      <pagination :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="pagination" />
    </div>
  </el-dialog>
</template>
    
<script>
import Pagination from "@/components/Pagination";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { changeTree } from "@/utils/index";
import {
  allUserListApi,
  systemOrgFindList,
  addBindingUser,
  deleteBindingUser,
} from "@/api/system/sys";
export default {
  props: ["title", "id"],
  data() {
    return {
      show: true,
      pageNum: 1,
      pageSize: 10,
      total: 0, // 總頁數(shù)
      orgList: [], //部門數(shù)組
      tableData: [],
      form: {
        name: "", //用戶名
        account: "", //賬號
        orgId: null, //部門
        mobile: "", //電話
      },
    };
  },
  components: {
    Treeselect,
    Pagination,
  },
  created() {
    this.getOrg();
    this.getList();
  },
  methods: {
    getRowKeys(row) {
      if (row.isCheck == "1") {
        //判斷條件，根據(jù)自己的項目進行添加
        return row.id;
      }
    },
    /** 轉(zhuǎn)換菜單數(shù)據(jù)結(jié)構(gòu) */
    normalizer(node) {
      return {
        id: node.id,
        label: node.orgName,
        children: node.children,
      };
    },
    getList() {
      let params = Object.assign(
        {},
        { roleId: this.id },
        this.form,
        { pageNum: this.pageNum },
        { pageSize: this.pageSize }
      );
      allUserListApi(params).then((res) => {
        console.log("輸出參數(shù)", res);
        if (res.data) {
          if (this.pageNum > 1 && res.data.list.length === 0) {
            this.pageNum = 1
            this.getList()
          }
          this.tableData = res.data.list;
          this.total = res.data.total;
          this.tableData = JSON.parse(JSON.stringify(res.data.list));
          this.$nextTick(()=>{
            this.tableData.forEach((item) => {
              console.log("輸出什么", item.isCheck);
              if (item.isCheck == "1") {
                //判斷條件，根據(jù)自己的項目進行添加
                this.$refs.multipleTable.toggleRowSelection(item, true);
              } else if (item.isCheck == "0") {
                this.$refs.multipleTable.toggleRowSelection(item, false);
              }
            });
          })
        }
      });
    },
    // 獲取部門
    getOrg() {
      systemOrgFindList({}).then((res) => {
        if (res && res.data) {
          this.orgList = changeTree(res.data, "order");
        }
      });
    },
    // 重置
    cacelList() {
      this.pageNum = 1
      this.form.name = "";
      this.form.account = "";
      this.form.orgId = null;
      this.form.mobile = "";
      this.getList();
    },

    onTableSelect(rows, row) {
      console.log("觸發(fā)表格", rows, row);
      let selected = rows.length && rows.indexOf(row) !== -1;
      console.log(selected); // true就是選中，0或者false是取消選中
      if (selected) {
        addBindingUser({
          roleId: this.id,
          userId: row.id,
        }).then((res) => {});
      } else {
        deleteBindingUser({
          roleId: this.id,
          userId: row.id,
        }).then((res) => {});
      }
    },
    // 分頁查詢
    pagination(val) {
      this.pageNum = val.page;
      this.pageSize = val.limit;
      this.getList();
    },
    //關(guān)閉事件
    onClose() {
      this.$emit("onClose");
    },
  },
};
</script>
    
<style lang="scss" scoped>

::v-deep .el-table__header-wrapper .el-checkbox {
  // display: none;//設(shè)置不成功，頁面卡頓
  visibility: hidden;
}
.el-dialog__wrapper {
  ::v-deep .el-dialog {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;

    .el-dialog__header {
      border-top-left-radius: 2px;
      border-top-right-radius: 2px;
      background-color: #1890ff;

      .el-dialog__title {
        color: #fff;
        font-size: 16px;
        font-weight: 600;
      }

      .el-dialog__close {
        color: #fff;
      }
    }

    .el-dialog__body {
      padding: 10px;
    }

    .el-dialog__footer {
      // border-top: 1px solid #e8eaec !important;
      padding: 10px;
      padding-top: 30px;
    }
  }
}
</style>