elemnt-ui动态生成多个表单数据绑定

最新推荐文章于 2024-07-12 14:30:32 发布

是夜色太荒芜

最新推荐文章于 2024-07-12 14:30:32 发布

阅读量698

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qichangleixin/article/details/118331590

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

功能效果
因为左侧除了基本条件，其它三个card根据不同的表单会有不同的结果。右侧因此也会动态改变。解决数据绑定问题尝试了多次，最后发现却是因为一个细节问题，特此记录！
原因就是因为动态绑定的对象要提前生成。
因为我绑定的对象格式是这样

batchQueryFormData: {
‘batch_table’: {
‘payNum’: ‘’,
‘payMethod’: ‘’
},
‘payList_batch’: {},
‘buyInfo_batch’: {}
}
切记内层的batch_table，payList_batch，buyInfo_batch也要提前生成

展示代码

batchQueryFormData：数据绑定对象
batchQueryColumn：左侧勾选后，右侧追加的表单项
SearchBlocks：封装的表单组件
生成一个form或者循环生成多个form，数据绑定效果是一样的

<el-form ref="batchQueryForm" :model="batchQueryFormData" label-width="80px">
  <el-row v-for="(batchQueryColumn, key) in batchQueryColumns" :key="key">
    <el-card v-if="batchQueryColumn.length>0" class="box-card" :header="batchQueryHeader(key)">
      <template v-for="(item,index) in batchQueryColumn">
        <SearchBlocks
          :key="key+index"
          :query-data="batchQueryFormData[key]"
          :dynamic-data="dynamicData"
          :record="item"
        />
      </template>
    </el-card>
  </el-row>
</el-form>

data

data() {
   return {
     batchQueryColumns: {},
     batchQueryFormData: {},
 }

mounted

mounted() {
this.batchConditionColumns = this.tableColumns.filter(config => {
  return config.type === 'batch' && config.visible === false
})
this.batchConditionColumns.forEach(item => {
  // 提前生成绑定对象
  this.$set(this.batchQueryFormData, item.key, {})
  item.columns = item.columns.filter(column => { return !this.noQueryColumn.includes(column.type) })
  this.batchQueryColumns[item.key] = []
})
}

事件

左侧check事件

handleBatchCheckedChange(value, batchKey) {
      const batchRecord = this.batchConditionColumns.filter(item => {
        return item.key === batchKey
      })[0]
      batchRecord.columns.forEach(column => {
        if (column.isShow && !column.flag) {
          column.flag = true
          this.batchQueryColumns[batchKey].push(column)
          switch (column.type) {
            case 'time':
              this.$set(this.batchQueryFormData[batchKey], column.key, ['00:00:00', '23:59:00'])
              break
            case 'checkbox':
              this.$set(this.batchQueryFormData[batchKey], column.key, [])
              break
            case 'number':
              this.$set(this.batchQueryFormData[batchKey], column.key, 0)
              break
            default:
              this.$set(this.batchQueryFormData[batchKey], column.key, '')
              break
          }
        } else if (!column.isShow && column.flag) {
          column.flag = false
          this.batchQueryColumns[batchKey] = this.batchQueryColumns[batchKey].filter((item) => item.key !== column.key)
          delete this.batchQueryFormData[batchKey][column.key]
        }
      })
    }