封装element中的table表格,实现可控并动态渲染(动态表头)
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
- 在使用vue+element做管理系统的时候,使用到了element中的表格,但是element的表格只需要传递进去数据,然后写死表头即可渲染。
- 但是在追求组件化开发的vue项目中,特别是有很多表格的管理系统的时候,如果写死表头,并且每个组件中写自己的表格,不仅浪费时间而且消耗性能。
- 真的需求是在需要table的组件中引入同一个table即可,而table通过父组件传递数据来动态渲染。上一节实现了动态渲染,但是无法操作指定的列,难免有时候会在表格中点击某一列操作数据,而element table提供了每个单元格点击事件,不符合要求,所以下面对element table做了简单的封装,可以完美实现可复用、可定制、动态渲染的表格。
子组件中的table封装,并接受父组件传递过来的数据
<el-table
:data="this.tableData"
height="400px"
max-height="400px"
size="small"
row-class-name="row"
cell-class-name="column"
:row-style="setRowStyle"
:cell-style="setColumnStyle"
:highlight-current-row="true"
fit
>
<el-table-column
v-for="(item, index) in tableLabel"
:key="index"
:prop="item.prop"
:width="item.width"
:label="item.label">
<template slot-scope="scope">
<el-button type="text" size="small" @click="handleGoods(scope.row)" v-if="item.isOpera">{{scope.row[item.prop]}}</el-button>
<div v-else>{{scope.row[item.prop]}}</div>
</template>
</el-table-column>
</el-table>
props: {
tableData: {
type: Array,
default: []
},
tableLabel: {
type: Array,
default: () => {
return []
}
}
}
父组件中向子组件传递table数据和表头数据,并设定自定义可操作列
<router-table :tableData="tableData" :tableLabel="tableLabel"></router-table>
import RouterTable from '../../../../components/homeRouter/RouterTable'
components: {
RouterTable
},
data() {
return {
tableLabel: [
{label: '', width: '40', prop: 'id'},
{label: '农户名称', width: '', prop: 'name', isOpera: true},
{label: '所属中心店', width: '', prop: 'shop', isOpera: true},
{label: '性别', width: '', prop: 'sex'},
{label: '电话', width: '', prop: 'phone'},
{label: '所在地区', width: '', prop: 'area'},
{label: '土地面积(亩)', width: '', prop: 'acreage'},
{label: '累计购买数量(T)', width: '', prop: 'quantity'},
{label: '累计购买金额(元)', width: '', prop: 'money'},
{label: '是否管理端添加', width: '', prop: 'add'},
],
tableData: [
{
id: 1,
name: '中国男',
shop: '阳光超市',
sex: '男',
phone: 18383929383,
area: '华北',
acreage: 90,
quantity: 444,
money: 34534,
add: '是'
},
{
id: 2,
name: 'ADS',
shop: 'sd',
sex: 's',
phone: 18383929383,
area: '华北',
acreage: 90,
quantity: 444,
money: 34534,
add: '是'
}
]
}
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献5条内容
所有评论(0)