cjml-param-select

一个基于elementUi的插件 -

安装

npm install cjml-param-select

使用

• 在main.js中添加

import cjmlParamSelect from 'cjml-param-select/dist/index.umd'

Vue.use(cjmlParamSelect);

在Vue组件中使用

<template>
    <div id="app">
        <cjml-param-select
        :options="options"
        @currentParamData="handleCurrentParamData"
        @paramListVal="getParamListVal"
        ></cjml-param-select>
    </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      options: [
        {
          name: "",
          value: "",
          listType: [],
          listVal: [],
          flag: true,
        },
      ],
    };
  },

  methods: {
    handleCurrentParamData({ identification, data }) {
      // 新增
      if (identification == "increase") {
        let typeList = this.options[0].listType;
        this.options.push({
          name: "",
          value: "",
          listType: typeList,
          listVal: [],
          flag: false,
        });
      } else {
        // 删除
        const index = this.options.indexOf(data);
        if (index != -1) {
          this.options.splice(index, 1);
        }
      }
    },
    getParamListVal({ data, index }) {
      this.options[index].value = "";
      if (data) {
        // ajax 请求 data.autoParameterTypeId
        this.options[index].listVal = [
          { autoParameterId: 9, autoParameterValue: "汽油" },
          { autoParameterId: 99, autoParameterValue: "油罐车" },
        ];
      } else {
        this.options[index].listVal = [];
      }
    },
    getParamListType() {
      // ajax 请求
      let res = [
        {
          autoParameterTypeId: 102,
          autoParameterTypeName: "年款",
          type: 0,
        },
        {
          autoParameterTypeId: 103,
          autoParameterTypeName: "配置等级",
          type: 0,
        },
      ];
      // 回显
      if (this.$route.query.paramList) {
        let data = JSON.parse(this.$route.query.paramList);
        data.forEach((item) => {
          this.options.push({
            name: item.autoParameterTypeId,
            value: item.autoParameterId,
            listType: res,
            listVal: [],
            flag: false,
          });
        });
        this.options[0].flag = true;
      } else {
        this.options.push({
          name: "",
          value: "",
          listType: res,
          listVal: [],
          flag: true,
        });
      }
    },
  },
};
</script> 

属性

属性名	说明	类型	默认值
operation	参数类型下拉菜单数据源	array	-

Events 事件

事件名	说明	参数
@operation	添加或者删除触发的事件	increase（添加），decrease（删除）
@changeParamType	参数类型Change事件	item（当前选定对象），index（下标）