eltable设置默认选中
要设置el-table的默认选中,可以使用以下方法:
- 使用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
}
}
- 使用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方法来选中当前行
原文地址: https://www.cveoy.top/t/topic/f4X6 著作权归作者所有。请勿转载和采集!