首页 前端知识 vue3 el-table手动选中某一行、设置默认选中某一行

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

2024-07-29 00:07:12 前端知识 前端哥 391 291 我要收藏

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

<template>
  <el-table :data="tableData" ref="myTable" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55">
    </el-table-column>
  </el-table>
  <el-button @click="toggleSelection">切换第二行选中状态</el-button>
</template>

<script setup>
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);
}
</script>

toggleRowSelection方法有两个参数,

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

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

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14536.html
标签
评论
发布的文章

Unity数据持久化之Json

2024-08-10 22:08:00

simdjson 高性能JSON解析C 库

2024-08-10 22:08:00

npm常用命令详解(一)

2024-08-10 22:08:34

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!