【ele-form-search】 组件 padding-bottom 设置动态计算【便于确定按钮位置】

<template>
  <div class="container">
    <ele-form-search
      class="container_search"
      :style="searchStyle"
      :form-data="searchData"
      :form-desc="searchDesc"
      @search="fetchData"
    />
  </div>
</template>

<script>
export default {
  // ...
  computed: {
    //...
    searchDesc() {
      return {
        xsly: {
          type: 'radio',
          label: '线索来源',
          layout: 24,
          options: xslyOptions,
          required: true,
          render(h, content, value) {
            return <span>{filter_list(value, xslyOptions)}</span>
          }
        },
        lsh: {
          vif: ['vehCheck', 'otherCheck'].includes(_this.formData.xsly),
          type: 'input',
          label: '流水号',
          layout: 24,
          required: !['otherCheck'].includes(_this.formData.xsly)
        },
        fzjg: {
          type: 'input',
          label: '盟市',
          layout: 24,
          required: !['otherCheck'].includes(_this.formData.xsly)
        },
        jczmc: {
          vif: ['vehCheck', 'otherCheck'].includes(_this.formData.xsly),
          type: 'select',
          label: '网点名称',
          layout: 24,
          options: _this.jczmcOptions,
          required: !['otherCheck'].includes(_this.formData.xsly),
          attrs: {
            clearable: true
          },
          render(h, content, value) {
            return <span>{filter_list(value, _this.jczmcOptions)}</span>
          }
        },
        sjcs: {
          vif: ['reviewCheck'].includes(_this.formData.xsly),
          type: 'input',
          label: '网点名称',
          layout: 24,
          required: true,
          attrs: {
            clearable: true
          }
        },
      }
    },
    // 【主要代码】
    searchStyle() {
      let layoutCount = 0
      Object.keys(this.searchDesc).forEach((key) => {
        this.searchDesc[key].vif !== false && (layoutCount += this.searchDesc[key].layout || 6)
      })
      return {
        '--paddingBottom': layoutCount % 24 === 0 ? '40px' : '0px'
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.container_search {
   padding: 10px 10px  var( 按钮位置); /* 【主要代码】 */
   margin-bottom: 10px;
 }
</style>