vue3 el-table手动选中某一行、设置默认选中某一行

06-29 1571阅读

选中某一行用的是el-table的toggleRowSelection方法,用来切换某一行的选中状态

vue3 el-table手动选中某一行、设置默认选中某一行
(图片来源网络,侵删)
  
    
    
  
  切换第二行选中状态


import { ref, reactive, nextTick, onActivated, watch } from "vue";
let myTable;
nextTick(()=>{
  myTable = ref();
})
const data = reactive({
  tableData: [{//表格的数据
    name: 'Tom1',
  }, {
    name: 'Tom2',
  }, {
    name: 'Tom3',
  }],
  selectData:[]//已选的表格数据
})
// 表格选中有变动,重新赋值
const handleSelectionChange = (val) => {
  data.selectData = val;
}
// 自己选择哪些数据选中
const toggleSelection = () => {
  myTable.value.toggleRowSelection(data.tableData[1], true);
}

toggleRowSelection方法有两个参数,

第一个参数是el-table的data绑定的第几个数据,

第二个参数是要把这条数据设置成选中还是不选中,不传第二个参数就会切换这条的选中状态

设置表格默认选中某些行就在页面加载的时候用此方法切换一下选中的状态为true就行了

VPS购买请点击我

文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。

目录[+]