表格事件的使用
表格单选
js
<el-table stripe border :data="tableData" height="750" @scroll="handleScroll"
@selection-change="handleSelectionChange" style="overflow: auto;width: 100%;" ref="refsTable"
:header-cell-style="{ background: '#e5eeff' }">
...
</el-table>
const refsTable=ref()
// 单选框事件
const handleSelectionChange = (val: any) => {
if (val.length > 1) {
//移除上一次选中行数据
val.shift();
//修改选中图标为未选中状态
refsTable.value.clearSelection();
//将当前选中行改为选中状态
refsTable.value.toggleRowSelection(val[0]);
}
//可以在这赋值
。。。
}
<el-table stripe border :data="tableData" height="750" @scroll="handleScroll"
@selection-change="handleSelectionChange" style="overflow: auto;width: 100%;" ref="refsTable"
:header-cell-style="{ background: '#e5eeff' }">
...
</el-table>
const refsTable=ref()
// 单选框事件
const handleSelectionChange = (val: any) => {
if (val.length > 1) {
//移除上一次选中行数据
val.shift();
//修改选中图标为未选中状态
refsTable.value.clearSelection();
//将当前选中行改为选中状态
refsTable.value.toggleRowSelection(val[0]);
}
//可以在这赋值
。。。
}
指定选中某一条
js
<template>
<div>
<el-table ref="multipleTableRef" :data="state.tableData" style="width: 100%"
@selection-change="handleSelectionChange">
...
</el-table>
</div>
</template>
<script setup>
import { reactive, watch, ref, onMounted } from 'vue'
const multipleTableRef = ref()
const tableData=ref( [
{
remark: '张三22',
status: 2,
},
{
remark: '李四',
status: 1,
},
{
remark: '王五',
status: 1,
},
])
onMounted(() => {
console.log(multipleTableRef.value);
tableData.value.forEach(row => {
if (row.status == 2) {
multipleTableRef.value.toggleRowSelection(true)
}
})
})
</script>
<style lang="scss" scoped></style>
<template>
<div>
<el-table ref="multipleTableRef" :data="state.tableData" style="width: 100%"
@selection-change="handleSelectionChange">
...
</el-table>
</div>
</template>
<script setup>
import { reactive, watch, ref, onMounted } from 'vue'
const multipleTableRef = ref()
const tableData=ref( [
{
remark: '张三22',
status: 2,
},
{
remark: '李四',
status: 1,
},
{
remark: '王五',
status: 1,
},
])
onMounted(() => {
console.log(multipleTableRef.value);
tableData.value.forEach(row => {
if (row.status == 2) {
multipleTableRef.value.toggleRowSelection(true)
}
})
})
</script>
<style lang="scss" scoped></style>