一、htmll 中添加

<el-table
  ref="multipleTable"
  :data="tableData"
  highlight-current-row     选中行高亮
  :row-key="getRowKey"
  @selection-change="selectItem"
  @row-click="onSelectOp"

>
  <el-table-column type="selection" width="55" align="center" />
  <el-table-column label="序号" type="index" align="center" />
  <el-table-column label="姓名" prop="name" align="center" />
  <el-table-column label="手机号码" prop="telephone" align="center" />
</el-table>
二、在<srcipt lang='ts' setup>中添加如下方法

function getRowKey(row:any) {

  return row.id

}

const multipleTable = ref();

const selectItem=(rows:any)=> {

  if (rows.length > 1) {

    const newRows = rows.filter((it:any, index:any) => {

      if (index == rows.length - 1) {

      multipleTable.value.toggleRowSelection(it, true);

        return true;

      } else {

       multipleTable.value.toggleRowSelection(it, false);

        return false;

      }

    });

    multipleSelection = newRows;

  } else {

    multipleSelection = rows;

  }

}

let multipleSelection = []

const onSelectOp=(row:any)=>{

 multipleTable.value.clearSelection();

 multipleTable.value.toggleRowSelection(row, true);

  multipleSelection = [];

  multipleSelection.push(row);

  console.log('onSelectOp >row',row);

}

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