Vue组件(30)封装一下数据列表的控件

Chase620 等级 373 0 0

UI库的 table

好像前端喜欢叫 table,而后端喜欢叫grid。就是现实数据的列表。当然table还有其他的含义,UI库的table也是有其他的功能的。

而数据列表控件其实也没啥好封装的,各种功能UI库都提供了,一般使用也是很方便的,只是为了我的那种想法还是需要小小的封装一下。

功能

  • 锁定行列(UI库自带)
  • 多选(整理)
  • id (设置)
  • 字段显示顺序(设置)
  • 字段属性(设置)

属性

  • 基础属性
 props: {
    controlId: { // 101 gridID,必填
      type: Number,
      required: true
    },
    height: { // table的高度
      type: Number,
      default: 300
    },
    colOrder: { // 字段显示的顺序
      type: Array,
      default: () => []
    },
    fixedIndex: { //  锁定的列数
      type: Number,
      default: 0
    },
    idName: { // 主键字段的名称
      type: String,
      default: 'id'
    },
    'data-selection-ids': Array, // 选择的记录的ID集合
    'data-list': { // 绑定的数据
      type: Array,
      default: () => []
    }
    ...
} 
  • colOrder
    table组件会遍历这个数组,取出来id,然后到 itemMeta 里面取出来字段的具体属性,绑定到 el-table-column ,这样可以方便调整字段的显示的先后顺序。

  • height
    设置高度才可以实现锁定行列的功能

  • fixedIndex
    锁定多少列,从左面开始数。

  • idName
    主键字段的名称,默认是id。看官网例子,没有提到id,选择记录的时候,返回的是整条记录,这个倒是方便,需要哪个就取哪个。
    只是一般大多都是需要一个ID,比如做批量删除的时候,要提交给后端选择的id集合。

所以这里可以直接返回选择的id集合。

  • data-selection-ids
    这个就是用户选择的记录的id集合,可以使用v-model的形式绑定,不过好像名称有点长,是不是应该弄个简单点的名称,比如dataIds?

  • data-list
    要显示的数据集合,数组形式。

设置高度、锁定行列等信息,还需要设置主键字段的名称,这样便于获取选择的记录的ID。

  • 字段属性
 label: '公司名称',
      prop: 'companyName',
      width: 120,
      align: 'left/center/right',
      'header-align': 'center' 

这几个是依据 element-plus 的 table 的 el-table-column 的需求来设置的。设置表头、绑定的字段名称和宽度。然后还应该加上对齐方式、格式化等功能。找了半天终于找到了 align,还有 formatter。

Vue组件(30)封装一下数据列表的控件

0001基本的列表.png

目前这个控件只想实现这几个功能,一般的列表需求大概可以满足了。
其他功能会封装成其他的控件,比如批量修改控件、n级分类控件等。

然后就可以做综合性的增删改查了。

调用方式

const gridItemMeta = {
    101: {
      id: 101,
      label: '编号',
      prop: 'id ',
      width: 120
    },
    102: {
      id: 102,
      label: '公司名称',
      prop: 'companyName',
      width: 120
    },
    103: {
      id: 103,
      label: '建立日期',
      prop: 'date',
      width: 120
    },
    104: {
      id: 104,
      label: '联系人',
      prop: 'name',
      width: 120
    },
    ...
}

const girdMeta = reactive({
      controlId: 1001,
      height: 250, // 高度
      colOrder: [101, 102, 103, 104, 105, 106, 107, 108], // 显示顺序
      fixedIndex: 0, // 锁定的列数
      itemMeta: gridItemMeta
}) 

还是老规矩,属性都可以做成json的形式,可以放在单独的 json 文件里面单独加载,这样增删改查需要的几个控件的属性就都弄到了json文件里面,然后呢,猜猜可以实现什么神奇的功能呢?

本文转自 https://www.jianshu.com/p/381f2bc4d769,如有侵权,请联系删除。

收藏
评论区

相关推荐

