vue基于ElementUI/Plus自定义的一些组件

vue3-my-ElementPlus

源码请到GitHub下载使用MyTable、MySelect、MyPagination

置顶|Top

| 使用案例:

1.0 定义表格数据(测试使用)

js 复制代码
data() {
  return {
    tableData: [],
    value:[],
    valueList: [],
  };
},

// 构造表格测试数据
    // 1 第一行:列名,该行是一个数组
    let columns = []
    for (let i = 0; i < 10; i++) {
      columns[i] = 'column' + i
    }
    // 2 其他行:表格数据值,每一行的一个对象
    let list = [];
    for (let j = 0; j < 9999; j++) {
      // 每一行的数据对象
      let obj = {}
      for (let i = 0; i < columns.length; i++) {
        obj[columns[i]] = i + 'value' + j
      }
      list.push(obj);// 存储每一行到数组
    }
    this.tableData = [columns, list] // 表格数据请传入这个数组
    console.log('构造表格数据:', list, "\ncolumns:", columns)

    // 获取某一列的数据,提供给MySelect组件:
    let i = 6;// 假设获取第6列的数据
    this.valueList = list.map(obj => ({
      value: obj[columns[i-1]],
      label: obj[columns[i-1]]
    }));

1.1 MyTable

html 复制代码
<MyTable :table-data="tableData"/>

1.2 MySelect

html 复制代码
// 其中 initValue 为初始化数据,必须传入一个数组,形式为["","","",...]
// 其中每一个字符串的值是 valueList 数组的 value(当然,也可以不是)
<MySelect :initValue="[]"
          :valueList="valueList"
          :placeholder="'placeholder'"
          :multiple="true"
          @selectorChanged="(e)=>value=e"
          @selectorCleared="(e)=>value=e"/>

1.3 MyPagination

html 复制代码
一般不独立使用,已经内置在上面两个组件中。

细节说明:

| 门槛:

  • 本仓库的组件依赖于 Element UI 或者 Element Plus的组件,需要用户已经熟悉使用相关组件
  • 理论上支持vue2vue3(开发过程中使用选项式API风格,并尽量避免vue3新语法)
  • 此外,表格MyTable、下拉选择MySelect 都依赖的自定义的分页组件 MyPagination

| 使用场景:

  • 表格数据分析很常用,我们常使用Table
  • 对于表格中的每一列,我们常使用Select
  • 对于数量比较大情况,我们常使用Pagination

| 效果展示:

1.1 MyTable

1.2 MySelect

1.3 MyPagination

入上图所示,分为两种尺寸。

如上表格MyTable是大尺寸,可以显示更多信息

下拉选择框MySelect小尺寸,仅可以跳转。


| 实现功能:

1.1 MyTable

  • 底部分页的展示、跳转功能
  • 自定义标题(支持比官网更灵活的自定义)
  • 自定义过滤功能

1.2 MySelect

  • 底部分页跳转功能
  • 自定义过滤功能
  • 自定义单选 多选逻辑

1.3 MyPagination

  • 大 小两种尺寸,大的适合表格,小的适合选择框
  • 数据总数展示、每一页多少行数据、页面跳转(可输入)
相关推荐
永乐春秋22 分钟前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿23 分钟前
【前端】CSS
前端·css
ggdpzhk25 分钟前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic6 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā6 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue