vue3实现表格多选默认选中

1.问题描述

实现element -plus组件库里面的table表格多选功能默认选中数据

---

思路

1.表格数据返回中会有包括数据是否选中的状态字段

2.根据字段来控制是否选中, 组件的api   toggleRowSelection 可以控制,详细看组件库api

3,在vue3中ref的取值跟vue2不一样,不要搞混了 

    <el-table
            ref="multipleTableRef"
            :data="state.tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          > 
            <el-table-column type="selection" width="55" />
            <el-table-column type="index" label="序号" width="55" />
            <el-table-column property="remark" label="用户名" width="120"/>
            <el-table-column property="name" label="姓名" width="250" />
            <el-table-column property="address" label="备注"/>
          </el-table>
js部分
import {reactive,watch,ref, onMounted} from 'vue'
// import axios from 'axios'
// import { roleTypes } from 'element-plus'
const multipleTableRef = ref()
const state = reactive({
  tableData:[
    {
    remark: '张三',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    status: 2,
  },
  {
    remark: '李四',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    status: 1,
  },
  {
    remark: '王五',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    status: 1,
  },

  ]
})
onMounted(() => {
  console.log(multipleTableRef.value);
     state.tableData.forEach(row => {
         if (row.status == 1){
             multipleTableRef.value.toggleRowSelection(row,true)
            }else {
              multipleTableRef.value.toggleRowSelection(row,false)
          } 
  })
})

const handleSelectionChange = (val) => {
  console.log(val);
}
</script>