Vue

component标签实现动态表单组件

很早之前就使用过Vue的动态组件标签component实现功能模块自定义排序功能,这次使用Element组件库实现表单搜索通用组件

这里我主要拿三个常用的组件举例,输入框(Input)、选择框(Select)以及时间选择器DatePicker

  • 话不多说,我们首先创建一个组件search-form
<template>
  <div class="search-form-wrapper">

  </div>
</template>

<script>
export default {
  name: "searchForm"
}
</script>

<style scoped>

</style>
  • 引入Element的Input、Select和DatePicker
import { Input, Select, DatePicker } from 'element-ui'
  • 定义可绑定的组件类型数组。只需要传type类型进来,绑定对应的组件就行了
    props: {
      queryList: {
        type: Array,
        require: true,
        default: []
      }
    },
    data() {
      return {
        componentList: [
          { type: 'input', component: Input },
          { type: 'select', component: Select },
          { type: 'datePicker', component: DatePicker }
        ]
      }
    },
  • 循环渲染需要动态绑定的表单数组
    <div class="search-item" v-for="(item, index) in queryList" :key="item.id + '_query_' + index">
      <div class="search-label">{{item.label}}</div>
      <div class="search-inner">
        <component
          clearable
          size="small" // 组件尺寸
          :style="item.style ? item.style : 'width: 240px;'"
          :id="item.id"
          :name="item.name"
          v-bind:is="componentList.filter(it => {return it.type === item.type})[0].component" // 根据type类型绑定对应组件
          :placeholder="item.tips" // placeholder
          v-model="item.value"
          :value-format="item.format" // DatePicker format
          :type="item.dateType" // DatePicker type
          :range-separator="item.separator"
          :start-placeholder="item.startPlaceholder" // DatePicker 范围开始placeholder
          :end-placeholder="item.endPlaceholder" // DatePicker 范围结束placeholder
          :default-time="item.defaultTime" // DatePicker 时间默认值
        >
          <el-option v-if="item.type === 'select'" v-for="(it, ind) in item.options"
                     :key="item.id + '_option_' + it.value" :label="it.label" :value="it.value"></el-option>
        </component>
      </div>
    </div>
  • 需要添加”搜索”和”重置”按钮
    <el-button style="margin-bottom: 12px;" type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
    <el-button style="margin-bottom: 12px;" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>

js部分:
    methods: {
      handleQuery: function() {
        this.$emit("handleQuery");
      },
      resetQuery: function() {
        this.$emit("resetQuery");
      }
    }
  • 组件代码基本编写完毕,接下来就是应用了,引入组件,绑定需要动态绑定的数组
<template>
  <div class="home">
    <search-form :query-list="queryList" @handleQuery="handleQuery" @resetQuery="resetQuery"></search-form>
  </div>
</template>

<script>
import SearchForm from "../components/search-form";

export default {
  name: 'Home',
  components: {
    SearchForm
  },
  data() {
    return {
      queryList: [
        {
          id: "machineId",
          name: "machineId",
          label: "设备ID",
          tips: "请输入设备ID",
          type: "input",
          value: "",
        },
        {
          id: "category",
          name: "category",
          label: "设备类型",
          tips: "请选择设备类型",
          type: "select",
          value: "",
          options: [
            {label: "CNC", value: "CNC"},
            {label: "IMM", value: "IMM"}
          ],
        },
        {
          id: "createDateRange",
          name: "createDateRange",
          label: "创建时间",
          type: "datePicker",
          format: "yyyy-MM-dd HH:mm:ss",
          separator: "-",
          dateType: "datetimerange",
          style: "width: 340px",
          startPlaceholder: "开始",
          endPlaceholder: "结束",
          value: "",
          propName: ["createDateStart", "createDateEnd"],
          defaultTime: ["00:00:00", "23:59:59"]
        },
      ],
    }
  },
  methods: {
    handleQuery: function () {

    },
    resetQuery: function () {

    }
  }
}
</script>

实现后的效果:

实现效果
  • 重置方法,我们只需要清空绑定数组的value
      this.queryList.forEach((item) => {
        item.value = "";
      });
  • 查询方法,我们最后调用接口需要的格式是{name: value}
/** 列表请求参数对象构造 */
export function buildSearchQuery(array) {
  let obj = {}
  array.forEach(item => {
    if (null !== item.value && '' !== item.value) {
      if (item.type === 'datePicker') {
        if (item.dateType === "date") {
          obj[item.id] = item.value;
        } else {
          if (null !== item.value && '' !== item.value) {
            if (item.propName) {
              obj[item.propName[0]] = item.value[0];
              obj[item.propName[1]] = item.value[1];
            } else {
              obj['beginTime'] = item.value[0];
              obj['endTime'] = item.value[1];
            }
          }
        }
      } else {
        obj[item.id] = item.value
      }
    }
  })
  return obj
}

项目源码:https://github.com/cqHyp/search-form.git

分类: Vue
文章已创建 108

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关文章

开始在上面输入您的搜索词,然后按回车进行搜索。按ESC取消。

返回顶部