element-ui table表格,根据缩放自适应

安装依赖

npm install af-table-column

main.js 中引入依赖,

import Vue from 'vue'
import ElementUI from 'element-ui'
//需要按需引入,先引入vue并引入element-ui
import AFTableColumn from 'af-table-column'
Vue.use(AFTableColumn)

demo样式:

<template><el-table :data="data"><af-table-column label="列1" prop="field1"></af-table-column><af-table-column label="列2" prop="field2"></af-table-column><!--也支持简单的自定义内容--><af-table-column label="列3"><template slot-scope="scope"><div>自定义显示值31: {{ scope.row.field31 }}</div><div>自定义显示值32: {{ scope.row.field32 }}</div></template></af-table-column>//也支持element-ui原有的el-table-column<el-table-column  label="操作"><template slot-scope="scope"><el-button @click="removeItem">删除</el-button></template></el-table-column >//af-table-column 和af-table-column 可以同时在一个表格中使用</el-table>
</template>

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

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

相关文章

Python Opencv实践 - 图像放射变换

import cv2 as cv import numpy as np import matplotlib.pyplot as pltimg cv.imread("../SampleImages/pomeranian.png", cv.IMREAD_COLOR) rows,cols img.shape[:2] print(img.shape[:2])#使用getAffineTransform来获得仿射变换的矩阵M #cv.getAffineTransform(…

Java:正则表达式案例:爬数据,重复数据替换,数据分割

使用正则表达式查找一段文本中的内容 需求:请把下面文本中的电话&#xff0c;邮箱&#xff0c;座机号码&#xff0c;热线都爬取出来。 String data "电话:1866668888&#xff0c;18699997777\n" "或者联系邮箱: boniuitcast.cn&#xff0c;\n" "座机…

Loop Transformations

Java的Loop Transformations 很多人都知道,在编程中,循环结构是十分重要的。但是,在不同的情况下,相同的循环结构可能会导致不同的性能表现。因此,在优化程序的性能时,循环结构的优化是一个不可忽略的方面。这就是Loop Transformations(循环转换)的作用。本文将以详细…

16 dplsys GAN

和有监督的分类工作不同&#xff0c;生成任务的目标更不明确。难以评价生成结果的好坏。 Oracle discriminator 假设我们有一个先知判别器oracle discriminator可以分辨我们生成的内容是真还是假。 我们想让生产成的结果足够真实&#xff0c;所以要 fool Oracle discriminato…

Android布局【GridLayout】

文章目录 GridLayout概述常见属性子控件属性项目结构主要代码 GridLayout概述 GridLayout也名网格布局,该布局与TableLayout类似&#xff0c;但与其相比&#xff0c;GridLayout会更加的灵活&#xff0c;比如 TableLayout不能将两行进行一个合并&#xff0c;只能将两列进行一个…

Declare 关键字在 TypeScript 中如何正确使用?

如果您编写 TypeScript 代码的时间足够长,您就已经看到过declare关键字。但它有什么作用,为什么要使用它? declare关键字告诉 TypeScript 编译器存在一个对象并且可以在代码中使用。 本文解释了声明关键字并通过代码示例展示了不同的用例。 定义 在 TypeScript 中,decl…

【MySQL--->数据类型】

文章目录 [TOC](文章目录) 一、数据类型分类二、整型类型三、bit(位)类型四、float类型五、decimal类型六、char和varchar类型1.char类型2.varchar3.char与varchar的区别 七、日期与时间类型八、enum和set 一、数据类型分类 二、整型类型 数值类型有数据存储上限,而且每个类型都…

4、Rocketmq之存储原理

CommitLog ~ MappedFileQueue ~ MappedFile集合 正常情况下&#xff0c;RocketMQ支持消息体字节数最多为1个G。注意该消息体并不单单是消息体body。如果生产的消息其字节数超过1个G则该消息是无法被落盘处理的。因为没有一个MapperFile文件可以承载该消息所有的字节数。 1.All…

【力扣每日一题】617. 合并二叉树 dfs bfs 8.14打卡

文章目录 题目思路代码 题目 617. 合并二叉树 难度&#xff1a; 简单 描述&#xff1a; 给你两棵二叉树&#xff1a; root1 和 root2 。 想象一下&#xff0c;当你将其中一棵覆盖到另一棵之上时&#xff0c;两棵树上的一些节点将会重叠&#xff08;而另一些不会&#xff0…

