当前位置: 首页 > news >正文

element-ui 封装 表格

一、封装表格组件

<template><el-table :data="list" :default-sort="{ prop: 'date' }" style="width: 100%"><template v-for="item in tableColumn"><el-table-columnv-if="item.filters":prop="item.prop":label="item.label":sortable="item.sortable":filters="item.filters":filter-method="filterHandler(item.filterMethod)"/><el-table-columnv-if="!item.filters":prop="item.prop":label="item.label":sortable="item.sortable"/></template></el-table>
</template><script scoped>
export default {data() {return {list: [],tableColumn: [],};},props: {data: {type: Array,default: [],},column: {type: Array,default: [],},},watch: {data: {immediate: true,deep: true,handler(val) {if (val.length) {this.list = JSON.parse(JSON.stringify(val));}},},column: {immediate: true,deep: true,handler(val) {if (val.length) {this.tableColumn = JSON.parse(JSON.stringify(val));}},},},methods: {// 如果没传,那么默认等值判断filterHandler(filterMethod) {if (filterMethod) {return item.filterMethod;} else {return (value, row, column) => {const property = column["property"];return row[property] === value;};}},},
};
</script>

二、使用方法

<template><div id="app"><Tabel :data="data" :column="column" /></div>
</template><script>
import Tabel from "@/components/Tabel.vue";
export default {components: { Tabel },data() {return {column: [{label: "日期",prop: "date",sortable: true,},{label: "姓名",prop: "name",filters: [{ text: "王小龙", value: "王小龙" }],},{label: "地址",prop: "address",},],data: [{date: "2016-05-02",name: "王小猪",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄",},{date: "2016-05-01",name: "王小龙",address: "上海市普陀区金沙江路 1519 弄",},{date: "2016-05-03",name: "王小海",address: "上海市普陀区金沙江路 1516 弄",},],};},
};
</script>

相关文章:

element-ui 封装 表格

一、封装表格组件 <template><el-table :data"list" :default-sort"{ prop: date }" style"width: 100%"><template v-for"item in tableColumn"><el-table-columnv-if"item.filters":prop"item…...

数据的使用、表关系的创建、Django框架的请求生命周期流程图

目录 一、数据的增删改查 1. 用户列表的展示 2. 修改数据的逻辑分析 3. 删除功能的分析 二、如何创建表关系 三、Django的请求生命周期流程图 一、数据的增删改查 1. 用户列表的展示 把数据表中得用户数据都给查询出来展示在页面上 查询数据 def userlist(request):&qu…...

Python基础教程:类--继承和方法的重写

嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 什么是继承 继承就是让类与类之间产生父子关系&#xff0c;子类可以拥有父类的静态属性和方法 继承就是可以获取到另一个类中的静态属性和普通方法&#xff08;并非所有成员&#xff09; 在python中&#xff0c;新建的类可…...

Three.js提供了多种类型的灯光

Three.js提供了多种类型的灯光&#xff0c;包括环境光、点光源、平行光源和聚光灯。这些灯光可以用来照亮场景中的物体&#xff0c;使其看起来更加真实。 环境光(AmbientLight)&#xff1a;环境光会均匀地照亮场景中的所有物体&#xff0c;没有方向&#xff0c;不能用来投射阴…...

精通Nginx(10)-负载均衡

负载均衡就是将前端过来的负载分发到两台或多台应用服务器。Nginx支持多种协议的负载均衡,包括http(s)、TCP、UDP(关于TCP、UDP负载均衡另文讲述)等。 目录 HTTP负载均衡 负载均衡策略 轮询 least_conn(最少连接) hash(通用哈希) ip_hash(IP 哈希) random(随…...

Hls学习(一)

1&#xff1a;CPU、DSP、GPU都算软件可编程的硬件 2&#xff1a;dsp在递归方面有所减弱&#xff0c;在递归方面有所增强&#xff0c;比如递归啊等&#xff0c;GPU可以同时处理多个进程&#xff0c;对于大块数据&#xff0c;流处理比较适用 3&#xff1a;为了提高运算量处理更多…...

Maven打包引入本地依赖包

Maven打包引入本地依赖包 SpringBoot 工程&#xff0c;Maven 在构建项目时&#xff0c;如何引入本地 Jar 包&#xff1f; 适合场景&#xff1a; 引用的依赖不在 Maven 仓库第三方公司提供的 SDK 包Maven 内网离线开发引入被定制改动过的 Jar 包 解决方法&#xff1a; 在 I…...

Docker常用命令及部署微服务项目

Docker常用命令及部署微服务项目 1、Docker常用命令 1、设置Yum源 yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo 2、安装docker yum -y install docker-ce 3、启动docker service docker start 4、验证 docker version 5…...

okhttp添加公共参数

在项目开发中很多时候后台都会给一些全局的公共入参&#xff0c;比如携带手机信息或者时间戳等字段。而我们在使用okhttp时&#xff0c;就需要我们单独就行二次封装处理了&#xff0c;对于请求全局参数&#xff0c;每次请求都要去写一次&#xff0c;那是肯定不行的。 所以就要我…...

基于SpringBoot的SSMP整合案例(开启日志与分页查询条件查询功能实现)

开启事务 导入Mybatis-Plus框架后&#xff0c;我们可以使用Mybatis-Plus自带的事务&#xff0c;只需要在配置文件中配置即可 使用配置方式开启日志&#xff0c;设置日志输出方式为标准输出mybatis-plus:global-config:db-config:table-prefix: tb_id-type: autoconfiguration:…...

android studio 修改图标

Android Studio 修改图标 简介 Android Studio 是一款由谷歌推出的用于开发 Android 应用程序的集成开发环境&#xff08;IDE&#xff09;。在开发过程中&#xff0c;我们可以根据自己的需求修改 Android Studio 的图标&#xff0c;以个性化我们的开发环境。 本文将介绍如何在…...

pytorch学习之第二课之预测温度

主要有以下几个步骤 第一&#xff1a;导入相应的工具包 第二&#xff1a;导入需要使用的数据集 第三&#xff1a;对导入的数据集输入进行预处理&#xff0c;找出特征与标签&#xff0c;查看数据特征的类型&#xff0c;判断是否需要标准化或者归一化处理 第四&#xff1a;构建神…...

基于Mahony互补滤波的IMU数据优化_学习笔记整理

这周自己被安排进行优化软件 IMU 姿态解算项目&#xff0c;之前自己只简单了解四元数&#xff0c;对IMU数据处理从未接触&#xff0c;通过这一周的学习感觉收获颇丰&#xff0c;在今天光棍节之际&#xff0c;&#xff0c;&#xff0c;用大半天的时间对这一周的收获进行整理&…...

c语言实现哈夫曼编码

要实现哈夫曼编码&#xff0c;需要以下步骤&#xff1a; 统计字符出现的频率构建哈夫曼树遍历哈夫曼树&#xff0c;给不同的字符赋予不同的编码将编码后的字符写入文件中 下面是一个简单的 C 语言实现&#xff1a; #include <stdio.h> #include <stdlib.h> #inc…...

Vuex:模块化Module :VCA模式

VCA中不支持辅助函数&#xff0c;因为辅助函数中是用this.$store&#xff0c;而VCA中没有绑定this的 由于使用单一状态树&#xff0c;应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时&#xff0c;store 对象就有可能变得相当臃肿。 这句话的意思是&#xff0c;…...

【uni-app + uView】CountryCodePicker 国家区号组件

1. 效果图 2. 组件完整代码 <template><u-popup class="country-code-picker-container" v-if="show" :show...

思科对路由器的配置

②对路由器R2进行配置 对路由器R2进行配置&#xff0c;先对各接口配置基本IP地址&#xff0c;然后配置动态路由协议。&#xff08;对实验步骤进行文字描述&#xff09; Router>enable //用户模式进入特权…...

实战Leetcode(三)

Practice makes perfect&#xff01; 实战一&#xff1a; 带环问题其实我们小学时就接触过&#xff0c;就比如在操场上比赛跑步的追击问题&#xff0c;这里也是一样&#xff0c;如果我们定义两个指针&#xff0c;一个快指针&#xff0c;一个慢指针&#xff0c;快指针走的快&…...

【PTE-day05 宽字节注入】

1、函数 过滤输入的函数: addslashes mysql_real_escape_string mysql_escape_string当字符的大小为一个字节时,称之为窄字节 例如ascii编码 当字符的大小为两个字节时,称之为宽字节 例如GB2312、GBK、GB8030 mysql使用GBK编码时,默认的会认为两个字符为一个汉字,前一个字…...

计算机网络期末复习-Part3

1、rdt1.0&#xff0c;rdt2.0&#xff0c;rdt3.0的底层信道模型 RDT 1.0: 完全可靠的底层信道&#xff0c;没有比特差错&#xff0c;也没有分组丢失。 RDT 2.0: 具有比特差错的底层信道&#xff0c;有比特差错&#xff0c;但没有分组丢失。 RDT 3.0: 具有差错和丢包的底层信道…...

浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

Redis:现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...

「全栈技术解析」推客小程序系统开发:从架构设计到裂变增长的完整解决方案

在移动互联网营销竞争白热化的当下&#xff0c;推客小程序系统凭借其裂变传播、精准营销等特性&#xff0c;成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径&#xff0c;助力开发者打造具有市场竞争力的营销工具。​ 一、系统核心功能架构&…...

基于江科大stm32屏幕驱动,实现OLED多级菜单(动画效果),结构体链表实现(独创源码)

引言 在嵌入式系统中&#xff0c;用户界面的设计往往直接影响到用户体验。本文将以STM32微控制器和OLED显示屏为例&#xff0c;介绍如何实现一个多级菜单系统。该系统支持用户通过按键导航菜单&#xff0c;执行相应操作&#xff0c;并提供平滑的滚动动画效果。 本文设计了一个…...

Java后端检查空条件查询

通过抛出运行异常&#xff1a;throw new RuntimeException("请输入查询条件&#xff01;");BranchWarehouseServiceImpl.java // 查询试剂交易&#xff08;入库/出库&#xff09;记录Overridepublic List<BranchWarehouseTransactions> queryForReagent(Branch…...

Python第七周作业

Python第七周作业 文章目录 Python第七周作业 1.使用open以只读模式打开文件data.txt&#xff0c;并逐行打印内容 2.使用pathlib模块获取当前脚本的绝对路径&#xff0c;并创建logs目录&#xff08;若不存在&#xff09; 3.递归遍历目录data&#xff0c;输出所有.csv文件的路径…...

深入浅出JavaScript中的ArrayBuffer:二进制数据的“瑞士军刀”

深入浅出JavaScript中的ArrayBuffer&#xff1a;二进制数据的“瑞士军刀” 在JavaScript中&#xff0c;我们经常需要处理文本、数组、对象等数据类型。但当我们需要处理文件上传、图像处理、网络通信等场景时&#xff0c;单纯依赖字符串或数组就显得力不从心了。这时&#xff…...