需求实现如下

重点使用到 @select 以及 @select-all 两个方法

返回数据格式

代码实现

 <el-table ref="tableRef" :cell-style="{ color: '#FFF', background: '#333' }":header-cell-style="{ color: '#FFF', background: '#333' }" row-key="id" :data="tableData" style="width: 100%":default-sort="{ prop: 'barcode.putInDate', order: 'descending' }"@select="select" @select-all="selectAll"@sort-change="sortChange" :tree-props="{children: 'children',hasChildren: 'hasChildren',}"><template slot="empty"><span style="color: #969799">{{ $t("NeoLight.empty") }}</span></template><el-table-column type="selection" width="50" /><el-table-column prop="barcode" :sortable="true" :label="$t('NeoLight.barcodeNo')" width="180" /><el-table-column prop="partNumber" :sortable="true" :label="$t('NeoLight.stockNo')" width="150" /><el-table-column prop="produceDate" :sortable="true" :label="$t('NeoLight.produceDate')" /><el-table-column prop="expireDate" :sortable="true" :label="$t('NeoLight.expireDate')" /><el-table-column prop="batch" :sortable="true" :label="$t('barcode.batch')" /><!-- 供应商 --><el-table-column prop="provider" :sortable="true" :label="$t('storagePos.providerNumber')" /><el-table-column prop="posName" :sortable="true" :label="$t('NeoLight.storageNo')" />
</el-table>

js方法

 methods: {//从查询接口中获取到表格数据并组装数据getList() {getStoFind(this.crud.query).then((res) => {if (res.totalElements) {this.tableData = [];this.ids = []this.totalPageNum = res.totalElementsres.content.forEach((item) => {if (item.barcode && item.barcode.children && item.barcode.children.length > 0) {item.barcode.children.map(ch => {ch.posId = item.idch.parentId = item.barcode.id})}item.barcode.posId = item.id;this.tableData.push(item.barcode);});}})},select(selection, row) {let vm = this// 操作行 row 在 已选范围 selection 内，认为是选中，否则是取消选中 if (selection.some((el) => row.id=== el.id)) {// 设置当前行选中状态row.isChecked = true// 记录选中id this.addId(row)// 若存在子级，自己全选if (row.children) {row.children.map(c => {this.$refs.tableRef.toggleRowSelection(c, true)c.isChecked = truethis.addId(c)})}// 若存在父级，设置父级选中if (row.parentId) {let pNode = vm.tableData.find(x => x.id === row.parentId)this.$refs.tableRef.toggleRowSelection(pNode, true)pNode.isChecked = truethis.addId(pNode)}} else {row.isChecked = falsethis.deleteId(row)// 若存在子级，子级全部取消选中if (row.children) {row.children.map((i) => {this.$refs.tableRef.toggleRowSelection(i, false)i.isChecked = falsethis.deleteId(i)})}// 若存在父级，判断父级的子级(当前行的兄弟) ，若全部未选中，取消父级选中if (row.parentId) {let pNode = vm.tableData.find(x => x.id === row.parentId)if (!pNode.children.some(el => el.isChecked == true)) {this.$refs.tableRef.toggleRowSelection(pNode, false)pNode.isChecked = falsethis.deleteId(pNode)}}}},selectAll(selection) {// 判断当前是否有已选中的let rA = this.tableData.some(el => {let r = falseif (el.children) {r = el.children.some(e => e.isChecked)}if (r) return rreturn el.isChecked})// 若有选中则全部取消，否则全部选中if (rA) {this.tableData.forEach(el => {el.isChecked = falsethis.$refs.tableRef.toggleRowSelection(el, false)this.deleteId(el)if (el.children) {el.children.forEach(e => {e.isChecked = falsethis.$refs.tableRef.toggleRowSelection(e, false)this.deleteId(e)})}})} else {this.tableData.forEach(el => {el.isChecked = truethis.$refs.tableRef.toggleRowSelection(el, true)this.addId(el)if (el.children) {el.children.forEach(e => {e.isChecked = truethis.$refs.tableRef.toggleRowSelection(e, true)this.addId(e)})}})}},// 增加选中addId(o) {let id = o.posIdif (this.ids.indexOf(id) < 0) {this.ids.push(id)}},// 删除选中deleteId(o) {let id = o.posIdthis.ids = this.ids.filter(item => item !== id);},
}