Element表格多选框

变量解释：

selectResult: [] // 选中的表格的id数据
tableData: [] // 表格数据
backAllData: [] // 从后端接口获取的所有的id
allCheck: [] // 全选状态
selectResultRow: [] // 选中的表格的全部数据

1.为了使得切换页面时，选中的数据仍然保留，所以使用localStorage进行存储，这里只存选中的数据的id（唯一值）。

2.多选框选中或者取消

handleSelectionChange(val) { // 多选框选中取消操作this.tableData.map(item => { // 当选中全选的复选框时（当前页的表格已经被选中了），判断是否有取消的行if (this.selectResult.includes(item.secId)) {const index = this.selectResult.indexOf(item.secId)this.selectResult.splice(index, 1)}})val.map(item => { // 选中的行加进去if (!this.selectResult.includes(item.secId)) {this.selectResult.push(item.secId)}})this.$nextTick(() => {storage.set('selectId', JSON.stringify(this.selectResult))})
}

3.如果表格上方有一个全选按钮，用于选中该页的所有行

checkAll(val) { // 点击全选按钮，全选当页所有的数据，val为true表示选中if(val) {this.toggleSelection() // 先清除所有选中的数据this.selectResult = this.backAllData // 获取所有的idthis.$nextTick(() => {this.toggleSelection(this.tableData) // 将当前页的数据进行选中})} else {this.selectResult = []this.toggleSelection()}
},
toggleSelection(rows) {if(rows) {rows.forEach(row => {this.$refs.multipleTable.toggleRowSelection(row)})} else {this.$refs.multipleTable.clearSelection()}
}

4.请求数据后对页面的数据进行回显

this.selectResultRow = []
request.search(data).then((res) => { // 从后端获取数据if (res.data.respCode === 200) {this.tableData = []this.total = res.data.result.totalCount  // 获取表格中所有的数据res.data.result.data.map(item => {const tableDataList = {...}this.tableData.push(tableDataList)})this.tableData.map(item => {if (this.allCheck) { // 全选按钮如果选中，则将数据放在备选数组中，进行页面选中或者取消的计算this.selectResultRow.push(item)} else { // 如果没选中，则进行判断if (this.selectResult.includes(item.secId)) {this.selectResultRow.push(item)}}this.selectResult = Array.from(new Set(this.selectResult))})if (this.selectResult.length !== this.backAllData.length) {this.allCheck = false} else {this.allCheck = true}this.$nextTick(() => { // 页面回显this.toggleSelection(this.selectResultRow)})}
})

Element表格多选框相关推荐

javascript 计算器、动态时钟、表格复选框全选（扩展）、轮播图、36选7、随机数...
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
easyui前端实现多选框_前端：Element UI 多选框组用法笔记
今天给大家分享一下Element UI 多选框组用法笔记,直接上代码! "兴趣爱好:"> "form.checkList"> for= {{item ...
前端：Element UI 多选框组用法笔记
今天给大家分享一下Element UI 多选框组用法笔记,直接上代码! <html><head></head><body><el-form> ...
LayUI数据表格复选框显示不居中问题
LayUI数据表格复选框显示不居中问题样式(layui.css)文件中增加: .layui-table-cell .layui-form-checkbox[lay-skin="primar ...
element表格勾选获取序号
element表格勾选获取序号如图,这里有一个需求是勾选某一项为其进行排序,首先需要将原来的序号回显,所以在element的勾选表格的操作中需要获得index值? 查了一下没有在官方文档找到类似于$ ...
layui表格复选框赋值，获取表格复选框选中值，表格复选框回选
layui获取表格复选框提交/回选表格JS table.render({elem: '#app-from',id: 'app-from',url: '/plm/api/employee/listBy ...
Easyui 表格中复选框设置单选
Easyui 表格中复选框设置单选单设置singleSelect:true 是不行的,一定还要在data-options中设置 data-options="singleSelect:tru ...
html表格中复选框代码怎么写,获取html表中的选中复选框
我已经制作了如下表格. 在脚本标签中: $(document).ready(function() { $("#addSelected").live("click" ...
layui 实现表单、表格中复选框checkbox的全选功能
一.layui 实现表单中多选框的全选功能,代码如下: //html页面表单 <form class="layui-form"><div class=" ...

Element表格多选框

变量解释：

1.为了使得切换页面时，选中的数据仍然保留，所以使用localStorage进行存储，这里只存选中的数据的id（唯一值）。

2.多选框选中或者取消

3.如果表格上方有一个全选按钮，用于选中该页的所有行

4.请求数据后对页面的数据进行回显

Element表格多选框相关推荐

最新文章

热门文章