VUE element-ui 写个复用Table组件的示例代码

前端之家收集整理的这篇文章主要介绍了VUE element-ui 写个复用Table组件的示例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

饿了么的table组件功能很强大,对于项目中的各种表格基本够用,但是……个人对于它以列为单位的操作不习惯 =。=所以改成了另一种方式(我不会告诉你其实本质没变)。

项目中表格较多,所以复用性最重要

步骤一

先来个基本的表格展示

官例的tableData

table.vue

步骤二

简化一下表格:

步骤三

复用table.vue就是————给它数据的同时告诉它我的字段名呗

新建一个父组件sl_table.vue

table.vue就更简单了

修改table的形式

列宽度

这个较为简单,可以直接加个属性

table.vue

...

自定义模板列

如果我们需要告诉组件哪个是自定义的列,所以添加一个属性operate

table.vue

//sl_table.vue {{ scope.row.date | DateFilter }} ... data(){ return { tableData: [...] tableKey: [{ name: 'date',operate: true },{ name: '姓名',operate: false },{ name: '地址',value: 'address',operate: false }] } },filters: { DateFilter(){...} } ...

表格展开行

类似宽度,只要sl_table.vue传入一个isExpand的属性。这里加个每次只能展开一行的效果

<sl-table :tableData="tableData" :tableKey="tableKey" :isExpand="true" :isExpandOnly="true">
<template slot="expand" scope="scope">
{{...expand something}}

...

table.vue

... props: ['tableData','tableKey','isExpand','isExpandOnly'],methods: { handleExpand(row,is_expand){ if(this.isExpand && this.isExpandOnly){ this.$refs.raw_table.store.states.expandRows = expanded ? [row] : [] } } }

其他的(排序、多选)操作也是类似添加。。。多不赘述。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的Vue相关文章