vue封装全局loading组件,vue table插件

　　表格作为数据显示组件，在日常开发中经常用到。本文主要介绍vue.js管理后台中关于表格组件打包的相关信息，文中详细介绍了样例代码，有需要的朋友可以参考一下。

问题分析

为什么封装

　　为什么一开始就要封装？是因为对技术的追求吗？不是，是因为我懒，不想一直粘贴复制代码，所以想封装表格。当创建一个新表时，我只需要填写数据。

封装的内容都有哪些

　　主要有两个组件，一个是表组件，一个是分页组件。

　　了解了这一点，就可以开始封装组件了。

封装table组件

确认数据格式

　　首先确定数据格式。我们需要查看el-table组件。

　　El-table:data= table data style= width:100%

　　El-table-column prop= date label= date width= 180 /

　　El-table-column fixed=右 label= operation width=100

　　模板槽-范围=“范围”

　　El-button @ click= handle click(scope . row) type= text size= small 视图/el-button

　　El-button type= text size= small 编辑/el-button

　　/模板

　　/El-表格-列

　　/el-table

　　现在让我们考虑数据类型，如lebel、prop、widht按钮类型、事件等。

　　设paramsType={

　　数据：数组，//数据

　　正在加载：布尔型，

　　selectionShow:布尔型，

　　列：数组=[

　　{

　　标签:字符串，

　　道具：字符串，

　　过滤器：功能，

　　isSlot:布尔型，

　　宽度：数字，

　　tempalte:函数，

　　btns:数组=[

　　{名称：字符串，

　　btnType:字符串，

　　clickType: String，

　　routerType: String，

　　url:字符串，

　　查询：函数，

　　btnClick:函数

　　}

　　]

　　}

　　]

　　}

　　定义了No之后。数据文件，我们就可以开始封装组件了。

封装组件

封装全局组件

　　全局组件之所以打包是为了省事，所有的目的都是为了偷懒。

　　在src下创建一个组件文件，并在其中编写我们的组件。我们建议将每个组件放在一个单独的文件夹中进行维护。

　　创建自己的table.vue组件。我的名字叫弗莱普。先不说内容，先说参考。

　　全局使用

　　将FrTable文件导入components下的index.js文件，遍历此处的所有组件，并导出。

　　代码如下：

　　从导入TrTable。/FrTable/index

　　常量组件=[TrTable]

　　const install=(Vue)={

　　components.map(component={

　　Vue.component(组件名，组件)

　　})

　　}

　　if(窗口类型！==未定义窗口。Vue) {

　　安装(窗口。Vue)

　　}

　　导出默认值{

　　安装

　　}

　　然后导出到main.js并通过Vue.use()使用组件，如下所示

　　从“@/components/index”导入globalComponents

　　Vue.use(全局组件)

　　页面的使用

　　fr-表/

table组件封装

　　考虑的问题

　　表格中有多少个案例，

　　正常数据类型显示

　　独特的显示模式

　　有操作按钮

　　对于第一种，我们其实不需要过多操作，只需要通过For循环进行渲染即可。

　　第二个其实还好，我们可以通过slot定制。

　　第三，按键的操作。其实按钮的种类很多。

　　按钮的类型

　　按钮的正常使用，点击功能

　　这个按钮起跳跃的作用。

　　这个按钮用来打开新的一页。

　　该按钮用作自定义事件。

　　代码的编写

　　通过以上，我们已经分析了表的所有问题。现在我们只需要输入代码。

　　第一个案例

　　El-table:data= data border:loading= loading

　　！-检查-

　　El-table-column v-if= selection show type= selection width= 50 align= center :reserve-selection= true /

　　模板v-for=(item，index) in columns

　　El-表-列：key=index v-bind=item

　　！-自定义表头-

　　模板v-if= item。自定义标头“slot=”标头

　　slot :name=item.headerProp /

　　/模板

　　模板槽-范围="范围"

　　span v-html=handleFilter(item，scope.row，item.prop) /

　　/模板

　　/El-表格-列

　　/模板

　　/el-table

　　这里我们可以看到手柄过滤器方法

　　这个方法来处理数据，

　　数据类型分为正常数据类型，需要转化的数据类型，模板转化的数据类型，

　　代码如下

　　手柄过滤器(项目、值、属性){

　　设值=值[属性]

　　如果(项。templet)值=项目。模板

　　返回项目。筛选？这个10.95美元选项。过滤器[项目。filter](val[prop]):值

　　第一种情况比较简单，只是简单的数据渲染，和定制化的表头渲染，上边总体的是多选功能正常的表单

　　第二种情况

　　自定义的列表

　　模板槽-范围="范围"

　　！-自定义内容-

　　狭槽

　　v-if=item.isSlot

　　:name=item.prop

　　:row=scope.row/

　　/模板

　　自定义的类别，我们只需要isSlot设置为真实姓名为道具，世界其他地区为数据

　　第三种

　　第三种按钮分四种情况

　　模板v-if=item.btns

　　埃尔按钮

　　 item.btns 中的v-for=(btn，I

　　:key=i

　　先生10

　　:size=btn.mini？ btn.mini:小号

　　:type=btn.type？btn.type:"主"

　　@ click= btnclicfunc(BTN，scope.row)

　　/el-button

　　/模板

　　按钮其实还是循环渲染的，主要是事件的分析，通过btnClickfunc事件操作。

　　btnClickfunc(列，行){

　　常量路径={

　　[column.routerType]: column.url，

　　查询：column.query？column.query(row):" "

　　}

　　如果(列。点击type===路由器){

　　这个10.99 $ router . push(路径)

　　} else if(列。单击type=== router _ blank ){

　　const routeData=this .$router.resolve(路径)

　　window.open(routeData.href， _blank )

　　} else if(列。点击类型=== BTN点击){

　　column.btnClick(row)

　　}否则{

　　这个emit( btnclicfunc ，{ column: column，row: row })

　　}

　　分不同的类型，我们做不同的处理。

　　props传参的值

　　当前的参数，和我们定义的参数是一致的，因此代码如下

　　//数据

　　数据：{

　　类型：数组，

　　必填：真

　　//表头参数

　　列：{

　　类型：数组，

　　必填：真

　　正在加载：{

　　类型：布尔型，

　　默认值：错误

　　//多选框选择

　　选择显示：{

　　类型：布尔型，

　　默认值：错误

　　自此，只剩下了组件的使用方式了

　　组件的使用

　　神父表

　　ref=mt

　　:loading=loading

　　:data=list

　　：列="列"

　　/fr-表格

　　大致如下，如果需要使用多选的时候，自行定义方法，排序也一样。

分页组件封装

　　参考元素分页组件

　　埃尔分页

　　style= margin-top:40px；

　　背景

　　:page-size=pageLimit

　　:total=total

　　：当前页面=当前页面

　　@ current-change= handleCurrentChange

　　handleCurrentChange(val) {

　　控制台。日志(瓦尔)

　　}

数据定义

　　定义如下：

　　总数：数量，

　　页面限制：数字，

　　当前页面：数字，

封装