封装element中的table表格，实现可控并动态渲染（动态表头）

Posted 2022-07-28 yw00yw

• 在使用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: [phone],
                       area: '华北',
                       acreage: 90,
                       quantity: 444,
                       money: 34534,
                       add: '是'
                   ,
                   
                       id: 2,
                       name: 'ADS',
                       shop: 'sd',
                       sex: 's',
                       phone: [phone],
                       area: '华北',
                       acreage: 90,
                       quantity: 444,
                       money: 34534,
                       add: '是'
                   
               ]