场景
在表格中点击多选框根据每个数据的ID能够查询到相关的信息
(1)不支持全选;做法隐藏了全选按钮
css
::v-deep .el-table__header-wrapper .el-checkbox {
// display: none;//设置不成功,页面卡顿
visibility: hidden;
}
(2)不支持跨页
(3)点击就进行查询
(4)行内数据某种状态的不支持选择
|------------|---------------------------------------------------------------------------|----------------------|-----|-----|
| selectable | 仅对 type=selection 的列有效,类型为 Function,Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | Function(row, index) | --- | --- |
代码
多选框的选择状态
html
<el-table-column type="selection" :selectable="selectable" width="55" />
/**
* @func 多选框不能选中已结算
*
*/
selectable(row, index) {
if (row.status == 1) {
return false;
} else {
return true;
}
},
搜索
点击多选框的事件
事件名 | 说明 | 参数 |
---|---|---|
select | 当用户手动勾选数据行的 Checkbox 时触发的事件 | selection, row |
select-all | 当用户手动勾选全选 Checkbox 时触发的事件 | selection |
selection-change | 当选择项发生变化时会触发该事件 | selection |
html
<el-table :data="tableData" style="width: 100%" @select="selectOrderList">
这里使用的是select 不使用selection-change。因为点击事件一个获得的是点击行的row。另一个是取消选择返回一个[ ].
需求是将点击的id存入一个list。需要去重之类的操作。我直接使用的是点击获取id,在数组中如果没有进行push,如果有就删除。
javascript
/**
* @func 获取列表
* @param {*} val
*/
selectOrderList(selection, row) {
const index = this.OrderListId.indexOf(row.id);
if (index === -1) {
// 如果id不在数组中,将id插入到数组末尾
this.OrderListId.push(row.id);
} else {
// 如果id在数组中,从数组中删除该id
this.OrderListId.splice(index, 1);
}
console.log(this.OrderListId);
//将list发送请求
this.getOrderMoneyMsg();
},
注意点
在重置搜索切换页面时候,加载时候都需要将list进行清空。避免数据缓存。