本篇博客属于随手一写，建议主要看模板和类型定义那块的实现思路。另外代码中会有部分不规范的地方，只优化了一部分，比如在template里写了些逻辑代码，类型有些用了any等等，最近总感觉自己欠了很多技术债没还，但是周末又不想去还（/doge）。后面会出一期合辑，分享一下从零开始搭建组件库的过程，包含从组件写法到打包到发布npm私服的全过程。中间会穿插一些重点比如组件国际化兼容、打包、如何按需引入等等
效果描述：点击输入框弹出table面板，面板包括标题、列表分页、检索条件、确定取消安钮、单选全选框。面板回显已选中条目，切换页时仍能显示。 思路：组件中包括面板整体样式、标题 、按钮、分页组件；页面中将搜索条件、th、tr用slot传入组件模板中，形成每页的table。监听面板打开关闭的变量进行重新渲染，点击确定时页面父组件监听事件传出选中条目的数组，符合条件则执行面板关闭及后续。点击检索按钮时通
转载
2024-10-23 07:11:06
110阅读
封装element-ui表格
项目安装安装插件在使用element-ui的项目中，可以通过以下命令进行安装npm install vue-elementui-table -S复制代码在项目中使用在main.js中添加以下代码import ZjTable from 'vue-elementui-table’Vue.use(ZjTable)然后即可像下文中的使用方式进行使用表格配置为了满足团队快速开发
转载
2024-05-10 08:05:14
219阅读
echarts二次封装，适用于大屏，动态配置大屏，迁徙图，热力图，盒须图，桑基图等等关于echarts的二次封装，那走即用echarts所需数据调用方法js代码地图注意事项迁徙图展示数据格式地图数据 关于echarts的二次封装，那走即用echarts所需数据<!DOCTYPE html>
<html lang="en">
<head>
<me
<template>
<!-- 组件功能 -->
<!-- 根据element table组件进行二次封装, 依据数据 动态生成表格数据 参数查看底下props -->
<el-table
:data="tableData"
v-loading="tableLoading"
border
:header-cell
转载
2024-03-25 07:08:26
107阅读
如何封装Table组件由于最近在写一个测试网站，很多页面都需要用到表格，就做了一个表格封装的（根据自己需要的功能，仅列出部分）以下两个表格用了同一个组件 表一功能：可模糊查询、多选、分页、跳转详情 表二：标签、分页、表内文字样式不一样父组件需要在父组件定义好数据之后传到子组件中：<Table
:tableData="cpSchool || []"
:confi
转载
2024-05-30 23:53:03
607阅读
<template> <div> <!-- tableAll:{ stripe: false, // 是否带有斑马框 border: false, // 是否带有纵向边框 size: '', // table的尺寸可以没有 medium / small / mini\ lightRow: false ...
转载
2021-08-15 22:24:00
186阅读
2评论
2021/08/13更新，添加了 placeholder 自定义提示# 新建 Form.vuesrc/components/Form.vue<template>
<div>
<el-form
ref="form"
:model="form"
:inline="inline"
:rules="rules"
转载
2024-07-06 19:19:41
173阅读
时间：2022-05-15 文章目录问题描述问题分析1、如何二次封装 element UI 的 dialog 弹窗？2、实现过程（1）在 script 标签 中 props 传入值（2）绑定到 dialog 标签内主要结构：个人例子：解释3、弹窗为什么只能点击触发一次，第二次之后都没有反应？4、实现过程（1）在调用的页面写一个 close 函数传入；个人例子（2）在子组件内部进行绑定具体内部调用个
转载
2024-10-22 06:58:30
76阅读
element-ui Table二次封装 用的时候直接引入这个组件，用json就能实现自动表格
原创
2022-03-17 09:26:22
417阅读
先看问题还原图：问题描述：小编在做需求时，遇到了在el-table表格中加入多条数据，并且每条数据要通过el-select来选取相应的值，做到动态选择。解决方法： 思路：最开始，小编的实现效果是左边红色框的效果，选择其中一个时，其他的也对应赋值。主要是因为el-option的选项都是相同的，v-model 的值也是相同的。那让每一条 v-model 的值不同不就好了么！！&nb
转载
2024-03-30 18:26:18
291阅读
一、简介公司业务可能需要进行一些组件的封装，基于第三方elementPlus框架，进行符合UI设计原型的组件封装，这篇主要讲解Table表格的封装，目的主要是梳理封装的思路，下面的代码并不是提供完整的源码，因此不包含样式代码。二、环境准备webpack+vue3+elementPlus官方地址：https://element-plus.gitee.io/zh-CN/component/table.
转载
2024-02-28 10:33:16
1000阅读
elementUI-table之filters数据过滤用法前几天在做项目的过程中，用到了elementUI表格。当时的遇到的问题是需要通过从后台返回来的状态码，根据判断将它渲染成文字数据。由于我是刚接手代码，在代码中看到了filters这个属性，感觉可以用它实现。到最后才发现，其实filters是用来做筛选功能的，下面就和大家一起学习一下这个知识点吧。//截图来自elementUI-table官方
转载
2024-03-05 09:10:43
1128阅读
使用
Element-ui框架也很久了，最近项目中有个应用场景，如下图示： 如上截图，在这个
table表格中，有显示类文本，有image图片，有switch开关，还有数据编辑操作列。 话不多说，开撸： 首先，在项目文件夹的components中新建CommonTable.bue文件，先生成一个标准的vue页面模板:<template>
<div>
<
转载
2024-04-11 08:59:35
351阅读
使用背景使用Element-UI的表格功能，实现按住shift键点击连续勾选的功能。结果演示视频
shift批量勾选 实现内容按住shift后，可以实现任意两个勾选项直接内容的连续勾选松开shift后，连续勾选从新开始点击发货将勾选所有的数据进行发货勾选的行背景色高亮代码主要逻辑. 监听shift是否按下的状态. 在方法中判断 2.1 按住了shift 2.2.1 之前有多选起点 —>
转载
2024-10-14 18:43:09
71阅读
vue基于
element-ui
table二次
封装表格
封装的一些常用方法，如请求列表，render函数，复选框操作，合并行（合并列后续再添加），自适应高度； 列表请求支持两种方式： 1、子组件内请求（对于无需修改源数据的场景） 2、父组件请求，再把数据传到子组件（对于需要大量修改源数据的场景）子组件MyTable/index.vue<template>
<div
re
转载
2024-03-25 07:22:21
46阅读
在使用element表格合并后,发现鼠标只有移入第一个合并行时,合并的部分会高亮,移入其他行,不会高亮,这样效果看起来不是很好.查看了文档也没有直接的解决方法,就通过现有的方法处理了一下,解决了hover的问题因为实际使用时,表格数据都是后台返回的,所以这里就只写一下后台动态返回的数据设置hover样式 以两层合并数据为例因为表格合并的特性,合并后,只有这一个合并区域的第一行才有合并td
转载
2024-02-26 06:48:06
68阅读
Vue warn：“Error: if there’s nested data, rowKey is required.” 最近，在使用Element-UI组件库时，使用表格组件出现一个头疼的问题，表格中需要用到扩展列，打包上线之前没有问题，打包之后dist文件运行后表格数据不显示，在Console面板出现如下错误： 表面的意思是如果有嵌套的数据，需要在el-table标签中新增row-ke
转载
2024-05-28 13:53:53
761阅读
