自定义全选框,当勾选√添加到selection中,再次勾选从selection中移除

 <el-table
            :data="tableData"
            ref="tableData"
            height="450px"
            class="customer-no-border-table"
            :row-class-name="tableRowClassName"
            :header-cell-style="{ background: '#E7F2FD', color: '#252525' }"
            style="width: 100%; border-top: 1px solid #409eff"
            border
          >
            <el-table-column
              width="55"
              align="center"
              :render-header="renderHeader"
              ><template v-slot="{ row }">
                <el-checkbox
                  v-model="row.checked"
                  @change="handleCheckboxChange(row, $event)"
                >
                </el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
              type="index"
              label="序号"
              width="50"
              align="center"
            ></el-table-column>
            <div slot="empty">
              <img
                src="@/assets/nodata.png"
                style="width: 270px; height: 190px; margin-top: 80px"
                alt="暂无数据"
              />
              <div
                style="
                  font-size: 16px;
                  color: #666666;
                  margin-bottom: 80px;
                  width: 270px;
                "
              >
                暂无数据
              </div>
            </div>
            <el-table-column
              v-for="(item, index) in columns"
              :width="item.width"
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :formatter="item.formatter"
              :show-overflow-tooltip="true"
              align="center"
            ></el-table-column>
          </el-table>
allSelected: false, // 是否全选
indeterminate: false, // 是否为半选状态
  watch: {
    selectStation: function (newVal, oldVal) {
      if (
        newVal.length === this.tableData.length &&
        this.tableData.length > 0
      ) {
        this.allSelected = true;
        this.indeterminate = false;
      } else if (newVal.length === 0) {
        this.allSelected = false;
        this.indeterminate = false;
      } else {
        this.allSelected = false;
        this.indeterminate = true;
      }
    },
  },
  handleCheckboxChange(row, checked) {
      if (this.rightbox && this.name !== "停车场设置") {
       
      } else {
        this.updateSelectStation(row, checked);
      }
    },
    updateSelectStation(row, checked) {
      this.tableData.forEach((i) => {
        if (i.buildId == row.buildId) {
          row.checked = checked;
        }
      });
      if (checked) {
        const index = this.selectStation.indexOf(row);
        if (index == -1) {
          this.selectStation.push(row);
        }
      } else {
        const index = this.selectStation.indexOf(row);
        console.log("🚀 ~ updateSelectStation ~ index:", index);
        if (index !== -1) {
          this.selectStation.splice(index, 1);
        }
      }
    },
 // 全选
    renderHeader(h) {
      return h("span", [
        h("el-checkbox", {
          on: {
            change: this.selectBox,
          },
          props: {
            value: this.allSelected,
            indeterminate: this.indeterminate,
          },
        }),
      ]);
    },
   selectBox() {
      console.log("🚀 ~ .then ~ this.allSelected:", this.allSelected);
      if (this.rightbox && this.name !== "停车场设置") {
      } else {
        this.allFn();
      }
    },
    allFn() {
      this.selectStation = !this.allSelected ? [...this.tableData] : [];

      this.tableData.forEach((i) => {
        i.checked = !this.allSelected;
      });
    },


  this.tableData = res.data.rows.map((i) => {
              return {
                ...i,
                checked: false,
              };
            });
            this.selectStation = [];
posted @   崛起崛起  阅读(31)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示