[JavaScript知识库]动态form筛选配置

?调用

<search-com :searchList="searchList" :model="model"></search-com>

1. searchList:筛选数组

* type ? ? ? ? //筛选类型：Input，Select，DatePicker，MonthPicker

* params ? ? ? //传递的参数；

* label ? ? ? ?//筛选标题

* class ? ? ? ?//样式

* placeholder ?//placeholder

* api ? ? ? ? ?//接口中转proxy

* url ? ? ? ? ?//请求url

* list ? ? ? ? //api和url为空时，Select类型选择器传入的筛选数据

* itemkey ? ? ?//Select类型选择器的选中值；若为空，表示返回的数组

* itemlabel ? ?//Select类型选择器的展示值；若为空，表示返回的数组

searchCom.vue

<template>
  <div>
    <div v-for="(data,index) in searchList" :key="index">
      <el-form>
        <el-form-item :label="data.label?data.label:''">
          <component :is="'Tp' + data.type" :data="data" :model="model"></component>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import components from "./components.js";
import moment from 'moment';
export default {
  name: 'searchCom',
  components: { ...components },
  props: {
    searchList: {
      type: Array,
      required: true
    },
    model: Object
  },
  created() {
  }
}
</script>

components.js

import Tpinput from './components/input';
import TpselectWithConfig from './components/select';
import TpselectWithRemote from './components/selectAsyc';
import TpareaDate from './components/datePicker';
import TpMonthPicker from './components/monthPicker';
import TpTabs from './components/tabs';

export default {
    Tpinput, TpselectWithConfig, TpselectWithRemote, TpareaDate, TpMonthPicker,TpTabs
}

components

api

static async getcommon(type, url, params) {
        if (type == 'post') {
            return this.proxyPost(url, params)
        } else if (type == 'get') {
            return this.proxyGet(url, params)
        }
    }

selectAsyc>index.js

<template>
  <div>
    <el-select v-model="model[data.param]" filterable :placeholder="data.placeholder||'请选择'" :multiple="data.multiple" :remote="data.hasremote?true:false"
      :remote-method="remoteMethod" :loading="loading" v-if="data.itemkey&&data.itemlabel">
      <el-option v-for="(item,index) in selectList" :key="index" :label="item[data.itemlabel]" :value="item[data.itemkey]">
      </el-option>
    </el-select>
    <el-select v-model="model[data.param]" filterable :placeholder="data.placeholder||'请选择'" :multiple="data.multiple" :remote="data.hasremote?true:false"
      :remote-method="remoteMethod" :loading="loading" v-else>
      <el-option v-for="(item,index) in selectList" :key="index" :label="item" :value="item">
      </el-option>
    </el-select>
  </div>
</template>
<script>
import api from "../../api/api";
export default {
  props: {
    data: {
      type: Object,
      required: true
    },
    model: Object
  },
  data() {
    return {
      loading: false,
      selectList: [],
    }
  },
  async created() {
    if (!this.data.hasremote) {
      await this.getSelectList()
    }
  },
  methods: {
    async getSelectList() {
      try {
        let res = await api.getcommon(this.data.api.apitype, this.data.api.apipath, this.data.api.apiparam ? this.data.api.apiparam : null)
        if (res.code == 1) {
          this.selectList = res.data
        } else {
          this.selectList = []
        }
      } catch (err) {
        console.log(err)
      }
    },
    async remoteMethod(query) {
      if (query !== '') {
        let obj = {}
        obj[this.data.param] = query
        this.loading = true;
        const result = await api.getcommon(this.data.api.apitype, this.data.api.apipath, this.data.api.apiparam ? this.data.api.apiparam : null)
        this.loading = false;
        const { code, data } = result;
        if (code === '1') {
          this.selectList = data;
        }
      } else {
        this.selectList = [];
      }
    }
  }
}
</script>

input>index.vue

<template>
  <div>
    <el-input v-model="model[data.param]" :placeholder="data.placeholder||'请输入'+data.label" class="w150"></el-input>
  </div>
</template>
<script>
export default {
}
</script>
<script>
export default {
  props: {
    data: {
      type: Object,
      required: true
    },
    model: Object
  },
}
</script>