el-table表格的展开行,初始化的时候展开哪一行+设置点击行可展开功能

news2024/12/24 8:40:19

效果:

表格展开行官网使用:

通过设置 type="expand" 和 Scoped slot 可以开启展开行功能,el-table-column 的模板会被渲染成为展开行的内容,展开行可访问的属性与使用自定义列模板时的 Scoped slot 相同。

但是这种方法是有局限性,只是点击箭头展开,点击行没反应,这里做优化点击行也可以进行展开。

关键点(以下属性和事件缺一不可):

:row-key="getRowKeys"

:expand-row-keys="expands"

@row-click="clickRowHandle"

需要默认展开行只需要在expands存入需要展开行的id就可以了

html

        <el-table :data="tableData"
                  :row-key="getRowKeys"
                  :expand-row-keys="expands"
                  @row-click="clickRowHandle"
                  border>
          <el-table-column type="expand">
            <template slot-scope="scope">
              <div class="expand-txt"><span>编号:</span> {{ scope.row.code }}</div>
              <div class="expand-txt"><span>批次:</span> {{  scope.row.batch }}</div>
              <div class="expand-txt"><span>名称:</span> {{  scope.row.name }}</div>
              <div class="expand-txt"><span>规格:</span> {{  scope.row.specifications }}</div>
              <div class="expand-txt"><span>参数:</span> {{  scope.row.parameter }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="code"
                           label="编号" width="120px">
          </el-table-column>
          <el-table-column prop="batch"
                           label="批次">
          </el-table-column>
          <el-table-column prop="name"
                           label="姓名">
          </el-table-column>
          <el-table-column prop="specifications"
                           label="规格">
          </el-table-column>
          <el-table-column prop="parameter"
                           label="参数">
          </el-table-column>
        </el-table>

script:

<script>
export default {
  data () {
    return {
      tableData: [{
        id: 1,
        code: '2016-05-01',
        batch: 1,
        name: '王小虎',
        specifications: 'A',
        parameter: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: 2,
        code: '2016-05-02',
        batch: 1,
        name: '王小虎',
        specifications: 'A',
        parameter: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: 3,
        code: '2016-05-03',
        batch: 1,
        name: '王小虎',
        specifications: 'A',
        parameter: '上海市普陀区金沙江路 1519 弄'
      }, {
        id: 4,
        code: '2016-05-04',
        batch: 1,
        name: '王小虎',
        specifications: 'A',
        parameter: '上海市普陀区金沙江路 1516 弄'
      }],
      // 获取row的key值
      getRowKeys (row) {
        // console.log(row);
        return row.id;
      },
      expands: [],
    }
  },
  components: {
  },
  mounted () {
    // 在初始化的时候展开第一行都可以了
    this.expands.push(this.tableData[0].id);
  },
  methods: {
    clickRowHandle (row) { // , column, event
      // console.log(row, column, event);
      if (this.expands.includes(row.id)) {
        this.expands = this.expands.filter(val => val !== row.id)
        console.log(1, this.expands);
      } else {
        this.expands.push(row.id)
        console.log(2, this.expands);
      }
    }
  }
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2134748.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

开源 TTS 模型「Fish Speech」1.4 发布;GameGen-O :生成开放世界游戏视频模型丨 RTE 开发者日报

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。 我们的社区编辑团队会整理分享 RTE&#xff08;Real-Time Engagement&#xff09; 领域内「有话题的新闻」、「有态度的观点」、「有意思的数据」、「有思考的文章」、…

计算机网络:概述 - 性能指标

目录 一. 速率 二. 带宽 三. 吞吐量 四. 时延 五. 时延带宽积 六. 往返时间RTT 七. 利用率 八. 丢包率 此博客介绍计算机网络中的性能指标&#xff0c;性能指标从不同的角度来度量计算机网络的性能。下面介绍几个常用的性能指标&#xff1a; 一. 速率…

【TabBar嵌套Navigation案例-cell重用 Objective-C语言】

一、我们来说这个cell重用(重复使用)的问题啊 1.我们这个比分直播推送页面, 这个里边呢,现在这个cell,涉及到两个样式,上面呢,是Default的,下面呢,是Value1的,然后,我们在这个里边啊,我们每一组就一个cell啊,然后呢,我把这个组,多给它复制几份儿,现在是三个组…

OpenSSH后门从入门到应急响应与加固

目录 1. Openssh与后门介绍 1.1 Openssh介绍 1.2 Openssh后门介绍 2. 实战演练 2.1 查看版本,注意V是大写的 2.2 下载SSH配置文件 2.3 安装 2.4、修改后⻔密码和⽂件记录 2.5、修改版本号为原本的版本号(伪装openssh) 2.6、修改/etc/ssh中的key 2.7、安装所需环境与…

【黑神话】无脑过大头怪(幽魂)教程,手残也能打过关!

在《黑神话悟空》这款扣人心弦的动作角色扮演游戏中&#xff0c;玩家将面对众多考验操作与策略的Boss战。其中&#xff0c;大头幽魂作为玩家早期就会遇到的挑战之一&#xff0c;其独特的战斗机制和技能组合&#xff0c;对新手玩家而言无疑是一次不小的考验。今天&#xff0c;就…

AI 场景下如何构建运维的标准化能力?SOMA 智能运维计划发布 | 2024 龙蜥大会

8 月 30 日&#xff0c;2024 龙蜥操作系统大会&#xff08;OpenAnolis Conference&#xff09;在北京盛大召开。 与此同时&#xff0c;由龙蜥社区运营委员会副主席、龙腾计划生态负责人金美琴&#xff0c;阿里云智能集团高级技术专家毛文安&#xff0c;云杉网络 VP 向阳联合出品…

Java--常见的接口--Comparable

String类型的compareTo方法&#xff1a; 在String引用中&#xff0c;有一个方法可以比较两个字符串的大小&#xff1a; 和C语言中是一样的&#xff0c;两个字符串一个字符一个去比较。 那么这个方法是怎么实现的呢&#xff1f; 其实就是一个接口&#xff1a;Comparable接口里…

阿里云rds数据迁移

记录一下rds数据同步操作,官方文档: 跨阿里云账号迁移RDS实例. 背景:不同阿里云账号的rds中指定数据库迁移. 操作说明: 使用阿里云数据传输服务产品,选择数据迁移.注意是从目标阿里云账号的rds中操作,按照文档操作基本上没有问题. 源阿里云账号设置如上. 需要注意的是需要从源…

有伸缩镜头也能实现IP68级防尘防水,Pura 70 Ultra兼顾时尚与便捷

在这个快节奏的时代&#xff0c;手机不仅仅是通讯的工具&#xff0c;更是我们日常生活中不可或缺的伙伴。它记录着我们的回忆&#xff0c;承载着我们的工作&#xff0c;甚至在紧急时刻成为我们的救星。然而生活中总有一些不可预测的时刻&#xff0c;比如突如其来的大雨&#xf…

【C++算法】分治——归并

排序数组 题目链接 排序数组https://leetcode.cn/problems/sort-an-array/description/ 算法原理 代码步骤 class Solution {vector<int> tmp; public:vector<int> sortArray(vector<int>& nums) {tmp.resize(nums.size());merge(nums, 0, nums.size…

腾讯元器初体验

文章目录 前言什么是腾讯元器&#xff1f;前端编程助手智能体搭建智能体效果智能体入口腾讯元器体验感受 前言 一个后端开发人员可能没有办法快速实现前端代码&#xff0c;此时&#xff0c;如果有一个工具可以根据界面设计或者描述生成前端代码&#xff0c;那么对于后端开发而…

Prometheus监控系统部署及应用

Prometheus 由 Go 语言编写而成&#xff0c;采用 Pu11 方式获取监控信息&#xff0c;并提供了多维度的数据模型和灵活的査询接口。Prometheus不仅可以通过静态文件配置监控对象,还支持自动发现机制,能通过KubernetesCons1、DNS 等多种方式动态获取监控对象。在数据采集方面,借助…

电脑录屏怎么录?录屏软件哪个好,推荐5个视频录制软件免费版!

在当今这个日新月异、高速发展的数字化时代&#xff0c;屏幕录制软件毫无疑问已经成为了我们日常工作和学习中至关重要、不可或缺的得力工具。随着信息技术的不断进步&#xff0c;人们对于信息传播和知识分享的需求日益增长&#xff0c;屏幕录制软件的重要性愈发凸显。无论是教…

OBD服务07--请求当前或上一个完成的驾驶周期中检测到的与排放相关的诊断故障码(DTC)

功能描述 此服务的目的是允许外部测试设备获取在当前或上一个完成的驾驶周期中检测到的“pending”诊断故障码&#xff0c;这些故障码与排放相关的组件/系统有关。服务0x07适用于所有DTC&#xff0c;并且独立于服务0x03。这些数据的主要用途是在车辆维修后和清除诊断信息后&am…

重学SpringBoot3-集成RocketMQ(一)

更多SpringBoot3内容请关注我的专栏&#xff1a;《SpringBoot3》 期待您的点赞&#x1f44d;收藏⭐评论✍ 重学SpringBoot3-集成RocketMQ&#xff08;一&#xff09; 环境准备1. 配置项目依赖2. 配置 RocketMQ 信息2.1配置文件2.2导入自动配置类2.3创建Topic 3. 生产者代码示例…

ERP进销存多仓库管理系统源码 带完整的安装代码包以及搭建部署教程

系统概述 ERP进销存多仓库管理系统是一款专为中小企业量身定制的集成化管理软件&#xff0c;它集成了采购管理、销售管理、库存管理、财务管理以及多仓库协同作业等核心模块。通过统一的平台&#xff0c;企业可以实时掌握商品从入库到出库的全过程&#xff0c;实现库存的自动化…

【OpenGL】OpenGL学习笔记(一):绘制三角形、初识VAO和VBO

文章目录 前言绘制目标 前言 最近开始研究用 QT 做开发来学习 OpenGL &#xff0c;想着别学完了就忘了&#xff0c;所以准备新开一个 OpenGL 专栏。开发环境已经搭好了&#xff0c;但是没弄教程&#xff0c;最近比较忙&#xff0c;暂时先把核心代码放过来&#xff0c;先开个草…

微信支付开发-需求整理及需求设计

一、客户要求 1、通过唤醒机器人参与答题项&#xff0c;机器人自动获取题目&#xff0c;用户进行答题&#xff1b; 2、用户答对题数与后台设置的一样或者更多&#xff0c;则提醒用户可以领取奖品&#xff0c;但是需要用户支付邮费&#xff1b; 3、用户在几天之内不能重复领取奖…

分布式新能源的能量管理

在新能源的概念下&#xff0c;可以将其定义为&#xff1a;新能源是指具有一定能量的清洁的可再生能源&#xff0c;它是一种新型的可持续发展的资源和能源。生物质能是借助各类绿色植物的光合作用实现能量转换。地热能主要来源于地球熔岩内部存在的天然热能&#xff0c;海洋能通…

Vue3项目打包报错-内存溢出解决方法

错误&#xff1a;FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory 1、安装cross-env和increase-memory-limit 命令行&#xff1a;npm install cross-env increase-memory-limit 2、package.json添加如下内容&a…