element ui table复选框置灰禁止选择、回显、跨页选中
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
要 多选
<!-- 加一列,放首列位置 -->
<el-table-column
type="selection"
width="55"
/>
要 置灰禁止选择
在有type="selection"这列,追加属性 :selectable="checkSelectable"
// 判断表格的复选框是否置灰、禁止选择
checkSelectable(row, index) {
return row.dd === 2 // 你的判断条件,条件成立则复选框能选,否则置灰禁用
},
要 跨页保存选中
在有type="selection"这列,追加属性 :reserve-selection="true" ,并在 <el-table> 上 追加属性 :row-key="getRowKey"
// 拿唯一主键
getRowKey(item) {
return item.memberID
},
要 回显
// 接口回调里,拿到列表数据 theDataList ,再进行回显处理,this.$nextTick 是确保接口数据在页面渲染完毕之后再选中复选框
this.$nextTick(() => {
theDataList.map(theData => {
this.selectedMemberList.map(item => {
if (theData.orderNo === item.orderNo) {
this.$refs.multipleTable.toggleRowSelection(item, true)
}
})
})
})
完整代码:
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
:row-key="getRowKey"
@select="handleUserMemberChangeRow"
@select-all="handleUserMemberChange"
>
<el-table-column
type="selection"
:reserve-selection="true"
:selectable="checkSelectable"
width="55"
/>
<el-table-column
prop="companyName"
label="公司名称"
width="100"
/>
</table>
data(){
return {
selectedMemberList:[] // 放已勾选的 arr
}
}
// 判断表格的复选框是否置灰、禁止选择
checkSelectable(row, index) {
return row.dd === 2 // 判断成立则复选框能选,否则置灰禁用
},
// 拿唯一主键
getRowKey(item) {
return item.memberID
},
// 单个勾选
handleUserMemberChangeRow(selection, row) {
/* 因为设置了:reserve-selection="true" 跨分页,所以这个事件里返回的参数selection会有重复数据,看不出当前操作的是否选中,
* 故,直接判断这个data变量,每次操作的row,如果this.selectedMemberList里有,
* 就说明当前是在执行【取消勾选】操作;否则就是勾选,要追加到this.selectedMemberList里。
* 注意:(如果没设置:reserve-selection="true" 跨分页,此事件返回的已选中不会有重复数据,可以直接用selection参数判断)。
* */
const res = this.selectedMemberList.find(m => m.memberID === row.memberID)
console.log('当前行是否在selectedMemberList中---', res)
if (res) {
const theNew = this.selectedMemberList.filter(item => item.memberID !== row.memberID)
this.selectedMemberList = JSON.parse(JSON.stringify(theNew))
} else {
this.selectedMemberList = [...this.selectedMemberList, row]
}
console.log('this.selectedMemberList =====', this.selectedMemberList)
},
// 全选
handleUserMemberChange(arr) {
// 过滤去重
const newArr = this.selectedMemberList.filter(item => {
if (!arr.find(m => m.memberID === item.memberID)) return item
})
const contantArr = [...arr, ...newArr]
this.selectedMemberList = JSON.parse(JSON.stringify(contantArr))
},
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐



所有评论(0)