【VUE】vue + element 插槽实现表格某一列点击事件

最新推荐文章于 2024-09-25 14:18:29 发布

kiraraLou

最新推荐文章于 2024-09-25 14:18:29 发布

阅读量1.4k

点赞数

分类专栏：前端文章标签： vue elementui

本文链接：https://blog.csdn.net/Mrerlou/article/details/117515400

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、问题背景

想对表格的某一列添加点击事件。
原效果如下:
在这里插入图片描述
目标效果：

二、解决方法

使用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);
    }
    
  }
}