前端配置化表單組件設計方法-有解無憂

一、背景

前端開發中涉及表單的頁面非常多，看似功能簡單，開發快速，實則占去了很大一部分時間，當某個表單包含元素過多時還會導致html代碼過多，vue檔案過大，從而不容易查找、修改和維護，為了提高開發效率及降低維護成本，下面介紹表單配置化組件的封裝原理與封裝方法，

二、技術方案

如上圖所示，封裝表單配置化組件的關鍵點有三個一是如何解決表單元素排布的行列問題，二是表單資料的系結問題，三是表單元素的引數配置校驗等問題，下面分別介紹這三個問題的解決方法，

?配置化表單組件的入參及說明

引數	說明	型別	可選值	默認值
labelWidth	表單元素label所占寬度	String	——	150px
columnList	表單元素所組成的配置，是一個陣列	Array	——	[]
formData	表單元素值的集合	Object	——	{}
columnSpan	表單排布分欄	Number	——	24
size	表單元素尺寸	String	medium / small / mini	medium

?計算配置化表單的行數，本表單通過基礎的24分欄計算表單最終的行數和列數，通過下面方法最終得到一個關于行列的二維陣列

newColumnList() {
  const newColumnList= []
  const row = Math.floor(24 / this.columnSpan)
  let newColumnItem = []
  for(let i=0; i< this.columnList.length; i++) {
    newColumnItem.push(this.columnList[i])
    if(newColumnItem.length === row || i === this.columnList.length-1) {
      newColumnList.push(newColumnItem)
      newColumnItem = []
    }
  }
  return newColumnList
}

?通過上面得到的二維陣列進行回圈渲染，首先回圈渲染行，其次回圈渲染列，本方案采用element中的表單，當然也可以用其他組件庫或者原生表單進行渲染，其原理通用，最終將會根據引數column.type決定加載哪一個具體的表單元素，

<el-form ref="form" :model="formData" :label- :size="size">
    <el-row :gutter="20" v-for="(element,index) in newColumnList" :key="index+'formRow'">
      <template v-for="(item, index) in element" >
        <column
          :key="index + 'formView'"
          :columnSpan="columnSpan"
          :column="item"
          :formData="https://www.cnblogs.com/Jcloud/archive/2023/05/06/formData"
        />
      </template>
    </el-row>
</el-form>

?column組件最終根據type加載具體的表單元素，下面展示column組件的入參及其說明，通過component加載不同的表單元素

引數	說明	型別	可選值	默認值
column	表單元素的具體配置	Object	——	{}
formData	表單元素值的集合	Object	——	{}
columnSpan	表單排布分欄	Number	——	24

<el-col :span="columnSpan">
     <component
      :is="column.type + 'View'"
      :column="column"
      :formData="https://www.cnblogs.com/Jcloud/archive/2023/05/06/formData"
      v-model="formData[column.name]"
      :columnSpan="columnSpan"/>
 </el-col>

?這里主要以select表單元素為例進行說明，表單元素的雙向系結、校驗以及值更新等問題

引數	說明	型別	可選值	默認值
column	表單元素的具體配置	Object	——	{}
value	表單元素值	Number/String/Array	——	——

?column引數

引數	說明	型別	可選值	默認值
placeholder	空值說明	String	——	——
required	是否必填	Boolean	——	——
rules	校驗規則	Array	——	——
title	表單元素label	String	——	——
name	表單元素值名稱	String	——	——
multiple	是否多選	Boolean	——	——
filterable	是否過濾	Boolean	——	——
disabled	是否禁用	Boolean	——	——
dictionary	下拉選項列舉	Array	——	——
changeFunction	值改變時的回呼函式	Function	——	——

<el-form-item :label="column.title + '：'" :prop="column.name" :rules="rules">
    <el-select
      v-model="val"
      clearable
      :multiple="column.multiple"
      :filterable="column.filterable"
      :placeholder="'請選擇' + column.title"
      :disabled="column.disabled"
      style="width: 100%"
      @change="onChange"
      @clear="onClear">
      <el-option v-for="item in column.dictionary" :key="item.code" :label="item.name" :value="https://www.cnblogs.com/Jcloud/archive/2023/05/06/item.code">
      </el-option>
    </el-select>
</el-form-item>

rules:  [
    {
      required: this.column.required,
      message: this.column.placeholder placeholder ? this.column.placeholder : `請輸入${this.column.title}`,
      trigger: 'change'
    },
    ...this.column.rules
 ]

onChange(){
  this.$emit('input',this.val)
  if(this.column && this.column.changeFunction){
    this.column.changeFunction(this.val)
  }
},
onClear(){
  this.onChange()
}

三、專案實踐

?配置化表單為bs-form，在頁面中引入bs-form表單組件

<bs-form ref="formDemo"
     :columnList="columnList"
     :formData="https://www.cnblogs.com/Jcloud/archive/2023/05/06/formData"
     :columnSpan="columnSpan"
     label>
</bs-form>
<el-row style="text-align: center;">
  <el-button type="primary"
             @click="onSave">保存</el-button>
  <el-button @click="onCancel">取消</el-button>
