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

发布时间：2020-12-17 02:43:07 所属栏目：百科来源：网络整理

导读：饿了么的table组件功能很强大，对于项目中的各种表格基本够用，但是……个人对于它以列为单位的操作不习惯 =。=所以改成了另一种方式（我不会告诉你其实本质没变）。项目中表格较多，所以复用性最重要步骤一先来个基本的表格展示官例的tableData table.v

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

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

步骤一

先来个基本的表格展示

官例的tableData

table.vue

步骤二

简化一下表格：

步骤三

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

新建一个父组件sl_table.vue

table.vue就更简单了

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] : [] } } }

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!