• 在使用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.07 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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