自定义全选框,当勾选√添加到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 = [];
分类:
element-ui相关问题
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现