阿里云ACP知识点

前言&#xff1a;记录ACP错题 1、在创建阿里云ECS时&#xff0c;每台服务器必须要包含_______用来存储操作系统和核心配置。 系统盘&#xff08;不是实例&#xff0c;实例是一个虚拟的计算环境&#xff0c;由CPU、内存、系统盘和运行的操作系统组成&#xff1b;ESC实例作为云…

C++11 异步与通信之 std::async

概念简介 std::async 异步运行一个函数&#xff0c;将返回值保存在std::future中。 含有2个策略参数&#xff1a; launch::deferred 延迟执行&#xff0c;当调用wait()和get()时&#xff0c;任务才会被运行&#xff0c;且不创建线程&#xff1b;launch::async : 创建线程并执…

react项目做的h5页面加载缓慢优化(3s优化到0.6s)

打包到生产环境时去掉SOURCEMAP 禁用生成 Source Map 是一种权衡&#xff0c;可以根据项目的实际需求和优化目标来决定是否禁用。如果您对调试需求不是特别强烈&#xff0c;可以考虑在生产构建中禁用 Source Map 以获取更好的性能。但如果需要保留调试能力&#xff0c;可以在生…

【量化课程】08_1.机器学习量化策略基础实战

文章目录 1. 常用机器学习模型1.1 回归模型1.2 分类模型1.2.1 SVC介绍1.2.2 SVC在量化策略中的应用 2. 机器学习量化策略实现的基本步骤3. 策略实现 1. 常用机器学习模型 1.1 回归模型 线性回归多层感知器回归自适应提升树回归随机森林回归 1.2 分类模型 线性分类支持向量机…

Android布局【FrameLayout】

文章目录 常见属性说明项目结构主要代码 常见属性 android:foreground&#xff1a;设置前景android:foregroundGravity&#xff1a;设置前景位置 说明 FrameLayout的其他属性与前面学的差不多&#xff0c;只不过需要特别注意上面两个即可 项目结构 主要代码 activity_main…

【leetcode】第2章 链表

203. 移除链表元素 方法&#xff1a;添加一个虚拟节点&#xff0c;这不用考虑头节点删除情况 public ListNode removeElements(ListNode head, int val) {// 虚拟节点&#xff0c;指向头节点ListNode dummy new ListNode(0);dummy.next head;ListNode p dummy;// 找到被删…

数据结构:树状数组

老规矩&#xff0c;推荐一篇原理讲解清晰的博客&#xff01;&#xff08;树状数组(详细分析应用)&#xff0c;看不懂打死我!_树形数组_鲜果维他命的博客-CSDN博客&#xff09; 相对于线段树&#xff0c;树状数组的优点就是代码简洁&#xff0c;容易修改。单缺点就是优点问题只…

计算机视觉中的特征检测和描述

一、说明 这篇文章是关于计算机视觉中特征检测和描述概念的简要理解。在其中&#xff0c;我们探讨了它们的定义、常用技术、简单的 python 实现和一些限制。 二、什么是特征检测和描述&#xff1f; 特征检测和描述是计算机视觉中的基本概念&#xff0c;在图像识别、对象跟踪和图…

Beats:使用 Filebeat 将 golang 应用程序记录到 Elasticsearch - 8.x

毫无疑问&#xff0c;日志记录是任何应用程序最重要的方面之一。 当事情出错时&#xff08;而且确实会出错&#xff09;&#xff0c;我们需要知道发生了什么。 为了实现这一目标&#xff0c;我们可以设置 Filebeat 从我们的 golang 应用程序收集日志&#xff0c;然后将它们发送…

Maven教程_编程入门自学教程_菜鸟教程-免费教程分享

教程简介 Maven 是一款基于 Java 平台的项目管理和整合工具&#xff0c;它将项目的开发和管理过程抽象成一个项目对象模型&#xff08;POM&#xff09;。开发人员只需要做一些简单的配置&#xff0c;Maven 就可以自动完成项目的编译、测试、打包、发布以及部署等工作。Maven 是…

微信小程序备案流程

微信小程序备案流程 &#x1f4d4; 千寻简笔记介绍 千寻简笔记已开源&#xff0c;Gitee与GitHub搜索chihiro-notes&#xff0c;包含笔记源文件.md&#xff0c;以及PDF版本方便阅读&#xff0c;且是用了精美主题&#xff0c;阅读体验更佳&#xff0c;如果文章对你有帮助请帮我…