要设置el-table的默认选中,可以使用以下方法:

  1. 使用v-model绑定选中行的数据,例如:
<el-table v-model="selectedRows" :data="tableData" @selection-change="handleSelectionChange">
  <el-table-column type="selection"></el-table-column>
  <el-table-column prop="name" label="Name"></el-table-column>
  <el-table-column prop="age" label="Age"></el-table-column>
</el-table>

在data中定义selectedRows数组,并在methods中定义handleSelectionChange方法来处理选中行的变化:

data() {
  return {
    selectedRows: [],
    tableData: [
      { name: 'John', age: 26 },
      { name: 'Jane', age: 28 },
      { name: 'Bob', age: 30 }
    ]
  }
},
methods: {
  handleSelectionChange(selectedRows) {
    this.selectedRows = selectedRows
  }
}
  1. 使用ref获取el-table实例,然后调用其select方法,例如:
<el-table ref="table" :data="tableData" @row-click="handleRowClick">
  <el-table-column prop="name" label="Name"></el-table-column>
  <el-table-column prop="age" label="Age"></el-table-column>
</el-table>

在methods中定义handleRowClick方法来处理行点击事件:

methods: {
  handleRowClick(row) {
    this.$refs.table.clearSelection()
    this.$refs.table.toggleRowSelection(row)
  }
}

在handleRowClick方法中,首先调用clearSelection方法来清除所有选中行,然后调用toggleRowSelection方法来选中当前行

eltable设置默认选中

原文地址: https://www.cveoy.top/t/topic/f4X6 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录