el-table点击当前行触发

### 实现 `el-table` 点击行触发事件 在 Element Plus 或 Element UI 的 `<el-table>` 组件中，可以通过监听 `@row-click` 事件来实现点击表格某一行时触发自定义逻辑的功能。以下是具体的实现方式： #### 基本功能：点击某行触发事件 通过设置 `highlight-current-row` 属性可以高亮当前选中的行，并结合 `@row-click` 方法捕获用户的点击行为。 ```vue <template> <div> <el-table :data="tableData" style="width: 100%" @row-click="handleRowClick" highlight-current-row > <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { date: '2023-09-01', name: '张三', address: '北京市' }, { date: '2023-09-02', name: '李四', address: '上海市' } ] }; }, methods: { handleRowClick(row, column, event) { console.log('点击的行数据:', row); console.log('点击的列对象:', column); console.log('原生 DOM 事件:', event); } } }; </script> ``` 上述代码展示了如何通过 `@row-click` 来获取被点击行的数据以及对应的列和事件信息[^1]。 --- #### 解决操作栏点击与 `row-click` 冲突问题 当表格中存在操作栏或其他交互控件（如按钮、链接等）时，默认情况下它们的点击也会触发 `@row-click` 事件。为了避免这种冲突，可以在子元素上使用 `stopPropagation()` 阻止事件冒泡。 ```vue <template> <el-table :data="tableData" style="width: 100%" @row-click="handleRowClick" highlight-current-row > <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <el-table-column label="操作"> <template #default="scope"> <el-button type="text" size="small" @click.stop="handleOperation(scope.row)"> 编辑 </el-button> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { date: '2023-09-01', name: '张三', address: '北京市' }, { date: '2023-09-02', name: '李四', address: '上海市' } ] }; }, methods: { handleRowClick(row, column, event) { console.log('点击的行数据:', row); }, handleOperation(row) { console.log('编辑操作:', row); } } }; </script> ``` 在此示例中，`@click.stop` 被用于防止操作栏内的按钮点击事件冒泡到父级 `@row-click` 事件[^2]。 --- #### 处理多组件嵌套引发的重复事件问题 如果表格中包含其他可交互组件（如 `el-radio` 和 `el-checkbox`），可能会因为其默认行为而导致多次触发 `@row-click` 事件。解决方案如下： ##### 使用 `native-type` 对于某些特殊场景下的输入框或单选框，可通过显式指定 `type` 并配合 `v-model` 控制状态更新，从而避免不必要的事件干扰。 ```vue <template> <el-table :data="tableData" style="width: 100%" @row-click="handleRowClick" highlight-current-row > <el-table-column width="50"> <template #default="scope"> <el-radio v-model="radioValue" :label="scope.$index">{{ '' }}</el-radio> </template> </el-table-column> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </template> <script> export default { data() { return { radioValue: null, tableData: [ { date: '2023-09-01', name: '张三', address: '北京市' }, { date: '2023-09-02', name: '李四', address: '上海市' } ] }; }, methods: { handleRowClick(row, column, event) { this.radioValue = this.tableData.indexOf(row); // 同步单选框状态 console.log('点击的行数据:', row); } } }; </script> ``` 此方案利用了 `el-radio` 的双向绑定特性，在不影响用户体验的前提下解决了潜在的事件冲突问题[^4]。 --- ### 推荐工具：增强型表格插件 为了进一步提升开发效率并简化复杂业务逻辑，建议尝试第三方开源库 **el-table-draggable**，它提供了基于 Vue.js 和 Element UI 的拖拽排序能力以及其他高级功能[^3]。 --- ####