vue antd 自定义搜索筛选栏组件封装

最新推荐文章于 2024-04-03 14:36:32 发布
最新推荐文章于 2024-04-03 14:36:32 发布
阅读量4.5k 收藏 14
点赞数
文章标签： js 设计模式 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46656983/article/details/123886980
版权

这里写自定义目录标题

1、背景

vue后台管理系统，会有很多表格页面，表格上方会有一些搜索选项。表格直接使用a-table即可，而搜索栏区域每次写起来都很繁琐，且多人开发情况下每个人写的样式都不相同，布局样式无法统一。

所以要考虑对搜索栏做一个封装，统一配置引用，提升开发维护效率和界面统一。

完成后的效果大概就是长这样：在这里插入图片描述

2、分析

项目使用的是antd框架，搜索栏这种表单提交，首先要使用a-form-model组件来封装，而复杂点就是表单项可能有很多种，例如input输入框、select选择框、日期时间选择框、日期时间范围选择框、cascader级联选择框等，每一项的字段名prop、名称label、绑定的属性方法都不尽相同。所以不能通过普通的绑定个别属性的方式来处理，而slot插槽的方式也无法简化，最终决定通过传递一个配置项数组的形式来解析生成相应的结构。

3、实现

目前实现的方式由两部分组成，一部分是form表单组件，接受父组件传递的配置项数组，一部分是封装一些常用的表单项组件，通过v-if来控制，form表单组件里引入该表单项组件，循环遍历，根据传递的表单项类型来匹配显示具体的表单项。

（1）form表单组件（searchForm.vue）示例代码：

  <div class="search-form-box">
    <a-row>
      <a-form-model 
        :model="formData"
        ref="formRef"
        layout="horizontal"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-col :span="6" v-for="(item, index) in formOptions" :key="newKeys[index]">
          <a-form-model-item
            :prop="item.prop"
            :label="item.label ? item.label + '：' : ''"
            :rules="item.rules"
          >
            
              <formItem v-model="formData[item.prop]" :itemOptions="item" :needParams="needParams" />
          </a-form-model-item>
        </a-col>
        <!-- 自定义插槽，可用于特殊表单块 -->
        <slot></slot>
      </a-form-model>
    </a-row>
    <a-row type="flex" justify="end">
      <!-- 提交按钮 -->
      <div class="btn-box">
        <a-button
          v-if="btnItems.includes('search')"
          type="primary"
          class="btn-search"
          @click="onSearch"
          >搜索</a-button
        >

        <a-button
          v-if="btnItems.includes('export')"
          type="primary"
          class="btn-export"
          @click="onExport"
          >导出</a-button
        >

        <a-button
          v-if="btnItems.includes('reset')"
          type="default"
          class="btn-reset"
          @click="onReset"
          >重置</a-button
        >
      </div>
    </a-row>
  </div>

（2）formItem表单项组件（formItem.vue）示例代码：

<div class="form-item">
    <a-input
      v-if="isInput"
      v-model="currentVal"
      v-bind="bindProps"
      v-on="bindEvents"
      allowClear
    />

    <a-input-number
      v-if="isInputNumber"
      v-model="currentVal"
      v-bind="bindProps"
      v-on="bindEvents"
      allowClear
    />

    <a-select
      v-if="isSelect"
      v-model="currentVal"
      v-bind="bindProps"
      v-on="bindEvents"
      allowClear
    >
      <a-select-option
        v-for="item in itemOptions.options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></a-select-option>
    </a-select>

    <!-- datetimerange/daterange -->
    <a-range-picker
      v-if="isDatePickerDateRange"
      v-model="currentVal"
      v-bind="bindProps"
      v-on="bindEvents"
      allowClear
      :placeholder="['开始日期', '结束日期']"
      separator="至"
      :default-time="['00:00:00', '23:59:59']"
      valueFormat="YYYY-MM-DD"
    />

    <!-- monthrange -->
    <a-date-picker
      v-if="isDatePickerMonthRange"
      v-model="currentVal"
      v-bind="bindProps"
      v-on="bindEvents"
      type="monthrange"
      allowClear
      :placeholder="['开始日期', '结束日期']"
      range-separator="至"
      valueFormat="YYYY-MM"
    ></a-date-picker>

    <!-- others -->
    <a-date-picker
      v-if="isDatePickerOthers"
      v-model="currentVal"
      v-bind="bindProps"
      v-on="bindEvents"
      allowClear
      placeholder="请选择日期"
      valueFormat="YYYY-MM-DD"
    ></a-date-picker>

    <a-cascader
      v-if="isCascader"
      v-model="currentVal"
      v-bind="bindProps"
      v-on="bindEvents"
      :options="itemOptions.options"
      allowClear
    ></a-cascader>
  </div>

