基于vue3 element plus form 表单的二次封装

已于 2022-06-29 11:53:19 修改
阅读量3.9k 收藏 14
点赞数 8
分类专栏： 各种组件 文章标签： 前端 javascript vue.js typescript es6
于 2022-06-29 11:35:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48192059/article/details/125514306
版权

记录一下开发中对form表单的二次封装及使用

前言

        在我们的日常工作中经常会使用到form表来满足提交需求，那么将form表单封装成组件将会大大提高我们的工作效率，避免更多重复代码的书写，只需一些简单的配置就轻松实现。

一、form表单的封装

<template>
  <div class='form'>
    <el-form
      :label-position="labelPosition"
      :inline="inline"
      :rules="rules"
      ref="formRef"
      :label-width="labelWidth"
      :model="fieldForm"
      :class="customClass"
    >
      <el-form-item
        v-for="(item, index) in fieldList"
        :key="index"
        :prop="item.field"
        :validate-on-rule-change="false"
        :style="{
          flexBasis: item.percent ? item.percent : item.percent ?     
         `${item.percent}%!important` : '',
          width: item.width && isNaN(Number(item.width)) ? item.width +'!important'|| '' 
          : item.width + 'px!important' || '',
        }"
        :class="[item.className || '', `is-${item.formType}`]"
        :rules="getRules(item)"
      >
        <template
          #label
          v-if="item.name"
        >
          <div style="display: inline">
            <a :style="{ color: item.labelColor || '' }">{{ item.name || '' }}</a>
          </div>
        </template>
        <template v-if="item.formType && item.mold && !item.hidden">
          <component
            :is="com['M' + item.mold]"
            v-model="fieldForm[item.field]"
            :item="item"
            :index="index"
            :disabled="disabled"
            :size="size"
            :field-form="fieldForm"
            @change="commonChange"
          />
        </template>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts" setup>
import { toRefs } from 'vue';
//引入组件
import MInput from './components/MInput.vue';
import MDate from './components/MDate.vue';
import MSelect from './components/MSelect.vue';

//这是自定义表单验证规则
import GenerateRules from './GenerateRules.ts';

