vue-ele-protable

作用：

生成一个中后台常见的搜索页面，根据tableColumns直接生成searchForm table pagination

安装:

// npm
npm i vue-ele-protable -D

//yarn 
yarn add vue-ele-protable

快速使用:

// 在 main.js中全局使用，或者可在单独文件中注入

import VueEleProtable from 'vue-ele-protable'
import "vue-ele-protable/vueProtable.css"
import Vue from 'vue'

Vue.use(VueEleProtable);

简单案例:

<template>
  <div class="examplePage">
      <!-- 
          proTableRef     绑定当前父组件data中的接受 ref 的键，传入string类型
          proFormRef     绑定当前父组件data中的接受 ref 的键，传入string类型
必传       tableColumns    table 及 form 的配置
必传       tableData       table的数据
          formProps       form的所有属性 attrs都可写入
          tableProps      table的所有属性 attrs都可写入
必传总页数  paginationProps pagination的所有属性 attrs都可写入 ， 至少传入，其余不必须！！！！！！！！！！！！！！！！！！
          toolbar         工具栏渲染
必传       v-model         绑定搜索栏的数据对象
必传       @onSearch       抛出重置及搜索按钮事件
          loading         传入boolean，判断是否为数据获取中（调接口）
          customTable     传入回调函数(Node, tableProps, tableColumns) => { return Node }，可实现完全自定义table，Node为本身组件table节点
          @******         el-table自带的所有事件都可以透传获取执行 , 查看element-ui Table Events : [Title](https://element.eleme.cn/#/zh-CN/component/table)
      -->
    <vue-ele-protable
      proTableRef="proTableRef" 
      :tableColumns="tableColumns"
      :tableData="tableData"
      :formProps="{ labelSuffix: ' :' }"
      :paginationProps="{ total: 100 }"
      :otherRenders="otherRenders"
      :toolbar="toolbar"
      v-model="proFormData"
      @onSearch="onSearch"
      :loading="loading"
    />
  </div>
</template>
<script>

export default {
  data() {
    return {
      loading: false,
      proTableRef: {},
      proFormData: {},
      otherRenders: () => {
        return (
          <h1>标题</h1>
        )
      },
      toolbar: {
        left: [
          <el-button type="primary">新增</el-button>,
          <el-button type="success">批量导出</el-button>,
        ],
        right: [<el-button>全部导出</el-button>],
      },
      // 表格列配置，
      // 大部分属性跟 el-table-column 及 el-form-item 配置一样，可参考element-ui官网，单独想配置都放入其中
      // 比如: form的label宽: labelWidth: '200px', 对应列的宽度: width: 100, 列是否固定在左侧或者右侧，true 表示固定在左侧: fixed: true

      tableColumns: [
        {
          type: "selection",
          width: 55,
          hideInSearch: true,
        },
        {
          label: "id",
          prop: "id",
          placeholder: "请输入",
          hideInTable: true
        },
        {
          label: "姓名",
          prop: "name",
          placeholder: "请输入",
        },
        {
          label: "性别",
          prop: "gender",
          render: ({ row }) => {
            return row.gender === '1' ? '男' : row.gender === '2' ? '女' : '未知'
          },
          renderItem: () => {
            return (
              <el-select v-model={this.proFormData.gender}>
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
                <el-option label="未知" value="0"></el-option>
              </el-select>
            );
          },
        },
        {
          label: "操作",
          prop: "option",
          hideInSearch: true,
          render: (record) => {
            return (
              <el-button
                type="text"
                onClick={() => {
                  console.log(record);
                }}
              >
                编辑
              </el-button>
            );
          },
        },
      ],
      tableData: [
        { name: "男男", gender: "1", id: "1" },
        { name: "女女", gender: "2", id: "2" },
        { name: "未知", gender: "0", id: "0" },
      ],
    };
  },
  methods: {
    onSearch(params) {
      console.log(params);
    },
  },
};
</script>
<style lang="scss" scoped>
.examplePage {
  width: 100%;
  height: 100%;
  background-color: #fff;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}
</style>

预览效果

https://raw.githubusercontent.com/webguicai/vue-ele-protable/main/beifen/image.png

表格配置

具体参数可查看element-ui ，下方罗列部分

table: Table Attributes
https://element.eleme.cn/#/zh-CN/component/table#table-attributes
form: Form Attributes
https://element.eleme.cn/#/zh-CN/component/form#form-attributes

参数	说明	类型	可选值	默认值
label	对应 el-table-column 的 label	string	-	-
type	对应 el-table-column 的 type	string	selection/index/expand	-
prop	对应 el-table-column 的 prop	string	-	-
render	自定义渲染 table 中每一行值	function (record) { return xxx }	-	-
renderItem	自定义渲染 form 中每一项	function () { return node }	-	-
width	对应 el-table-column 的 width	string,number	-	-
hideInSearch	是否在搜索栏中隐藏	boolean	-	false
hideInTable	是否在表格中隐藏	boolean	-	false
align	对应 el-table-column 的 align	string	left/center/right	left
fixed	对应 el-table-column 的 fixed	string, boolean	true, left, right	-