modal下拉框渲染封装

业务需求

业务需求如下:
不同的筛选条件对应不同的筛选项目列表。
业务逻辑如下：
点击不同的筛选条件记录下对应的key类型，通过key类型调用不同接口获取下拉数据。

数据类型

//此处为筛选条件的下拉内容
export const conditionData = [
  {
    label: '渠道',	//下拉框label展示名称
    value: 'channel',	//下拉框value类型名称 也就是要传递给后台以及判断筛选项目的值
    type: 'treeSelect',	//此处为展示不同的下拉框，此处项目需求为树结构，下拉框，级联都有的需求
    async getOptions() {	//此处为调用接口获取筛选项目的数据
      const res = await getOpenChannel()
      return res
    }
  },
  {
    type: 'cascader',
    label: 'CRM渠道',
    value: 'crm_channel',
    fieldNames: { label: 'label', value: 'value', children: 'children' },
    async getOptions() {
      const res = await getCrm()
      return res
    }
  },
  {
    label: '来源场景',
    value: 'scene',
    type: 'select',
    async getOptions() {
      const res = await getScent()
      return res
    }
  }
]

筛选条件

//html
  <div class="row">
    <div class="label">筛选条件：</div>
    <a-select
      style="width: 300px"
      labelInValue
      placeholder="请选择筛选条件"
      showSearch
      :options="filterData"
      @change="onTypeChange"
    ></a-select>
  </div>
//script
 onTypeChange(v) {
    this.modalData = {
      key: v.key,
      value: undefined
    }
    //筛选条件选中的key值赋值给modalData的key，下面要取出对应key的其他对应数据。
  }

computed计算

  computed: {
  //originalFilterData就是一开始传递的数据列表conditionData 
 //currentSelectItem就是查询出对那个的每一项的具体值
    currentSelectItem() {
      return (
        this.originalFilterData.find((i) => i.value === this.modalData.key) ||
        {}
      )
    }
}

获取筛选项目列表值

//html
 <template v-if="currentSelectItem.type === 'select'">
      <div class="label">筛选项目：</div>
      <a-select
        :value="
          modalData.value
            ? modalData.value.map(({ value, label }) => ({
                key: value,
                label
              }))
            : []
        "
        style="width: 300px"
        mode="multiple"
        labelInValue
        :placeholder="`请选择${currentSelectItem.label}`"
        :filterOption="filterOption"
        :options="currentSelectOptions[currentSelectItem.value] || []"
        @dropdownVisibleChange="
          (open) => onDropdownVisibleChange(open, currentSelectItem)
        "
        @change="
          (v) =>
            onSelectValueChange(
              v.map(({ key, label }) => ({
                value: key,
                label
              }))
            )
        "
      ></a-select>
    </template>

    <template v-if="currentSelectItem.type === 'cascader'">
      <div class="label">
        筛选项目：
      </div>
      <a-cascader
        style="width: 300px"
        placeholder="请选择"
        //当前type类型下的下拉数据框列表
        :options="currentSelectOptions[currentSelectItem.value] || []"
        :default-value="cascaderDefault"
        change-on-select
        :fieldNames="currentSelectItem.fieldNames"
        //此为筛选项目打开事件
        @popupVisibleChange="
          onDropdownVisibleChange($event, currentSelectItem)
        "
        //此为筛选项目改变赋值
        @change="(v, options) => onCascaderValueChange(v, options)"
      >
      </a-cascader>
    </template>

//script
	data(){
		return{
			currentSelectOptions:{}
		}
	}
  async onDropdownVisibleChange(open, item) {
  //item就已经代表了当前对应conditionData的值
  //判断筛选项目打开，并且item有getOptions获取列表事件，并且对应的currentSelectOptions中没有值
  //为了防止每次点开就掉用接口的判断
    if (
      open &&
      item.getOptions &&
      !this.currentSelectOptions[item.value]?.length
    ) {
      this.$set(
        this.currentSelectOptions,
        item.value,
        await item.getOptions()
      )
    }
  }