4、关键点

由于antd表单组件本身有很多配置属性，不可能把所有的属性和方法都写死封装，要想无缝支持，需要用到vue的v-bind和v-on特性，vue的v-bind和v-on支持赋值为对象类型，vue会自动遍历对象里的属性依次绑定，v2.4.0+支持。

5、参数配置项解释

（1）示例：

 /**
     * 表单配置
     * 示例：
     * [{
     *   label: '用户名', // label文字
     *   prop: 'username', // 字段名
     *   type: 'input', // 指定antd组件
     *   defaultValue: '阿黄', // 字段初始值
     *   placeholder: '请输入用户名', // antd组件属性
     *   rules: [{ required: true, message: '必填项', trigger: 'blur' }], // antd组件属性
     *   events: { // antd组件方法
     *     input (val) {
     *       console.log(val)
     *     },
     *     ...... // 可添加任意antd组件支持的方法
     *   }
     *   ...... // 可添加任意antd组件支持的属性
     * }]
     */

具体扩展属性可参考antd官方文档（antd官方文档）

（2）参数传递解析的流程：

  1. 首先，searchForm.vue组件里通过props接收参数：
formOptions: {
     type: Array,
     required: true,
     default () {
       return []
     }
     /**
    * 请求所需参数
    * 示例：
    * needParams: {
    *   // 参数名
    *   // 参数值
    *   token: "123"
    *  },
    */
   needParams: {
     type: Object,
     default() {
       return {};
     }
   },
},
  1. created生命周期里处理初始值：
// 添加初始值
addInitValue () {
 const obj = {}
 this.formOptions.forEach(v => {
   if (v.initValue !== undefined) {
     obj[v.prop] = v.initValue
   }
 })
 this.formData = obj
}
  1. 一部分配置项绑定在a-form-model-item上，一部分传递给formItem表单项组件再绑定：
<a-form-model 
        :model="formData"
        ref="formRef"
        layout="horizontal"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-col :span="6" v-for="(item, index) in formOptions" :key="newKeys[index]">
          <a-form-model-item
            :prop="item.prop"
            :label="item.label ? item.label + '：' : ''"
            :rules="item.rules"
          >
              <formItem v-model="formData[item.prop]" :itemOptions="item" :needParams="needParams" />
          </a-form-model-item>
        </a-col>
        <!-- 自定义插槽，可用于特殊表单块 -->
        <slot></slot>
</a-form-model>
  1. formItem.vue表单项组件里props接受传参：
itemOptions: {
  type: Object,
  default () {
    return {}
  }
}
  1. computed里处理接收的参数itemOptions，生成要绑定的所有属性对象bindProps：
 // 绑定属性
    bindProps() {
      let obj = { ...this.itemOptions };
      // 移除冗余属性
      delete obj.label;
      delete obj.prop;
      delete obj.type;
      delete obj.defaultValue;
      delete obj.rules;
      delete obj.events;
      if (obj.type === "select") {
        delete obj.options;
      }
      return obj;
    },
  1. computed里生成要绑定的所有方法对象bindEvents：
 // 绑定方法
   bindEvents() {
     return this.itemOptions.events || {};
   },
  1. 处理请求所需参数
// 获取请求参数
   requestParams() {
     let params = { ...this.needParams };
     let results = {};
     if (Array.isArray(this.itemOptions.dicParamsList)) {
       this.itemOptions.dicParamsList.forEach(item => {
         if(item.value){
           results[item.key] = item.value;
         }else {
           results[item.key] = params[item.key];
         }
       });
     }
     return results;
   },
  1. 最后组件上使用