Android webview 与 js(Vue) 交互
js 与原生交互分为两种情况:js 调用原生方法,原生调用 js 方法。 本文将对这两种情况分别讲解,H5 端用 vue 实现。 一、前期准备(Vue项目准备) 本文的 H5 端用Vue 实现,所以在正式开始前先把 Vue 项目环境准备好。 项目写好后,执行 npm run serve 命令启动项目,启动成功后会在命令
Vue 组件通信方式及其应用场景总结
前言 相信实际项目中用过vue的同学,一定对vue中父子组件之间的通信并不陌生,vue中采用良好的数据通讯方式,避免组件通信带来的困扰。今天笔者和大家一起分享vue父子组件之间的通信方式,优缺点,及其实际工作中的应用场景 首先我们带着这些问题去思考 1 vue中到底有多少种父子组件通信方式? 2 vue中那种父子组件最佳通信方式是什么? 3
基于Vue实现一个有点意思的拼拼乐小游戏
笔者去年曾写过一个类似的拼拼乐小游戏,技术栈采用自己的Xuery框架和原生javascript实现的,脚手架采用gulp来实现,为了满足对vue的需求,笔者再次使用vue生态将其重构,脚手架采用比较火的vuecli。 前言 为了加深大家对vue的了解和vue项目实战,笔者采用vue生态来重构此项目,方便大家学习和探索。技术栈如下: vuecli4
了解Vuex状态管理模式
1 Vuex是什么呢?它是Vue的状态管理模式,在使用vue的时候,需要在vue中各个组件之间传递值是很痛苦的,在vue中我们可以使用vuex来保存我们需要管理的状态值,值一旦被改变,所有引用该值的地方就会自动更新。是不是很方便,很好用呢? vuex是专门为vue.js设计的状态管理模式,集中式存储和管理应用程序中所有组件的状态,vuex也集成了vue的
史上最全前端面试题(但是没有答案 自己百度 手动狗头!)
Vue面试题 生命周期函数面试题 1.什么是 vue 生命周期 2.vue生命周期的作用是什么 3.第一次页面加载会触发哪几个钩子 4.简述每个周期具体适合哪些场景 5.created和mounted的区别 6.vue获取数据在哪个周期函数 7.请详细说下你对vue生命周期的理解? vue路由面试题 1.mvvm 框架是什么? 2.vuerout
Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。 5.1. Vue实例初始
前端技术栈:5分钟入门VUE+Element UI
目录前端技术栈:5分钟入门VUEElement UI前言2021了,VUE都出3.0了,还不开始学习VUE?那不是一个全栈攻城狮的自我修养,虽然VUE出3.0了,但是入门还是建议VUE2.0 Element UI,毕竟3.0还要等养肥了在学,现在教程太少,学习2.0之后在学3.0也能更加理解为什么要这么去改进VUE是啥?简单来说就是
Vue组件(30)封装一下数据列表的控件
UI库的 table好像前端喜欢叫 table,而后端喜欢叫grid。就是现实数据的列表。当然table还有其他的含义,UI库的table也是有其他的功能的。而数据列表控件其实也没啥好封装的,各种功能UI库都提供了,一般使用也是很方便的,只是为了我的那种想法还是需要小小的封装一下。功能 锁定行列(UI库自带) 多选(整理)
「Vue — 插件」导入导出excel表格vue-xlsx-table
1:npm install vuexlsxtable save(excel转json)2:在main.js中 jsimport vueXlsxTable from 'vuexlsxtable';Vue.use(vueXlsxTable, {rABS: false});3:在需要使用的页面中 js<vuexlsxtable @
介绍 | Vue3中文文档
已经了解 Vue 2,只想了解 Vue 3 的新功能可以参阅 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与以及各种 结合使用时
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度)
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度)(https://www.zhihu.com/people/huobodexiaobaiyang).css1cd9gw4{marginleft:.3em;}545 人赞同了该文章前言
Vue 3 计划放弃支持 IE11
Vue.js 作者尤雨溪就 Vue 3 支持 IE11 的计划提交了新提案。提案摘要:1. Vue 3 将不会支持 IE11 2. 原定投入 Vue 3 IE11 支持的精力将投入给 2.7,移植 3.x 兼容的新功能,包括: Composition API \<script setup\ 以及其它新的单文件组件特性
npm发布包以及更新包还有需要注意的几点问题(这里以发布vue插件为例)
前言在此之前,你需要去npm官网注册一个属于自己的账号,记住自己的账户名以及密码、邮箱,后面会用的到。第一步,安装webpack简易框架vue init webpacksimple marquee 这里会用到vue init 命令,如果你的cli版本是3或者以上,那么在此之前你需要安装vue/cliinit npm install g @vue
Vue 从安装到创建项目
1.安装Node可以直接在官网中下载安装默认自动安装Node和NPM(Node Package Manager) 完成后检查安装版本:node v npm v2.安装webpack webpack全局安装npm install webpack g3.安装vue脚手架 全局安装脚手架3npm install @vue/cli g 备注
vue项目无配置文件解决方案
问题在开发vue项目时,需要重新设置项目的启动端口,发现项目目录中并没有相关的配置文件【config目录】vue脚手架版本【通过vue version查询】:@vue/cli 4.5.13解决方案在vue项目根目录下创建vue.config.js配置文件vue.config.jsmodule.exports devServer: d