element ui table复选框置灰禁止选择、回显、跨页选中

最新推荐文章于 2024-06-20 15:31:44 发布

Lofan.

最新推荐文章于 2024-06-20 15:31:44 发布

阅读量5.7k

点赞数 1

分类专栏： Element UI 文章标签： elementui

本文链接：https://blog.csdn.net/u011019468/article/details/124278572

版权

Element UI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

要多选

<!-- 加一列，放首列位置 -->
<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))
},