element-plus el-table表格多选

官方文档给的例子太简单了，如果初始就要选中某些选项或者要自定义样式比较困难，网上也没找到比较靠谱的方法。

1 首先自定义表头

这个官方说的很详细，简单列出一下

将type设为selection即可

2 接着自定义每列的复选框

其实上面代码已经可以实现每一列都有复选框，并且在el-table标签添加select事件也可以实现点击每一行的事件，但是如果你的数据一开始就是选中的，或者你想自定义复选框，那么就要另想办法了

html

        
            
             
  
  ...
          

js

import { ref, reactive, onMounted } from 'vue'
const tableRef = ref() // 定义ref
const tableList = ref([ // 表格数据
  {
    checked: true,
    ...
  },
  {
    checked: false,
    ...
  },
  ...
])
const headerStyle = reactive({ background: '#FAFAFA', color: '#666' }) // table样式
const cellStyle = reactive({ height: '45px' }) // 单元格样式
onMounted(() => {
  select()
})
const selectAll = row => { // 全选
  tableList.value.forEach(t => {
    t.checked = !!row[0]
  })
}
const select = () => { // 反选
  tableList.value.forEach(t => {
    multipleTableRef.value.toggleRowSelection(t, t.checked)
  })
}

这样就可以实现自定义复选框已经全选反选功能了，至于自定义样式只要在el-table-column的插槽中添加想要的图标将原本的复选框遮住，然后将事件绑定给图标即可