• 【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);
        }
        
      }
    }
    
  • 相关阅读:
    命令模式
    装饰者模式
    迭代器模式-统一集合的遍历方式
    springboot源码解析-管中窥豹系列之总体结构
    启动项目tomcat报错
    在项目中部署redis的读写分离架构(包含节点间认证口令)
    Redis的几个核心机制底层原理
    Java内存模型
    JAVA原子组件和同步组件
    DataGrid 删除一行数据
  • 原文地址:https://www.cnblogs.com/erlou96/p/16878337.html
Copyright © 2020-2023  润新知