</el-row>

?formData引數

formData: {
    name: '',
    yearIncome: '', // 業務型別
    goodsCategoryId: '', // 托寄物品類id
    projectManagerErp: '', // 專案經理erp
    projectName: '', // 專案名稱
    projectStage: '', // 專案階段編碼
    projectStandardName: '', // 標準名稱
    projectYear: 2023, // 年份
    startRegionId: '', // 始發區域id
    startBattleId: '', // 始發戰區id
    address: [], // 省市
    category: null, //圖文型別
    range: [] //發布范圍
 }

?分欄引數

columnSpan: 6

?表單配置引數

columnList(){
  const self = this
  return [
    {
      type: 'text',
      name: 'name',
      title: '專案名稱',
      required: true,
      maxlength: 20,
      showwordlimit: true,
      placeholder: '請輸入'
    },
    {
      name: 'category',
      type: 'radio',
      dictionary: [
        {
          code: 1,
          name: '型別一'
        },
        {
          code: 2,
          name: '型別二'
        }
      ],
      title: '圖文型別',
      required: true
    },
    {
      name: 'range',
      type: 'checkbox',
      title: '發布范圍',
      dictionary: [
        {
          code: 1,
          name: '范圍一'
        },
        {
          code: 2,
          name: '范圍二'
        }
      ],
      required: true
    },
    {
      type: 'text',  // 欄位型別文本框
      name: 'yearIncome',  //與后臺對接欄位
      title: '年均收入',  // 前端展示欄位
      required: true, // 必填項設定
      maxlength: 50,  // 字串長度限制
      showwordlimit: true, // 是否顯示字串長度
      placeholder: '請輸入', // 占位文本提示
      rules: [
        { pattern: /(^[1-9]([0-9]+)?(.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9].[0-9]([0-9])?$)/, message: '請輸入數字最多兩位小數' }
      ],
    },
    {
      type: 'select',
      name: 'goodsCategoryId',
      title: '托寄物品類',
      required: true,
      filterable: true,
      placeholder: '請選擇',
      dictionary: [{
        name: '蘋果',
        code: '1'
      },{
        name: '手機',
        code: '2'
      },{
        name: '測驗',
        code: '3'
      },{
        name: '櫻桃',
        code: '7'
      },{
        name: '荸薺',
        code: '9'
      }]
    },
    {
      type: 'select',
      name: 'startRegionId',
      title: '區域',
      required: true,
      placeholder: '請選擇',
      dictionary: [{
        name: '銷售-華北區域',
        code: '1'
      },{
        name: '銷售-華東區域',
        code: '2'
      },{
        name: '銷售-華南區域',
        code: '3'
      },{
        name: '銷售-西南區域',
        code: '4'
      },{
        name: '銷售-華中區域',
        code: '5'
      },{
        name: '銷售-東北區域',
        code: '6'
      }],
      // 點擊下來觸發切換聯動的事件，為一個函式
      changeFunction: function (val) {
      }
    }, {
      type: 'select',
      name: 'startBattleId',
      title: '戰區',
      required: true,
      placeholder: '請選擇',
      dictionary: this.battleByRegionList
    }, {
      type: 'select',
      name: 'projectStage',
      title: '專案階段',
      required: true,
      placeholder: '請選擇',
      dictionary: [{
        name: '專案發起階段',
        code: '10'
      },{
        name: '專案調研階段',
        code: '20'
      },{
        name: '可行性分析階段',
        code: '30'
      },{
        name: '立項階段',
        code: '40'
      }]
    }, {
      type: 'text',
      name: 'projectStandardName',
      title: '標準名稱',
      required: true,
      placeholder: '請輸入',
      append: '.com',  // 文本框后置內容
    }, {
      type: 'text',
      name: 'projectManagerErp',
      title: '專案經理',
      required: true,
      placeholder: '請輸入'
    },{
      type: 'cascader',  // 欄位型別下拉框
      name: 'address',   //與后臺對接欄位
      title: '省市區',  // 前端展示欄位
      required: true, // 必填項設定
      placeholder:'請選擇',  // 占位文本提示
      dictionary: [{
        value: 'shanxi',
        label: '陜西省',
        children: [{
          value: 'xian',
          label: '西安市',
          children: [{
            value: 'yanta',
            label: '雁塔區'
          }, {
            value: 'beilin',
            label: '碑林區'
          }, {
            value: 'xincheng',
            label: '新城區'
          }, {
            value: 'weiyang',
            label: '未央區'
          }]
        }]
      }],
      // 點擊下來觸發切換聯動的事件，為一個函式
      changeFunction: function(){}
    },{
      type: 'static',
      name: 'projectYear',
      title: '年份'
    }
  ]
}

?表單保存

// 保存
async onSave() {
  const valid = await this.$refs.formDemo.onValidate()
  if(valid) {
    this.$message.success('校驗通過')
  }else {
    this.$message.error('校驗失敗')
  }
}

四、成果展示

作者：京東物流田雷雷

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/551837.html

標籤：其他

上一篇：記錄-VUE中常用的4種高級方法

下一篇：返回列表