要 多选

<!-- 加一列,放首列位置 -->
<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))
},
GitHub 加速计划 / eleme / element
14
2
下载
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 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