table组件

JavaScript017

table组件,第1张

移动端(h5页,小标题)

PC端

移动端:Vant ,Cube-UI , NutUI

PC端:    element-ui  (饿了么),Ant Design of Vue(蚂蚁),iView(个人)

小程序:uniapp

学习组件库的基本方法是查文档,遇到困难时提 issue

1.首先通过命令: npm i element-ui -S 安装  -S为生产环境依赖,上线时也要一起打包发布

2.到main.js中引入并注册  注意:此时不仅要引入组件还要引入样式,写法固定可以直接到官网上面复制粘贴

3.剩下的就是用哪个组件直接参考组件文档 cv 使用即可,按照要求修改成自己想要的样式。

1.数据源由table组件的data属性来指定(不需要我们自己用v-for指令来循环)

2.data,决定表格的数据。其中的包含行列内容数据的属性是一个数组,数组中的每一个元素是一个对象,一个对象就表示一行。

3.列,决定表格结构。 列由el-table-column决定,列的数据就是数组中每一个对象(行)中的数据,将对象的属性赋给prop属性用来更改列的展示内容,下面有三个属性需要掌握:

①label:决定当前列显示出的标题

②prop:决定当前列数据的来源。对于表格来说, 它的数据是一个数组,每一个元素是一个对象,这里的prop值就是这个对象中的属性名

prop="date"。 这里的prop就是用来从每一个对象中取出属性名为date的 属性值。

③width: 用来设置列的宽度。如果不设置,它会自适应。

data中的数据就是  列  所需要携带的属性,行中有列

当我们想要渲染一些自定义的内容,例如图片,操作按钮时,就需要在对应列中,使用 template  标签包裹我们的自定义渲染内容,这时用的就是自定义插槽的机制

要自定义内容:1. 删除prop属性   2.用 插槽

例:想要将数字转换成对应代表的男女

store文件夹:为table设计了一组私有的store数据,类似(vuex, redux),这个一会详细讲。

config.js: 一些配置和默认信息,包括默认宽度之类的

dropdown.js: 提供点击后产生dropdown的一些基础方法

filter-panel.vue: 渲染过滤面板的

layout-observer.js: 布局使用的一个Observer,里面提供了一些基础方法,主要包括两点:1.column变化时,动态更新显示宽度,2.table在进行滚动时,计算滚动位置。

table-body, table-column, table-footer, table-header,这个四个顾名思义都是分别负责渲染对应的body,column,footer,header

table-layout.js: 定义了一个TableLayout的基础类,内部建立了一个观察者模式。

table.vue: 组合上面几个渲染模块,渲染整个table组件

util.js: 一些工具方法

Watcher实际上是利用vue构造出的一个子类,提供了state状态包括列数据、选择数据、过滤数据、排序数据等,并且提供了一些列数据处理的方法(排序,过滤等)。

这里将这三个文件的内容通过mixin混入

current.js

current.js主要是处理current row变化的方法,row数据变更,以及事件的抛出。

expand.js

expand文件主要提供处理扩展行的几个方法

tree.js

tree.js主要是提供了树形数据的节点更新,序列化等方法

这里为watcher添加了mutations的原型方法,熟悉store设计理念的都能理解,修改store数据必须要通过mutation方法保证数据流向的清晰

helper这里理解为提供createStore, mapStates两个方法,

createStore方法主要是创建store对象,而mapState提供了把state映射到实例数据上的功能。在table.vue中使用创建store

在data中创建store