seleção de conjunto de mesa el multi-escolha para alcançar a função de escolha única

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.
insira a descrição da imagem aqui
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

Acho que você gosta

Origin blog.csdn.net/m0_49016709/article/details/126855032
Recomendado
Clasificación