vue2.0+elementui 封装table组件

最新推荐文章于 2024-08-09 07:47:02 发布

会设计的前端工程师

最新推荐文章于 2024-08-09 07:47:02 发布

阅读量745

点赞数

文章标签： elementui 前端 vue.js

本文链接：https://blog.csdn.net/weixin_45581310/article/details/126407923

版权

本文介绍了Vue.js组件的使用，包括props的传递，如tableConfig和tableInfo等属性，用于定义表格的表头、内容、大小和分页等。组件内部通过v-for和v-if实现动态渲染，利用render函数进行自定义表头和内容展示，同时展示了如何监听和响应事件。示例中还提供了页面如何使用该组件，并展示了data中的配置示例，包括headerRender和render的自定义功能。

摘要由CSDN通过智能技术生成

1、props传值

  props: {
    // 表头
    tableConfig: {
      type: Array,
      default: () => {
        return [
          {
            label: "序号",
            prop: "index"
          },
          {
            label: "名字",
            prop: "name"
          },
          {
            label: "公司名称",
            prop: "cmyName"
          }
        ];
      }
    },
    // tableInfo
    tableInfo: {
      type: Object,
      default: () => ({
        list: [],
        count: 0,
        limit: 10
      })
    },
    size: {
      type: String,
      default: "small"
    },
    height: {
      type: [Number, String],
      default: 600
    },
    // 是否显示分页
    pagination: {
      type: Boolean,
      default: true
    },
    // 当前页码
    currentPage: {
      type: Number,
      default: 1
    },
    // loading
    loading: {
      type: Boolean,
      default: false
    }
  },

tableConfig table栏表头显示字段
tableInfo table内容信息（后台返回对象）包含list、当前页码、总数
size 大小
height table 高
pagination 是否显示分页
currentPage 当前页码
loading loading

2、组件

<template>
  <div>
    <el-table
      :data="tableInfo.list"
      :size="size"
      :max-height="height"
      border
      style="width: 100%"
      v