elementPlus-vue3-ts表格单选和双选实现方式

记录在vue3、ts、element-plus环境下表格单选和多选的实现方式

单选

html部分

<el-table
	...
	ref='taskTableRef'
	@select="selectClick"
	...
>
	<el-table-column type="selection" width="50" />
    ...
</el-table>

ts部分

const taskTableRef = ref() // 表格ref

let chooseStr = ref<string>('')

const selectClick = (selection: any, row: any) => {
    
  if (selection.length > 1) {
    let del_row = selection.shift()
    taskTableRef.value.toggleRowSelection(del_row, false)
  }

  if (Number(chooseStr.value) === row.id) {
    chooseStr.value = ''
  } else {
    chooseStr.value = row.id
  }
}

css部分

因为是单选，需要隐藏掉顶部一键全选框框

:deep(.el-table th.el-table__cell:nth-child(1) .cell) {
  visibility: hidden;
}

多选

html部分

<el-table
	...
	@selection-change="handleSelectionChange"
	...
>
	<el-table-column type="selection" width="50" />
    ...
</el-table>

ts部分

let chooseStr = ref<string>('')

const multipleSelection = ref<any>([])

// 这里限制多选最多只能选中十条线索，因此加了限制，不需要直接去除限制即可
const handleSelectionChange = (val: any) => {
  if (Number(val.length) > 10) {
    ElMessage({
      message: '一次性最多只能选中十条线索,超过十条默认取前十条线索！',
      type: 'warning'
    })
    multipleSelection.value = val.slice(0, 10)
  } else {
    multipleSelection.value = val
  }
  
  let arr: any = []
  multipleSelection.value.forEach((element: any) => {
    arr.push(element.id)
  })
  chooseStr.value = arr.join()
}