• 【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);
        }
        
      }
    }
    
  • 相关阅读:
    企业管理:“残缺”也是一种美?
    销售到出仓所经历的表
    采购到入库所经历的表
    OM 订单状态
    OM客户、客户地点
    接收事务处理类型 rcv_transactions
    安装ORACLE不能安装解决方法
    系统变量设置
    如何取分组最大值记录
    CentOS (Linux) 上开启FTP服务并配置用户
  • 原文地址:https://www.cnblogs.com/erlou96/p/16878337.html
Copyright © 2020-2023  润新知