elementui-table封装

ElementUI Table 二次封装实战

原创已于 2023-03-15 11:18:46 修改 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript #前端

于 2023-03-15 11:15:20 首次发布

vue 同时被 3 个专栏收录

4 篇文章

订阅专栏

element-ui

2 篇文章

订阅专栏

组件化

2 篇文章

订阅专栏

本文介绍了如何基于ElementUI Admin Pro v2.15.13进行table组件的二次封装，旨在简化前端代码，提高复用性。通过动态数据渲染表头，允许自定义列参数，支持分页和自定义组件，降低开发复杂度。

一、介绍

背景：

基于 elementui admin pro 版本框架，组件库版本2.15.13

目的：

基于以上实现table组件的二次封装，使其使用更加方便，减少代码量，提高复用性

总的来说就是把table的表头改成动态数据渲染，调用的时候将表头数据和表格数据传给ExTable子组件渲染，不用一行一行的写el-table-column，每列都可以自定义需要的参数还是很方便的，另外还可以加上分页，加上自定义组件根据render修改列数据展示内容

二、步骤解析

官方代码大家可以去elementui官方组件库

创建ExTable.vue组件，创建数据文件formData.js文件。
在ExTable.vue中添加table组件改造代码
ExTable.vue表格需要的表头数据

三、代码详情

ExTable.vue代码（不含样式）：

<el-table
            :data="tableData"
            border
            stripe
            style="width: 98%;margin-top:10px;"
          >
            <el-table-column
              v-for="(item, index) in userData"
              :key="index"
              :type="item.type || ''"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              :fixed="item.fixed || false"
              :align="item.align || 'center'"
            >
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              align="center"
              width="120"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click.native.prevent="editRow(scope.row)"
                >
                  修改
                </el-button>
                <el-button
                  type="text"
                  size="small"
                  style="color:#FD6164"
                  @click.native.prevent="deleteRow(scope.$index, scope.row)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
props: {
	tableData:{
		type: Object,
		default: (()=>[])
	},
	// 表头数据
	userData:{
		type: Object,
		default: (()=>{})
	}
}

formData.js代码如下：

const userData= [
  {
    type: 'index',
    label: '序号',
    width: '50',
    fixed: 'left'
  },
  {
    prop: 'name',
    label: '角色名称'
  },
  {
    prop: 'orgId',
    label: '机构'
  },
  {
    prop: 'createDate',
    label: '创建时间'
  }
]
export { userData }