sheryllyzhao_filter_table

基于Vue2和Element-UI的表单和表格组件库，提供易用的筛选表单和数据表格组件。

安装

npm install sheryllyzhao_filter_table --save

使用方法

全局引入

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import SheryllyzhaoFilterTable from 'sheryllyzhao_filter_table';

Vue.use(ElementUI);
Vue.use(SheryllyzhaoFilterTable);

组件说明

表单组件 (SelfFormTemp)

表单组件支持多种类型的表单元素，通过配置可以快速生成表单。

基本用法

<template>
  <self-form-temp
    :form-data.sync="formData"
    :filters="filters"
    :inline="true"
    :label-width="'100px'"
  />
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        age: '',
        date: '',
        type: ''
      },
      filters: [
        {
          type: 'input',
          label: '姓名',
          prop: 'name'
        },
        {
          type: 'number',
          label: '年龄',
          prop: 'age',
          settings: {
            min: 0,
            max: 100
          }
        },
        {
          type: 'datePicker',
          label: '日期',
          prop: 'date',
          settings: {
            type: 'date',
            valueFormat: 'yyyy-MM-dd'
          }
        },
        {
          type: 'select',
          label: '类型',
          prop: 'type',
          settings: {
            options: [
              { label: '类型1', value: '1' },
              { label: '类型2', value: '2' }
            ]
          }
        }
      ]
    }
  }
}
</script>

支持的表单类型

• input: 输入框
• select: 下拉选择框
• datePicker: 日期选择器
• cascader: 级联选择器
• textarea: 文本域
• upload: 文件上传
• number: 数字输入框
• switch: 开关
• radio: 单选框
• slot: 自定义插槽

表格组件 (FilterTableTemplate)

表格组件集成了筛选表单、数据表格和分页功能。

基本用法

<template>
  <filter-table-template
    :config="tableConfig"
    @selection-change="handleSelectionChange"
  />
</template>

<script>
export default {
  data() {
    return {
      tableConfig: {
        filters: [
          {
            type: 'input',
            label: '姓名',
            prop: 'name'
          },
          {
            type: 'select',
            label: '状态',
            prop: 'status',
            settings: {
              options: [
                { label: '启用', value: '1' },
                { label: '禁用', value: '0' }
              ]
            }
          }
        ],
        tableSettings: {
          api: this.fetchData, // 获取数据的API方法
          columns: [
            { prop: 'name', label: '姓名', width: '180' },
            { prop: 'age', label: '年龄', width: '120' },
            { prop: 'address', label: '地址' },
            {
              prop: 'status',
              label: '状态',
              render: (row) => {
                return row.status === '1' ? '启用' : '禁用';
              }
            },
            {
              prop: 'action',
              label: '操作',
              width: '180',
              render: (row) => {
                return [
                  {
                    type: 'button',
                    text: '编辑',
                    click: () => this.handleEdit(row)
                  },
                  {
                    type: 'button',
                    text: '删除',
                    click: () => this.handleDelete(row)
                  }
                ]
              }
            }
          ],
          showPage: true, // 是否显示分页
          field: {
            total: 'total', // 总数字段名
            list: 'list', // 列表数据字段名
            page: 'page', // 页码字段名
            limit: 'limit' // 每页条数字段名
          }
        }
      }
    }
  },
  methods: {
    // 获取数据的方法
    fetchData(params) {
      // 这里通常是调用API接口
      return this.$http.get('/api/data', { params });
    },
    handleSelectionChange(selection) {
      console.log('选中的行:', selection);
    },
    handleEdit(row) {
      console.log('编辑行:', row);
    },
    handleDelete(row) {
      console.log('删除行:', row);
    }
  }
}
</script>

API参考

SelfFormTemp Props

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | formData | 表单数据对象 | Object | {} | | filters | 表单配置数组 | Array | [] | | inline | 是否行内表单 | Boolean | true | | labelWidth | 表单标签宽度 | String | '' | | rules | 表单验证规则 | Object | {} | | selfKey | 自定义标识 | String | '' |

FilterTableTemplate Props

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | config | 表格配置对象 | Object | 见下方说明 | | selfKey | 自定义标识 | String | 'work' |

config 对象结构

{
  key: 'page', // 唯一标识
  filters: [], // 表单配置数组，格式同SelfFormTemp的filters
  tableSettings: {
    api: Function, // 获取数据的API方法
    params: Object/Function, // 额外的请求参数
    columns: [], // 表格列配置
    formmat: Function, // 自定义数据格式化函数
    showPage: Boolean, // 是否显示分页，默认true
    field: { // 字段映射
      total: 'count', // 总数字段名
      list: 'data', // 列表数据字段名
      page: 'page', // 页码字段名
      limit: 'limit' // 每页条数字段名
    }
  }
}

注意事项

1. 本组件库依赖于Vue2和Element-UI，请确保已正确安装并引入这些依赖。
2. 使用前请确保项目中已安装sass和sass-loader，用于样式处理。

版本信息

当前版本: 0.0.8