<a-input
     v-if="isInput"
     v-model="currentVal"
     v-bind="bindProps"
     v-on="bindEvents"
     allowClear
   />

（3）特殊情况的处理

由于antd的a-select里是通过a-select-option遍历实现的，而遍历数组options按antd官方不是绑定在a-select上的，所以针对a-select的配置项再加一个options属性，即select选择项的数据数组。

<a-select
      v-if="isSelect"
      v-model="currentVal"
      v-bind="bindProps"
      v-on="bindEvents"
      allowClear
    >
      <a-select-option
        v-for="item in itemOptions.options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></a-select-option>
    </a-select>

created中请求数据

created() {
    // select 动态添加options
    if (this.itemOptions.url) {
      axios({
        url: this.itemOptions.url,
        params: this.requestParams
      }).then(res => {
        this.itemOptions.options = res.data && res.data[this.itemOptions.propsHttpRes];
      })
    }
  },

6、按钮组

目前通过prop传入，三个按钮

// 提交按钮项，多个用逗号分隔（search搜索, export导出, reset重置）
btnItems: {
  type: String,
  default () {
    return 'search'
  }
}

7、使用方式示例

template

<searchForm
      :formOptions="formOptions"
      :needParams="needParams"
      btnItems="search, export, reset"
    />

data

formOptions: [
        {
          label: "用户名很长是是是", // label文字
          prop: "username", // 字段名
          type: "input", // 指定antd组件
          defaultValue: "阿黄", // 字段初始值
          placeholder: "请输入用户名", // antd组件属性
          rules: [{ required: true, message: "必填项", trigger: "blur" }], // antd组件属性
          events: {
            // antd组件方法
            input(val) {
              console.log(val);
            },
          },
        },
        {
          label: "年龄", // label文字
          prop: "age", // 字段名
          type: "number", // 指定antd组件
          defaultValue: 18, // 字段初始值
          placeholder: "请输入年龄", // antd组件属性
          rules: [{ required: true, message: "必填项", trigger: "blur" }], // antd组件属性
          events: {
            // antd组件方法
            input(val) {
              console.log(val);
            },
          },
        },
        {
          label: "性别", // label文字
          prop: "sex", // 字段名
          type: "select", // 指定antd组件
          defaultValue: "", // 字段初始值
          placeholder: "请选择性别", // antd组件属性
          options: [
            {
              label: "男",
              value: "1",
            },
            {
              label: "女",
              value: "2",
            },
          ],
          events: {
            // antd组件方法
            change(val) {
              console.log(val);
            },
          },
        },
        {
          label: "下拉框", // label文字
          prop: "address", // 字段名
          type: "select", // 指定antd组件
          defaultValue: "", // 字段初始值
          placeholder: "请选择性别", // antd组件属性
          options: [],
          url: 'http://rap2api.taobao.org/app/mock/270426/city',
          methods: 'get',
          dicParamsList: [
            {
              key: 'token'
            },
            {
              key: 'bussinessId',
              value: '324'
            }
          ],
          filedName: {
            label: 'name',
            value: 'id'
          },
          propsHttpRes: 'data',
          events: {
            // antd组件方法
            change(val) {
              console.log(val);
            },
          },
        },
        {
          label: "项目地址", // label文字
          prop: "project", // 字段名
          type: "cascader", // 指定antd组件
          defaultValue: [], // 字段初始值
          placeholder: "请选择性别", // antd组件属性
          options: [],
          url: 'http://rap2api.taobao.org/app/mock/270426/getCascaderList',
          methods: 'get',
          dicParamsList: [
            {
              key: 'token'
            },
            {
              key: 'bussinessId',
              value: '324'
            }
          ],
          filedName: {
            label: 'name',
            value: 'id'
          },
          propsHttpRes: 'data',
          events: {
            // antd组件方法
            change(val) {
              console.log(val);
            },
          },
        },
        {
          label: "到货日期", // label文字
          prop: "arrialDate", // 字段名
          type: "range-picker", // 指定antd组件
          defaultValue: [], // 字段初始值
          placeholder: "请选择", // antd组件属性
          events: {
            // antd组件方法
            change(val) {
              console.log(val);
            },
          },
        },
        {
          label: "发货日期", // label文字
          prop: "delieverDate", // 字段名
          type: "date-picker", // 指定antd组件
          defaultValue: '', // 字段初始值
          placeholder: "请选择", // antd组件属性
          events: {
            // antd组件方法
            change(val) {
              console.log(val);
            },
          },
        },
      ],

