el-table-column点击单元格跳转
时间: 2023-11-22 10:49:19 浏览: 136
根据提供的两个引用,el-table-column点击单元格跳转的实现方式如下:
1. 点击单元格跳转到新页面
```html
<el-table :data="allData">
<el-table-column prop="tel" label="联系电话" align="center">
<template slot-scope="scope">
<div>
<a href="javascript:;" @click="goEnviro">{{scope.row.tel}}</a>
</div>
</template>
</el-table-column>
</el-table>
<script>
export default {
data() {
return {
allData: [
{ name: "", classify: "", tel: "", update: "", fileType: "", },
]
}
},
methods: {
goEnviro() {
this.$router.push('/filetext/findfile')
}
}
}
</script>
```
2. 点击单元格跳转到新页面并传递参数
```html
<el-table ref="dataTable" :data="userList">
<el-table-column prop="username" label="用户账号">
<template slot-scope="scope">
<el-link type="success" v-on:click="cellclick(scope.row)">{{scope.row.username}}</el-link>
</template>
</el-table-column>
</el-table>
<script>
export default {
data() {
return {
userList: []
}
},
methods: {
cellclick(row) {
this.$router.push({
path: '/user/detail',
query: {
id: row.id
}
})
}
}
}
</script>
```
阅读全文