需求:点击表格的某一行,即可触发选中该行。
如同element table中组件提供了单选的支持,只需要配置highlight-current-row属性即可实现单选。如下图。但element仅提供了单选,那多选的情况如何实现呢?
在这里插入图片描述
多选点击效果如下:选中某一行后,相当于对应的checkbox被选中
在这里插入图片描述
实现如下:
界面:在表格上添加以下三个参数
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述

<el-table 
   border
   ref="serveTable"
   :data="tableData"
   @selection-change="handleSelectionChange"
   @row-click="rowClick"  
   :row-style="rowStyle" 
   :row-class-name="rowClassName"
>
<el-table-column type="selection" width="60" align="center"></el-table-column>
<el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
<el-table-column prop="name" label="设备名" show-overflow-tooltip align="center"></el-table-column>
<el-table-column prop="ip" label="终端IP" show-overflow-tooltip align="center"></el-table-column>
<el-table-column prop="status" label="状态" show-overflow-tooltip :formatter="formatter_status" align="center"></el-table-column>
<el-table-column prop="model" label="设备型号" show-overflow-tooltip align="center"></el-table-column>
<el-table-column label="操作" align="center" width="150">
  <template slot-scope="scope">
    <el-button
      size="mini"
      icon="el-icon-delete"
      type="danger" plain
      @click.native.stop="handleDelete(scope.$index, scope.row)"
     >删除</el-button>
   </template>
 </el-table-column>
</el-table>

事件触发

<script>
 methods: {
      //表格选中事件
      handleSelectionChange(val) {
            this.multipleSelection = val;
        },
      rowStyle({row,rowIndex}) {
            Object.defineProperty(row, 'rowIndex', { //给每一行添加不可枚举属性rowIndex来标识当前行
                value: rowIndex, 
                writable: true,
                enumerable: false
                })
            },
       //监听row-click事件,实现选中
       rowClick(row, column, event) {
             let refsElTable = this.$refs.serveTable; // 获取表格对象
             let findRow = this.multipleSelection.find(c => c.rowIndex == row.rowIndex);  //找到选中的行
             if (findRow ) {
                 refsElTable.toggleRowSelection(row, false);  //如过重复选中,则取消选中
                 return;
             }
             refsElTable.toggleRowSelection(row,true); // 实现选中行中选中事件
         },
        //实现选中高亮
       rowClassName({ row,  rowIndex }) {
             let rowName = "",
             findRow = this.multipleSelection.find(c => c.rowIndex === row.rowIndex);
             if (findRow) {
                 rowName = "current-row "; 
             }
             return rowName; //也可以再加上其他类名 如果有需求的话
         },
         }
         </script>

最后最后,发现如果点击按钮,也会触发选中事件,此时可以使用按钮的冒泡事件。如下:
在这里插入图片描述
参考文章:https://juejin.im/post/5d5030e4e51d4561e224a2fb 更多功能可查看该文章。

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

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

更多推荐