//接收父组件传递的参数
const props = defineProps({
  customClass: {
    type: String,
    default: 'is-three-columns',
  },
  rules: {
    type: Object,
    default: () => {
      return {};
    },
  },
  fieldForm: {
    type: Object,
    default: () => {
      return {};
    },
  },
  labelWidth: {
    type: Number,
    default: 90
  },
  fieldList: {
    type: Array,
    default: () => [],
  },
  // 行内表单
  inline: {
    type: Boolean,
    default: false,
  },
  // 对齐方式 'right' | 'left' | 'top'
  labelPosition: {
    type: String,
    default: 'right',
  },
  size: {
    type: String,
    default: 'default',
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});
const { customClass, rules, fieldForm, labelWidth, fieldList } = toRefs(props);

// 定义组件
const com: Record<string, any> = {
  MInput: MInput,
  MDate: MDate,
  MSelect: MSelect,
};

//事件传递
const $emit = defineEmits(['change']);

/**
 * 常规组件change事件
 * @param item 配置数据
 * @param index 下标
 * @param value 选中/输入的值
 * @param data 选中的整条数据
 */
const commonChange = (item, index, value, data) => {
  $emit('change', item, index, value, data);
};

//自定义验证规则
const { getRules } = GenerateRules();

</script>

二、components 

1.MDate.vue

代码如下（示例）：

<template>
  <el-date-picker
    v-if="item.formType == 'date'"
    v-model="fieldForm[item.field]"
    :disabled="item.disabled || disabled"
    clearable
    style="width: 100%"
    type="date"
    :size="size"
    :editable="true"
    value-format="YYYY-MM-DD"
    :placeholder="item.placeholder || '选择日期'"
    @click.stop
    @change="commonChange(item, index, $event)"
  />
  <el-date-picker
    v-else-if="item.formType == 'month'"
    v-model="fieldForm[item.field]"
    :disabled="item.disabled || disabled"
    clearable
    style="width: 100%"
    type="month"
    :size="size"
    value-format="YYYY-MM"
    :placeholder="item.placeholder || '选择月份'"
    @change="commonChange(item, index, $event)"
  />
  <el-date-picker
    v-else-if="item.formType == 'year'"
    v-model="fieldForm[item.field]"
    :disabled="item.disabled || disabled"
    clearable
    style="width: 100%"
    type="year"
    :size="size"
    value-format="YYYY"
    :placeholder="item.placeholder || '选择年份'"
    @change="commonChange(item, index, $event)"
  />
  <el-date-picker
    v-else-if="item.formType == 'dateRange'"
    v-model="fieldForm[item.field]"
    :disabled="item.disabled || disabled"
    :type="item.dateType || 'daterange'"
    :value-format="item.dateValueFormat || 'YYYY-MM-DD'"
    :picker-options="item.pickerOptions || ''"
    clearable
    :size="size"
    style="width: 100%"
    :start-placeholder="item.startPlaceholder || '开始日期'"
    :end-placeholder="item.endPlaceholder || '结束日期'"
    @change="commonChange(item, index, $event)"
  />
  <el-date-picker
    v-else-if="item.formType == 'datetime'"
    v-model="fieldForm[item.field]"
    :disabled="item.disabled || disabled"
    clearable
    style="width: 100%"
    :size="size"
    type="datetime"
    value-format="YYYY-MM-DD HH:mm:ss"
    :placeholder="item.placeholder || '选择日期'"
    @change="commonChange(item, index, $event)"
  />
</template>
<script lang="ts" setup>
import { toRefs, PropType } from 'vue';
import Hooks from '../Hooks.ts';
// 定义defineProps
const props = defineProps({
  modelValue: {
    type: [Number, String],
    default: '',
  },
  item: {
    type: Object,
    default: () => {},
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  size: {
    type: String as PropType <''| 'large' | 'small'>,
    default: 'small',
  },
  index: {
    type: Number,
    default: null,
  },
  fieldForm: {
    type: Object,
    default: () => {},
  },
});
const { fieldForm } = toRefs(props);

// 定义$emit
const $emit = defineEmits(['change']);

const { commonChange } = Hooks($emit);
</script>

2.MInput.vue

代码如下（示例）： 

<template>
  <el-input
    v-if="item.formType == 'text' && !item.hidden"
    v-model="fieldForm[item.field]"
    :size="size || ''"
    :disabled="item.disabled || disabled"
    :maxlength="item.maxlength"
    :placeholder="item.placeholder"
    :type="item.formType"
    :show-word-limit="item.showLimit"
    :title="fieldForm[item.field]"
    clearable
    :readonly="item.readonly"
    :name="item.field"
    @input="commonChange(item, index, $event)"
  />
  <el-input-number
    v-else-if="['floatnumber', 'number'].includes(item.formType)"
    v-model="fieldForm[item.field]"
    :placeholder="item.placeholder"
    :disabled="item.disabled || disabled"
    :controls="item.controls || false"
    :controls-position="item.position || 'right'"
    clearable
    :size="size"
    @change="commonChange(item, index, $event)"
  />
  <el-input
    v-else-if="item.formType === 'textarea'"
    v-model="fieldForm[item.field]"
    :disabled="item.disabled || disabled"
    :rows="item.rows || 2"
    :autosize="!item.autosize && { minRows: item.rows || 2 }"
    :maxlength="item.maxlength || 800"
    :placeholder="item.placeholder"
    :type="item.formType"
    clearable
    :size="size"
    :resize="item.resize || 'none'"
    @input="commonChange(item, index, $event)"
  />
</template>
<script lang="ts" setup>
import { toRefs} from 'vue';
import Hooks from '../Hooks.ts';

// 定义props 
const props = defineProps({
  modelValue: {
    default: '',
  },
  item: {
    type: Object,
    default: () => {},
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  size: {
    type: String,
    default: 'small',
  },
  index: {
    type: Number,
    default: null,
  },
  fieldForm: {
    type: Object,
    default: () => {},
  },
});
const { fieldForm } = toRefs(props);

// 定义$emit
const $emit = defineEmits(['change']);

const { commonChange } = Hooks($emit);
</script>

3.MInput.vue

代码如下（示例）：

<template>
  <el-select
    v-if="item.formType == 'select'"
    v-model="fieldForm[item.field]"
    :disabled="item.disabled || disabled"
    :clearable="item.clearable || true"
    :placeholder="item.placeholder"
    :multiple="item.multiple"
    :collapse-tags="item.collapse"
    :collapse-tags-tooltip="item.tooltip"
    :size="size"
    :value-key="item.props?.valueKey || 'id'"
    filterable
    style="width: 100%"
    @change="commonChange(item, index, $event)"
  >
    <el-option
      v-for="(items, i) in item.basicGroup
        ? getGroupValue(item)
        : item.setting"
      :key="i"
      :label="!isEmptyValue(items[item.props?.value || 'value']) ?                 
      items[item.props?.label || 'label'] || items.name : items"
      :value="!isEmptyValue(items[item.props?.value || 'value']) ? 
      items[item.props?.value || 'value'] : items"
    />
  </el-select>
  <el-radio-group
    v-else-if="item.formType == 'radio-group'"
    :size="size"
    :disabled="item.disabled || disabled"
    v-model="fieldForm[item.field]"
    @change="commonChange(item, index, $event)"
  >
    <el-radio
      :label="items.value"
      v-for="(items, i) in item.setting"
      :key="i"
    >{{ items.label }}</el-radio>
  </el-radio-group>
  <el-switch
    v-else-if="item.formType == 'switch'"
    v-model="fieldForm[item.field]"
    inline-prompt
    :size="size"
    :active-color="item.active&&item.active.color || '#67c23a'"
    :inactive-color="item.inactive&&item.inactive.color || '#f56c6c'"
    :active-text="item.active&&item.active.text || '是'"
    :inactive-text="item.inactive&&item.inactive.text || '否'"
  />
  <el-checkbox-group
    v-else-if="item.formType == 'checkbox-group'"
    :size="size"
    :disabled="item.disabled || disabled"
    v-model="fieldForm[item.field]"
    @change="commonChange(item, index, $event)">
    <el-checkbox
      :label="items.label"
      v-for="(items, i) in item.setting"
      :key="i"
    />
  </el-checkbox-group>
</template>
<script lang="ts" setup>
import Hooks from '../Hooks.ts';
import { toRefs} from 'vue';

// 定义props 
const props = defineProps({
  modelValue: {
    default: '',
  },
  item: {
    type: Object,
    default: () => { },
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  size: {
    type: String,
    default: 'default',
  },
  index: {
    type: Number,
    default: null,
  },
  fieldForm: {
    type: Object,
    default: () => { },
  },
});
const { fieldForm, size } = toRefs(props);

// 定义$emit
const $emit = defineEmits(['change']);

const { commonChange, isEmptyValue } = Hooks($emit);
</script>

4.Hooks.ts

代码如下（示例）：

export default function ($emit: any) {
    
 /**
 * 常规组件change事件
 */
  const commonChange = (item: any, index: any, value: any, data: any) => {
    $emit('change', item, index, value, data);
  };


  /**
  * 判断是空值
  */
  const isEmptyValue = (value: any) => {
    return value === null || value == undefined;
  };

  return {
    commonChange,
    isEmptyValue,
  };
}

5.Hooks.ts

代码如下（示例）：

/**
 * Created by yxk at 2020/6/1
 * 单个自定义字段生成校验规则
 */

//类型判断 这些就不贴出来啦 
import { isEmpty, isObject, isArray } from '@/utils/types.ts';
export default function () {
  /**
   * 唯一性校验
   * @param data
   * @returns {Promise<unknown>}
   * @constructor
  */
  const UniquePromise = (data: any) => {
    return new Promise((resolve: any) => {
      resolve(data);
    });
  };
  /**
 * 生成单个字段的验证规则
 * @param item 字段信息
 * @returns {[]}
 */
  const getRules = (item: any) => {
    const tempList = [];
    // 验证必填
    if (item.isNull === 1) {
      if (item.formType === 'detail_table') {
        tempList.push({
          validator: ({ item }: any, value: any, callback: any) => {
            if (getDetailTableIsEmpty(item.fieldExtendList, value)) {
              callback(new Error(item.name + '不能为空'));
            } else {
              callback();
            }
          },
          item: item,
          trigger: ['blur', 'change']
        });
      } else if (item.formType === 'checkbox' || item.formType === 'dep-select') {
        tempList.push({
          validator: ({ item }: any, value: any, callback: any) => {
            if (!isArray(value) || value.length === 0) {
              callback(new Error(item.name + '不能为空'));
            } else {
              const emptyObj = value.find((valueItem: any) => isEmpty(valueItem));
              emptyObj === '' ? callback(new Error(item.name + '不能为空')) : callback();
            }
          },
          item: item,
          trigger: ['blur', 'change']
        });
      } else {
        tempList.push({
          required: true,
          message: item.name + '不能为空',
          trigger: ['blur', 'change']
        });
      }
    }

    // 验证唯一
    if (item.isUnique === 1 && UniquePromise) {
      const validateUnique = (rule: any, value: any, callback: any) => {
        if (isEmpty(value)) {
          callback();
        } else {
          // 验证唯一
          UniquePromise({
            field: item,
            rule: rule,
            value: value
          }).then(() => {
            callback();
          }).catch(msg => {
            callback(new Error(msg || '验证出错'));
          });
        }
      };
      tempList.push({
        validator: validateUnique,
        item: item,
        trigger:
          item.formType === 'checkbox' || item.formType === 'select' ?
            ['change', 'blur'] :
            ['blur']
      });
    }

    return tempList;
  };

  /**
  * 获取数值规则
  */
  const getNumberRule = (rule: any, value: any, callback: any) => {
    const field = rule.item;

    const arr = String(value).split('.');

    const len = String(value)
      .replace('.', '')
      .replace('-', '')
      .length;
    const maxlength = field.formType === 'percent' ? 10 : 15;

    const min = isEmpty(field.minNumRestrict) ? -Infinity : Number(field.minNumRestrict 
               || -Infinity);
    const max = isEmpty(field.maxNumRestrict) ? Infinity : Number(field.maxNumRestrict || 
    Infinity);

    if (len > maxlength) {
      callback(new Error(`最多支持${maxlength}位数字（包含小数位）`));
    } else if (isEmpty(field.precisions) && String(value).includes('.')) {
      // null 不支持小数  0 不限制小数位
      callback(new Error(`不支持小数`));
    } else if (arr.length > 1 && arr[1].length > Number(field.precisions)) {
      callback(new Error(`小数位不能大于${field.precisions}`));
    } else if (value < min) {
      callback(new Error(`不能小于${min}`));
    } else if (value > max) {
      callback(new Error(`不能大于${max}`));
    } else {
      callback();
    }
  };

  /**
  * 判断明细表格是否是空
  * @param {*} fieldList
  * @param {*} valueObj
  */
  const getDetailTableIsEmpty = (fieldList: any, valueObjs: any) => {
    for (let index = 0; index < valueObjs.length; index++) {
      const valueObj = valueObjs[index];
      if (judgeFormValueIsEmpty(fieldList, valueObj)) {
        return true;
      }
    }
    return false;
  };
  /**
  * 判断对象值是否是空
  */
  const judgeFormValueIsEmpty = (fieldList: any, valueObj: any) => {
    for (let index = 0; index < fieldList.length; index++) {
      const field = fieldList[index];
      const value = valueObj[field.fieldName];
      if (field.formType === 'location') {
        if (isObject(value) && (!isEmpty(value.lat) || !isEmpty(value.lng) ||                     
        !isEmpty(value.address))) {
          return false;
        }
      } else if (!isEmpty(value)) {
        return false;
      }
    }
    return true;
  };
  return {
    UniquePromise,
    getRules
  };
}

6.form表单的使用

<div class="form_container">
      <Form
        :field-list="fieldList"
        :field-form="fieldForm" />
   </div>
const formData = reactive({
  fieldForm: {},
  fieldList: [
    {
      field: 'name',
      name: '活动名称',
      mold: 'Input',
      formType: 'text',
      // 检验唯一性
      isNull:1
    },
    {
      field: 'region',
      name: '活动区域',
      mold: 'Select',
      formType: 'select',
      setting: [
        {
          label: '区域一',
          value: 0
        },
        {
          label: '区域二',
          value: 0
        }
      ]
    },
    {
      field: 'date',
      name: '活动区域',
      mold: 'Date',
      formType: 'datetime',
    },
    {
      field: 'deliver',
      name: '即时配送',
      mold: 'Select',
      formType: 'switch',
    },
    {
      field: 'type',
      name: '活动性质',
      mold: 'Select',
      formType: 'checkbox-group',
      setting: [
        {
          label: '美食/餐厅线上活动',
        },
        {
          label: '地推活动',
        },
        {
          label: '线下主题活动',
        },
        {
          label: '单纯品牌曝光',
        },
      ]
    },
    {
      field: 'resource',
      name: '资源',
      mold: 'Select',
      formType: 'radio-group',
      setting: [
        {
          label: '线上品牌商赞助',
          value:0
        },
        {
          label: '线下场地免费',
          value:1
        },
      ]
    },
    {
      field: 'desc',
      name: '活动形式',
      mold: 'Input',
      formType: 'textarea',
      rows:3
    },
  ]
});

 出来的效果就是这样子滴

 

总结

         以上就是form表单的全部代码啦 如果对您有用就浅浅的点个赞吧

章木木
关注
专栏目录
vue3 element-plus el-form的二次封装
dreamimport的博客
07-07 1558
form表单的二次封装vue3 element-plus el-form的二次封装。
vue3 二次封装element-plus 表格组件
m0_67401746的博客
03-06 1729
由于项目中会频繁的使用表格，会出现非常多的重复代码，所以决定对element-plus的table组件进行封装，尽量避免代码冗余。代码如下： 1.在components文件下新建Table/index.vue文件 <template> <el-table v-loading="listLoading" :data="tableData" element-loading-text="Loading" fit border highlight-current-row :max-heigh
vue3Util:基于vue3 element-plus form表单二次封装
05-05
. 在线预览 git subtree push --prefix=dist origin gh-pages npm i zx-lib3 -S
vue3项目封装form表单
高宇辰
09-12 1283
我们都知道表单组件应该是后台管理系统中用得最多的组件，我们不可能每个业务都写一次表单，然后每一次修改都去各自业务中大幅修改，这样就可能导致代码重复率太高了，工作效率频频降低，所以我们需要封装起来，这样我们就可以复用，大大减少项目体积，方便项目的后期维护，提高前端娃的工作效率。由于我们使用表单都是直接使用UI组件库的组件，所以我们需要做二次封装，那么问题来了，二次封装表单组件我们需要考虑什么？话不多说，直接展示代码，以下代码可以直接使用： 接下来我来告诉大家怎么使用：
vue3二次封装element-puls
最新发布
Wx001214的博客
08-10 390
如: label 的提示信息 , type 的类型。页面就会出现两个一样的输入框，并且里面的渲染不同。placeholder:"请输入用户ID"placeholder:"请输入用户ID"placeholder:"请输入用户名称"如果定义// 定义表单的配置项。将表单的通用信息给设置出来。label:"用户ID",label:"用户ID",label:"用户名称",// 定义表单的配置项。
element Plus form组件二次封装
weixin_44178540的博客
04-26 758
记录一下最近封装的组件，之前有二次封装过这个组件但是后来需求更新的比较多导致组件比较乱，趁着这次的新项目重新封装了一个。css部分预封装了双栏表单样式可配置isColumns为true展示。
vue3封装element-plus的Form表单
实习打字猿的博客
08-20 3214
vue3封装element-plus的Form表单
Vue3+ts+element-plus 组件的二次封装-- 新增修改Form弹框的二次封装，通过JSON进行配置Form表单，实现高内聚低耦合
Penk的博客
11-29 2007
环境状态vue版本：vue3是否使用 ts：是后台管理系统的网站，一个页面无非就是4个常用业务块头部的搜索栏table表格页脚新增编辑弹框那咋们是不是可以将其进行封装成组件呢？只需要传入一个配置文件就可以了~项目解构如下：封装后的展示图如下：如果能做成这样，是不是页面就会整洁很多？这边虽说是Form弹框，但是还是用到了elementUI的两个组件：1个是el-dialog，1个是el-form。通过JSON进行配置Form表单，实现高内聚低耦合
nf-vue-element：基于element Plus的二次封装，实现文档驱动的目标
02-24
基于element Plus的二次封装，为文档驱动提供基础控件。 安装 初始化纱 开发环境纱线服务 打包纱 目录 src /组件 封装element-plus的组件表单控件（完善中）查询控件（待完善）列表控件（待完善）分页控件（待完善）...
vue3form表单的二次封装
07-07
Vue3 Form 表单的二次封装是 Vue.js 开发中常见的一种优化实践，尤其是在使用 Element Plus UI 库时。这通常涉及到对 Element Plus 的 `el-form` 组件进行定制，以适应项目特定的需求，提高代码复用性，简化表单处理...
P14-Vue3后台管理系统-用户管理界面-form表单封装
Bruce小鬼
02-17 1738
P14-Vue3后台管理系统-用户管理界面-form表单封装 1.概述 这篇文章开始我们来介绍用户管理界面的开发，首先介绍用户管理界面的form表单开发。 2.接口数据 用户管理界面展示的数据是请求接口，由接口返回数据。这里我们通过mock模拟接口返回的用户管理界面数。 2.1.index.js内容 import Mock from 'mockjs' import homeApi from './home' import userApi from './user' // 设置mock响应时间为20
element-plus el-form二次封装记录
weixin_64160020的博客
03-01 1881
---------------------------------------------------------分割线--------------------------------------------------------------:在父组件中的子组件标签上绑定ref值,且将其声明为ref响应式变量,此后就可以使用 变量名.value.子组件属性名 来获取子组件中的属性和方法.需要注意的是:子组件中的属性和方法必须通过defineExpose暴露父组件才能获取。
vue3 ts element plus form表单二次封装详细步骤 （附参数、类型详细介绍及简单使用示例）
热门推荐
前台端水师的博客
08-10 1万+
上篇table 表格封装 讲到项目中经常会用到 table 表格，所以做了封装。当然，form 表单使用的频率依然很高，所以和封装 table 表格的思路相似，对 form 表单也做了一个二次封装的组件。 Form 表单组件封装 2. 基本表单使用 3. 自定义 key 4. 自定义表单验证 表单配置项， 参数请参考下面参数介绍 参数类型声明(声明为全局的类型，方便使用) 参数介绍 Form 属性 参数 说明 类型 是否必填 默认值 model 表单数据对象 Record...
vue3 基于element-plus 封装form表单
wancaicai_的博客
06-20 315
【代码】vue3 基于element-plus 封装form表单。
二次封装ElementPlus的Form表单，通过配置来构建一个高度通用的二维表单
支付宝转账20r看蟹黄堡配方 的博客
03-12 1290
如果您在使用webstorm，那么可以在main.ts同层级下的声明文件中添加以下配置。如果您在使用volar，那么可以在tsconfig.json中添加以下配置。
element-plus form表单的二次封装
每天都要努力学习哦~~
10-28 478
博主写了对element-plus的表格和表单的封装 大家支持一下[表格]https://gitee.com/childe-jia/table-vue3[表单] https://gitee.com/childe-jia/form-render。
vue js element-ui el-form表单封装 二次封装
daimakuangren123的博客
09-22 1462
这是一个封装了表单组件的思想。它使用了Vue.js框架和Element UI库来创建可复用的表单组件。该组件接受props作为输入，包括表单的各种配置项和数据。根据配置项的不同，组件内部会生成对应的表单元素，如输入框、下拉框、单选框、复选框等。同时，组件还提供了上传附件和预览功能。该封装思想的优点在于可以减少代码的冗余，提高代码的复用性和维护性。通过将表单的配置项和数据作为props进行输入，可以在使用组件的地方轻松定制表单的样式和行为，同时也可以方便地对表单的数据进行处理和提交。
Vue3组件二次封装
m0_60838883的博客
03-15 376
在父组件中设置form表单数据 配置key 键 获取表单键 v-model绑定数据。修改二次封装组件代码使用配置产生form自动生成。Form组件二次封装考虑组件构成。
如何二次封装Element-Plus table组件
qq_64069576的博客
07-11 1100
这里取了个巧，因为后台接口要传的必传参几乎一样而且都是GET请求，我就把请求也直接页封装在组件里了，只需要传一个请求地址就可以正常渲染，项目的批量删除也在组件内部处理了，且表单数据也可以直接传入到组件的params属性，这样查询时也可以动态更新数据，封装的不是那么的全面，欢迎各位路过的大佬们给出指点和建议，互相学习进步！最近做了一个后台的项目,需要用到大量的表格组件,我就试着把它给封装了一下，记录一下，那么现在开始了。效果：这里分页也在组件处理了，所以也无需自己在弄分页了。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值