O requisito é usar a função de seleção múltipla de el-table e, em seguida, não deseja alterar a seleção múltipla para seleção única.
o código
<template>
<div class="contentBox"
v-loading="loading">
<el-table :data="list"
ref="accountRef"
@select="handleTableChange">
<el-table-column type="selection" width="45"></el-table-column>
<el-table-column width="100" prop="name"></el-table-column>
<el-table-column width="100" prop="no"></el-table-column>
<el-table-column width="100" prop="date"></el-table-column>
</el-table>
</div>
</template>
<script>
import {
defineAsyncComponent,
defineComponent,
getCurrentInstance,
onMounted,
reactive,
toRefs,
} from "vue";
export default defineComponent({
components: {
},
setup(props, context) {
const {
proxy } = getCurrentInstance();
const accountRef = ref(null)
const data = reactive({
list: [],
selectTable: [],
});
//表格单选
const handleTableChange = (list, row) => {
if (list.length === 0) {
data.selectTable = [];
return
}
// let itemData = JSON.parse(JSON.stringify(row))
accountRef.value.clearSelection()
data.list.forEach((ele) => {
if (ele.id === row.id) {
accountRef.value.toggleRowSelection(ele, true)
data.selectTable = [ele];
}
})
};
return {
...toRefs(data),
handleTableChange,
accountRef
};
},
});
</script>
Aqui está a maneira de escrever vue3
1. Vincule a instância da tabela ref="accountRef" e, em seguida, anote a instrução const accountRef = ref(null) e adicione accountRef no retorno return.
2. Vincule o método select e defina a função handleTableChange @select="handleTableChange"
3. O evento de vinculação de tabela select, select tem dois parâmetros alternativos de seleção, linha. A matriz de dados selecionada por seleção, os dados atualmente selecionados por linha.
4. O método de tabela, clearSelection() limpa a seleção da tabela, toggleRowSelection(ele, true) seleciona manualmente. Primeiro, limpe a seleção e, em seguida, verifique os dados escolhidos.
5. toggleRowSelection tem dois parâmetros, um é o dado a ser selecionado, o outro é o estado dos dados, true é selecionado, false não é selecionado