vue3中表格单选

℘团子এ2023-09-20 11:06

html 复制代码

<el-table :data="datas.tableData" ref="tableRef" :max-height="400" class="mt10" border scrollbar-always-on @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="序号" type="index" fixed width="80"></el-table-column>
        <el-table-column label="服务项名称" prop="serviceNo" width="240"></el-table-column>
        <el-table-column label="创建人" prop="signingDate" width="240"></el-table-column>
        <el-table-column label="创建日期" prop="memberUserName" width="240"></el-table-column>
        <el-table-column label="备注" prop="contractNo" min-width="160"></el-table-column>
      </el-table>

javascript 复制代码

// 勾选-单选
const tableRef = ref()
function handleSelectionChange(val) {
  if(val.length>1){
    tableRef.value.toggleRowSelection(val[0],false)
  }
};

说明：需要在表格标签上定义节点ref="tableRef"，使用表格方法toggleRowSelection(val $0$ ,false)；该方法的第一个参数是哪一行（可以是当前行row，也可以是指定的行），第二个参数是布尔值，true就勾选，false就不勾选