在后台管理系统，前台列表展示，时不时会碰到需要进行全选，反选操作，然后进行批量操作逻辑，最常见的要属后台的列表，以及前台需要做购物车的时候批量结算，或者阅读图书批量删除书签，笔记等等操作。本质上，都是表格结合checkbook进行的批量操作，学会一种，业务中基本上所有的这种批量选中操作思路基本都一样。
使用场景示例
App.vue
<template>
<div id="app">
<edit-table
:tableDta="tableDta"
:headData="headData"
:allSelectTip="allSelectTip"
:selectChange="handleSelectChange"
:showEdit="showEdit"
></edit-table>
</div>
</div>
</template>
<script>
import EditTable from "./components/EditTable/EditTable.vue";
export default {
name: "App",
components: {
EditTable,
data() {
return {
tableDta: [
id: 1,
chinase: 123,
math: 111,
english: 98,
chemistry: 56,
id: 2,
chinase: 100,
math: 99,
english: 123,
chemistry: 88,
id: 3,
chinase: 134,
math: 34,
english: 98,
chemistry: 76,
id: 4,
chinase: 56,
math: 22,
english: 123,
chemistry: 111,
allSelectTip: {
confirm: "全部选中",
cancel: "取消全选",
headData: [
id: 1,
title: "语文",
id: 2,
title: "数学",
id: 3,
title: "英语",
id: 4,
title: "化学",
id: 5,
title: "操作",
showEdit: true,
methods: {
handleSelectChange(list) {
console.log(list);
</script>
.components/EditTable/EditTable.vue
<template>
<div class="edit-table">
<table>
<thead>
<th v-if="showEdit">
<check-box
:text="checkBoxText"
@change="handleAllChange"
:checked="checkData.length == originData.length"
></check-box>
<th v-for="item in headData" :key="item.id">{{ item.title }}</th>
</thead>
<tbody>
<tr v-for="item in originData" :key="item.id">
<td v-show="showEdit">
<check-box
:checked="checkData.some((data) => data.id == item.id)"
@change="(checked) => handleItemChange(checked, item)"
></check-box>
<td v-for="subject in fieldList" :key="subject">
{{ item[subject] }}
<td><button @click="handleDel(item)">删除</button></td>
</tbody>
</table>
<div class="operate-group">
<button @click="handleBatchOperate('all')">全选</button>
<button @click="handleBatchOperate('cancel')">取消</button>
<button @click="handleBatchOperate('del')">删除</button>
</div>
</div>
</template>
<script>
import CheckBox from "./CheckBox";
export default {
components: {
CheckBox,
props: {
tableDta: {
type: Array,
default() {
return [];
headData: {
type: Array,
default() {
return [];
allSelectTip: {
type: Object,
default() {
return {};
selectChange: {
type: Function,
default() {
return () => {};
showEdit: {
type: Boolean,
default: false,
data() {
return {
checkData: [],
originData: this.tableDta,
computed: {
checkBoxText() {
return this.checkData.length == this.originData.length
? this.allSelectTip.confirm
: this.allSelectTip.cancel;
* @Description 表格需要渲染的字段
* {
id: 1,
chinase: 123,
math: 111,
english: 98,
chemistry: 56,
我们需要排除id字段,id字段仅仅做key标识,不需要渲染到列表当中
fieldList() {
return this.tableDta.length
? Object.keys(this.tableDta[0]).filter((item) => item != "id")
: [];
methods: {
handleItemChange(checked, data) {
if (checked) {
this.checkData = [...this.checkData, data];
} else {
this.checkData = this.checkData.filter((item) => item.id != data.id);
this.selectChange(this.checkData);
handleAllChange(checked) {
checked ? (this.checkData = [...this.originData]) : (this.checkData = []);
this.selectChange(this.checkData);
handleDel(data) {
this.originData = this.originData.filter((item) => data.id != item.id);
this.checkData = this.checkData.filter((item) => data.id != item.id);
batchDel() {
this.checkData.forEach((item) => {
this.handleDel(item);
handleBatchOperate(type) {
switch (type) {
case "all":
this.handleAllChange(true);
break;
case "cancel":
this.handleAllChange(false);
break;
case "del":
this.batchDel();
break;
</script>
<style lang="less">
.edit-table {
table {
width: 500px;
border-collapse: collapse;
text-align: center;
table,
border: 1px solid #ccc;
.operate-group {
</style>
.components/EditTable/CheckBox.vue
<template>
<input
type="checkbox"
:checked="checked"
@change="$emit('change', $event.target.checked)"
{{ text }}
</div>
</template>
<script>
export default {
props: {
checked: Boolean,
text: {
type: String,
default: "",
</script>
<style lang="less"></style>
掌握上面表格的基本思路之后，如果你项目里面有类似的全选，反选，操作，都可以套用这种写法，思路基本上都是类似的，剩下的可以自己扩展。
- 4303
-
程序员老鱼
掘金·日新计划
ChatGPT
OpenAI