8、完整代码

（1）searchForm.vue

<template>
  <div class="search-form-box">
    <a-row>
      <a-form-model 
        :model="formData"
        ref="formRef"
        layout="horizontal"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-col :span="6" v-for="(item, index) in formOptions" :key="newKeys[index]">
          <a-form-model-item
            :prop="item.prop"
            :label="item.label ? item.label + '：' : ''"
            :rules="item.rules"
          >
            
              <formItem v-model="formData[item.prop]" :itemOptions="item" :needParams="needParams" />
          </a-form-model-item>
        </a-col>
        <!-- 自定义插槽，可用于特殊表单块 -->
        <slot></slot>
      </a-form-model>
    </a-row>
    <a-row type="flex" justify="end">
      <!-- 提交按钮 -->
      <div class="btn-box">
        <a-button
          v-if="btnItems.includes('search')"
          type="primary"
          class="btn-search"
          @click="onSearch"
          >搜索</a-button
        >

        <a-button
          v-if="btnItems.includes('export')"
          type="primary"
          class="btn-export"
          @click="onExport"
          >导出</a-button
        >

        <a-button
          v-if="btnItems.includes('reset')"
          type="default"
          class="btn-reset"
          @click="onReset"
          >重置</a-button
        >
      </div>
    </a-row>
  </div>
</template>

<script>
import formItem from "./formItem";
import tools from '@/utils/tools'

export default {
  name: 'searchForm',
  props: {
    /**
     * 表单配置
     * 示例：
     * [{
     *   label: '用户名', // label文字
     *   prop: 'username', // 字段名
     *   type: 'input', // 指定antd组件
     *   defaultValue: '阿黄', // 字段初始值
     *   placeholder: '请输入用户名', // antd组件属性
     *   rules: [{ required: true, message: '必填项', trigger: 'blur' }], // antd组件属性
     *   events: { // antd组件方法
     *     input (val) {
     *       console.log(val)
     *     },
     *     ...... // 可添加任意antd组件支持的方法
     *   }
     *   ...... // 可添加任意antd组件支持的属性
     * }]
     */
    formOptions: {
      type: Array,
      required: true,
      default() {
        return [];
      }
    },
    /**
     * 请求所需参数
     * 示例：
     * needParams: {
     *   // 参数名
     *   // 参数值
     *   token: "123"
     *  },
     */
    needParams: {
      type: Object,
      default() {
        return {};
      }
    },
    // 提交按钮项，多个用逗号分隔（search, export, reset）
    btnItems: {
      type: String,
      default() {
        return "search";
      }
    }
  },

  data() {
    return {
      labelCol: {
          xs: { span: 24 },
          sm: { span: 9 },
          md: { span: 11 },
      },
      wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 },
          md: { span: 13 },
      },
      formData: {}
    };
  },

  computed: {
    // 生成新的key
    newKeys() {
      return this.formOptions.map(() => {
        return tools.createUniqueString()
      });
    }
  },

  created() {
    this.addDefaultValue();
  },

  methods: {
    // 校验
    onValidate(callback) {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          console.log("提交成功");
          console.log(this.formData);
          callback();
        }
      });
    },
    // 搜索
    onSearch() {
      this.onValidate(() => {
        this.$emit("onSearch", this.formData);
      });
    },
    // 导出
    onExport() {
      this.onValidate(() => {
        this.$emit("onExport", this.formData);
      });
    },
    onReset() {
      this.$refs.formRef.resetFields();
    },
    // 添加初始值
    addDefaultValue() {
      const obj = {};
      this.formOptions.forEach(v => {
        if (v.defaultValue !== undefined) {
          obj[v.prop] = v.defaultValue;
        }
      });
      this.formData = obj;
    }
  },

  components: { formItem }
};
</script>

