element Ui table表格二次封装

最新推荐文章于 2023-12-29 12:15:12 发布

原创最新推荐文章于 2023-12-29 12:15:12 发布 · 875 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ui #javascript #前端

文章讲述了如何在Vue应用中实现一个具有动态列、标签、按钮操作的表格，包括数据请求、分页控制和组件间的交互。作者提到了使用axios进行数据获取，以及如何通过$attrs和函数式组件处理特殊内容的渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现功能

1. 表格内容的正常显示

2.表格可添加标签、按钮或者其它操作功能

3.宽度高度，对齐等可直接使用

4.分页器进行二次封装

完整代码

home页面（注：render里写法有些可能会报jsx错，是因为解析不了在script里写jsx就可以了）

<template>
  <div class="home">
    <div>
      <HelloWorld :data="tableData" :columns="columns" :pagination="pagination" @page-change="handlePageChange"
        @size-change="handleSizeChange" @selection-change="handlechange"></HelloWorld>
    </div>

  </div>
</template>

<script lang="jsx">

import tabelMixin from './tabelMixin'
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'HomeView',
  mixins: [tabelMixin],
  components: {
    HelloWorld,


  },
  data() {
    return {
      tableData: [],
      columns: [
        {
          prop: 'employeeName',
          label: '姓名',
          width: '300'
        },
        {
          prop: 'govEmpCellPhoneNo',
          label: '手机号码',

        },
        {
          prop: 'nation',
          label: '民族',

        },
        {
          prop: 'cz',
          label: '操作',

          render: (data) => {
            return (
              <div>
                <span onClick={() => { this.handleName(data) }} style="color:blue;">查看 
                </span>
                <span onClick={() => { this.handleDel(data) }} style="color:red;margin-                    
                left: 10px;">删除</span>
              </div>
            )

          }
        }
      ]
    }
  },
  methods: {
    handleName(form) {
      console.log(form);
    },
    handleDel(form) {
      console.log(form);
    },

    handlechange(val) {
      console.log(val)
    }

  },

}
</script>

tabelMixin.js 抽离出请求数据和分页的混合也可以把筛选，重置等方法写里面

import axios from "axios"
export default {
    data() {
        return {
            // 分页
            pagination: {
                pageNum: 1,
                pageSize: 10,
                total: 0,
                pageSizes: [10, 20, 30, 40, 50],
            },
            // 表格数据
            tableData: [],

        }
    },
    created() {
        this.handleQuery()

    },
    methods: {
        handleQuery() {
            const { pageNum, pageSize } = this.pagination

            let data = {
                pageNum: pageNum,
                pageSize: pageSize,
                areacode: '330109'
            }
            //请求数据
            axios({
                url: "/api/bas_employee/getZMXHUser",
                method: 'post',
                data,
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
                    'Authorization': 'admin_accessToken_c42c7679-53c4-4c58-9564-d97ed38277f1_1695197558973'
                }
            }).then(res => {
                this.tableData = res.data.rows

                this.pagination.total = res.data.total
            })


        },

        // 改变页码
        handlePageChange(page) {
            this.pagination.pageNum = page
            this.handleQuery()
        },

        // 改变页数
        handleSizeChange(size) {
            this.pagination.pageSize = size
            this.pagination.pageNum = 1
            this.handleQuery()
        },
    },
}

components/HelloWorld.vue 组件页面

使用了$attrs来传递组件之间的数据，保留组件的属性和功能，对于特殊的类容（如按钮，不同的类容）用函数式组件来渲染。（注：vue3 直接用$attrs就可以了，vue2 使用v-bind 和 v-on，）

<template>
  <div style="width: 100%;margin: 0 auto;">

    <el-table :="$attrs" :header-cell-style="{ fontSize: '15px' }" empty-text="暂无数据">

      <el-table-column v-for="(item, index) in columns" :key="index" :="item">
        <template v-if="item.render" v-slot="scope">
            //使用函数式组件进行渲染
          <FuncBtn :render="() => item.render(scope.row)" />
        </template>
      </el-table-column>
    </el-table>

    <div style="width:100%; height:100px;">
      <el-pagination @size-change="handleSizeChange" background @current-change="handleCurrentChange"
        :current-page="pagination.pageNum" :page-sizes="pagination.pageSizes" :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
      </el-pagination>

    </div>

  </div>
</template>
 
<script lang="jsx">
import FuncBtn from '@/views/FuncBtn'
export default {
  name: 'ele-table',
  components: {
    FuncBtn
  },
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    pagination: Object
  },
  data() {
    return {

    }
  },
  mounted() {

  },
  methods: {


    // pageSize 改变时会触发
    handleSizeChange(args) {
      this.$emit('size-change', args)
    },
    // currentPage 改变时会触发
    handleCurrentChange(val) {
      this.$emit('page-change', val)
    },
  },
}
</script>

FuncBtn.js

export default {
    functional: true,
    props: {
        render: Function
    },
    render(createElement) {

        return <div>{createElement.render()}</div>
    }
}