web前端-vue element UI el-table,el-table-column表格添加行点击事件
el-table如下数据一、el-table 整行都可以点击事件定义点击事件 @row-click="openDetails";openDetails为方法名<!-- @row-click 单元格整行点击事件 --><!--@row-click="openDetails" 方法名--><el-table v-loading="loading" :data="userL
·
el-table如下数据
一、el-table 整行都可以点击事件
定义点击事件 @row-click="openDetails";openDetails为方法名
<!-- @row-click 单元格整行点击事件 --> <!--@row-click="openDetails" 方法名-->
<el-table v-loading="loading" :data="userList" @selection-
change="handleSelectionChange" @row-click="openDetails">
</el-table>
方法实现
//对应的 methods 中
//点击click,change事件
methods: {
//单元格整行点击事件
openDetails (row) {
//具体操作
console.log(this.$route ,"----当前页面的url信息----");
},
}
二、el-table-column 某列可点
定义点击事件 @click="openDetails(scope.row)";openDetails为方法名;将本行数据参数scope.row带过去
在el-table-column中添加一个,重新把数据显示到div或者span中,不然页面会没有数据显示
<el-table-column label="编码" align="center" prop="code" :show-overflow-tooltip="true">
<template slot-scope="scope">
<div @click="openDetails(scope.row)">{{ scope.row.code }}</div>
</template>
</el-table-column>
方法实现
methods: {
//单元格整行点击事件
openDetails (row) {
//具体操作
console.log(this.$route ,"----当前页面的url信息----");
},
}
输出如下:
更多推荐
已为社区贡献25条内容
所有评论(0)