<style lang="scss">
.search-form-box {
  margin-bottom: 15px;

  .btn-box {
    padding-top: 5px;
    display: flex;

    button {
      height: 28px;
      margin: 0 5px;
    }
  }

  .ant-input-number {
    width: 100% ;
  }

  .ant-form-item {
    margin-bottom: 10px;
  }
}
</style>

（2）formItem.vue

<template>
  <div class="form-item">
    <a-input
      v-if="isInput"
      v-model="currentVal"
      v-bind="bindProps"
      v-on="bindEvents"
      allowClear
    />

    <a-input-number
      v-if="isInputNumber"
      v-model="currentVal"
      v-bind="bindProps"
      v-on="bindEvents"
      allowClear
    />

    <a-select
      v-if="isSelect"
      v-model="currentVal"
      v-bind="bindProps"
      v-on="bindEvents"
      allowClear
    >
      <a-select-option
        v-for="item in itemOptions.options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></a-select-option>
    </a-select>

    <!-- datetimerange/daterange -->
    <a-range-picker
      v-if="isDatePickerDateRange"
      v-model="currentVal"
      v-bind="bindProps"
      v-on="bindEvents"
      allowClear
      :placeholder="['开始日期', '结束日期']"
      separator="至"
      :default-time="['00:00:00', '23:59:59']"
      valueFormat="YYYY-MM-DD"
    />

    <!-- monthrange -->
    <a-date-picker
      v-if="isDatePickerMonthRange"
      v-model="currentVal"
      v-bind="bindProps"
      v-on="bindEvents"
      type="monthrange"
      allowClear
      :placeholder="['开始日期', '结束日期']"
      range-separator="至"
      valueFormat="YYYY-MM"
    ></a-date-picker>

    <!-- others -->
    <a-date-picker
      v-if="isDatePickerOthers"
      v-model="currentVal"
      v-bind="bindProps"
      v-on="bindEvents"
      allowClear
      placeholder="请选择日期"
      valueFormat="YYYY-MM-DD"
    ></a-date-picker>

    <a-cascader
      v-if="isCascader"
      v-model="currentVal"
      v-bind="bindProps"
      v-on="bindEvents"
      :options="itemOptions.options"
      allowClear
    ></a-cascader>
  </div>
</template>

<script>
import axios from "axios";
export default {
  inheritAttrs: false,

  props: {
    value: {},
    itemOptions: {
      type: Object,
      default() {
        return {};
      }
    },
    needParams: {
      type: Object,
      default: () => ({})
    }
  },

  computed: {
    // 双向绑定数据值
    currentVal: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      }
    },
    // 绑定属性
    bindProps() {
      let obj = { ...this.itemOptions };
      // 移除冗余属性
      delete obj.label;
      delete obj.prop;
      delete obj.type;
      delete obj.defaultValue;
      delete obj.rules;
      delete obj.events;
      if (obj.type === "select") {
        delete obj.options;
      }
      return obj;
    },
    // 绑定方法
    bindEvents() {
      return this.itemOptions.events || {};
    },
    // 获取请求参数
    requestParams() {
      let params = { ...this.needParams };
      let results = {};
      if (Array.isArray(this.itemOptions.dicParamsList)) {
        this.itemOptions.dicParamsList.forEach(item => {
          if(item.value){
            results[item.key] = item.value;
          }else {
            results[item.key] = params[item.key];
          }
        });
      }
      return results;
    },
    // a-input
    isInput() {
      return this.itemOptions.type === "input";
    },
    // a-input-number
    isInputNumber() {
      return this.itemOptions.type === "number";
    },
    // a-select
    isSelect() {
      return this.itemOptions.type === "select";
    },
    // a-date-picker (type: datetimerange/daterange)
    isDatePickerDateRange() {
      return this.itemOptions.type === "range-picker";
    },
    // a-date-picker (type: monthrange)
    isDatePickerMonthRange() {
      return this.itemOptions.type === "month-range";
    },
    //  a-date-picker (type: other)
    isDatePickerOthers() {
      return this.itemOptions.type === "date-picker";
    },
    // a-cascader
    isCascader() {
      return this.itemOptions.type === "cascader";
    },
  },

  created() {
    // select 动态添加options
    if (this.itemOptions.url) {
      axios({
        url: this.itemOptions.url,
        params: this.requestParams
      }).then(res => {
        this.itemOptions.options = res.data && res.data[this.itemOptions.propsHttpRes];
      })
    }
  },

  methods: {},

  components: {},
};
</script>

