一、问题背景
想对表格的某一列添加点击事件。
原效果如下:
目标效果:
二、解决方法
使用vue 的slot插槽来解决这个问题:
代码如下:
关键代码如下:
<template slot-scope="scope">
<a @click="handleClick(scope.row)" style="color:blue;cursor:pointer">{{ scope.row.databaseName }} </a>
</template>
整体代码贴下:
<el-table
:data="tableData"
stripe
style="width: 100%">
<el-table-column
prop="databaseName"
label="库名"
width="300">
<!-- 以上块是代码实现的关键 -->
<template slot-scope="scope">
<a @click="handleClick(scope.row)" style="color:blue;cursor:pointer">{{ scope.row.databaseName }}</a>
</template>
<!-- 以上是代码实现的关键 -->
</el-table-column>
<el-table-column
prop="comment"
label="详情"
width="300">
</el-table-column>
<el-table-column
prop="address"
label="存储地址">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
export default {
components: {},
props: [],
data() {
return {
tableData: [],
formInline: {
user: '',
region: ''
}
}
},
computed: {},
watch: {},
created() {},
mounted() {
},
methods: {
handleClick(row) {
console.log(row);
}
}
}