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

目录

• 一、问题背景
• 二、解决方法

 

---

回到顶部

一、问题背景

想对表格的某一列添加点击事件。
原效果如下:

目标效果：

回到顶部

二、解决方法

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

__EOF__

本文作者：彬在俊
本文链接：https://www.cnblogs.com/erlou96/p/16878337.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！