<style lang="less" scoped></style>

依赖引入的一些函数方法 tools.js

/**
 * 创建唯一的字符串
 * @return {string} ojgdvbvaua40
 */
function createUniqueString() {
  const timestamp = +new Date() + "";
  const randomNum = parseInt((1 + Math.random()) * 65536) + "";
  return (+(randomNum + timestamp)).toString(32);
}

export default { 
  createUniqueString,
};
前端砖家
关注
  • 0
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
基于antd-vue封装的下拉选择框滑动加载并且带搜索还可以新增的功能
weixin_44191425的博客
12-14 3584
还是那句话，只有你想不到的，没有产品不敢想的。 这个也无需求也是emmmmm头一回接。 那就是下拉框数据很多的时候不想要一次性查出来，想要滑动加载，那第一反应很简单咯，分页查询嘛 <a-select v-decorator="[ 'organizationId', { initialValue: showData.organizationName,
基于Antd Table自定义通用columns列筛选配置
小陈的博客
11-05 1291
最近因为工作需要，用到了富文本编辑器让用户填写反馈，上传图片等功能，经过一些对比选择了tinymce,记录下图片相关问题。完整版封装的组件代码，放到最后。环境这里由于开发环境是vue2,所以目前这个时间点，需要选择版本的去安装，引用官方文档的一句话这个比较简单，在_init的配置中，配置images_upload_handler_ 图片粘贴 刚开始是想到的直接监听的事件，去获取剪切板的图片，代码如下： 后来发现不生效，检查一下元素得知，tinymce是通过使用的，后来找到了配置项，返回的实例可以监听粘贴事件
antd 实现既可以输入又可以选择、搜索的组件
最新发布
m0_57253767的博客
04-03 620
项目中的需求如下图，希望输入的信息是可以选择或者自定义输入的，并且选择的时候可以根据输入进行提示，antd中看了一遍，选择了。有什么疑问可以留言，这个组件我第一次用，感悟不多，仅此记录以下。
通用vue组件化搜索组件页面
qq_55928824的博客
01-07 2526
通用vue组件化搜索组件页面
关于antd 3.x版本的自定义筛选的问题
hs1219462412的博客
04-29 356
一、Table表格自定义筛选中搜索输入框输入不了内容。 antd版本是 3.x； 升级版本到4.x后该问题解决； 此问题有没有其他解决方法？； 触摸option展示table表格，表格中的搜索输入框输入不了内容，下拉框选中后触摸下拉框展示的表格可以输入 这是html结构，表格数据是官方组件文档里的，列搜索可参考我的另一片封装自定义筛选v3方法 const optionArr = ['嘻嘻', '哈哈']; const content = <Table dataSource={dataSour
基于Umi搭建的个人Dva脚手架（五） - 可配置的搜索、弹窗组件封装
夕阳枫的博客
04-17 851
1、基本概述    在上一篇博客：基于Umi搭建的个人Dva脚手架（四） - 可配置的表单组件封装中，已经详细介绍了通过配置生成表单组件的方法，在开发中我们不必过分关心view层的编码，可以减少重复代码的编写，提高开发效率。列表搜索和操作类弹窗（新增、修改等）等都会应用到表单元素，因此在已有的可配置的表单组件GenerateForm的基础上进行二次封装，分别封装了可配置的搜索组件ListFilte...
vue中监听searchForm中属性值的改变，刷新列表。
qq_45750213的博客
01-16 319
return JSON.parse(JSON.stringify(this.searchForm)) //复制一份数据。deep: true //开启深度监听。
vue elementui 实现搜索栏公共组件封装的实例代码
10-15
主要介绍了vue elementui 搜索栏公共组件封装,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue2.0 自定义组件的方法（vue组件的封装）
08-27
Vue 2.0 自定义组件的方法（Vue 组件的封装） 在 Vue 2.0 中，自定义组件是非常强大的功能之一，它允许开发者根据自己的需求封装自己的组件，从而提高开发效率和代码重用性。在本文中，我们将详细介绍 Vue 2.0 ...
使用VUE自定义组件封装数据字典实战
03-07
答案也简单，就是自定义封装一个组件来实现。我们的目标是传入一个数据字典的类型编码，组件内部调用后端API，完成数据的加载与存储，在选择项变化时，自动更新绑定的对应的业务实体的属性值。同时，在业务实体的...
react-react自定义搜索组件主要针对于reactantd表头搜索基于antd进行封装
08-14
针对于 react antd 表格组件中表头搜索，原则上支持所有 antd 及自定义 form 组件，如组件值与触发方法不是 value 及 onChange 则需要设置 valuePropName, validateTrigger
vue-searchForm:Vue를이용한searchForm개발
03-13
vue-searchForm:Vue를이용한searchForm개발
Vue3自定义组件库，Vue3项目
08-17
Vue3自定义组件库，Vue3项目
使用Vue自定义指令实现Select组件
08-27
使用Vue自定义指令实现Select组件 在 Vue 中，自定义指令是实现复杂组件的重要手段，而 Select 组件是最常用的 UI 组件之一。本文将介绍如何使用 Vue 自定义指令实现 Select 组件。 一、Vue 自定义指令简介 在 ...
Vue制作一个可供搜索和输入的组件
qq_43600406的博客
07-06 496
Vue制作一个可供搜索和输入的组件 Vue制作一个可供搜索和输入的组件 背景需求：公司要求一个下拉框能够支持搜索，手动输入，下拉框没有自己需要的值时，支持手动输入，并自动保存进数据库 公司使用的UI框架是Ant Design of Vue,找到了Select选择器组件，但是这个组件功能有点复杂了，不太适合公司需要，所以我打算自己制作一个自定的组件来实现功能 效果图 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写
Vue —— Search搜索组件
weixin_54966486的博客
03-28 5591
步骤 拆分静态组件（略） 写 Api 接口 api/request.js //对 axios 进行二次封装 import axios from "axios"; //引入进度条 nprogress 以及样式(可修改) 并在请求和响应拦截器中 调用 star 和 done 方法 import nprogress from 'nprogress'; import "nprogress/nprogress.css" //1.利用axios对象的create,去创建一个axios实例 //2.
react-搜索框组件
热门推荐
weixin_39612961的博客
06-03 1万+
借鉴React文档 “React的编程思想”章节，实现一个类似百度搜索的搜索框组件文档中的步骤为构建组件层次用React构建一个静态版本确定state的最小表示确定state的位置添加反向数据流一、构建组件层次结构如下-SearchBox    -SearchInput    -SearchResult        -SearchResultList因后续望在下拉框显示“加载中”“已全部加载” ...
element iview vue重置表单不起作用？ this.$refs.searchForm.resetFields()； this.$refs[form].resetFields()；
小哈力----一个小前端工程师
05-12 1万+
vue项目出现这种无法重置表单问题，按照下面的5步，挨个检查一遍，基本问题就解决了。如果还是解决不掉，欢迎留言。 本方法同时适用于iview和element Ui
vue+elementUI 搜索栏公共组件封装，封装多搜索条件通用组件
06-09
如果你要封装一个支持多搜索条件的搜索栏公共组件，可以考虑以下步骤： 1. 创建一个组件 SearchBar，它包含一个输入框和一个搜索按钮，以及一个下拉框用于选择搜索条件。这个组件可以接收一个 props，用来指定搜索...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值