VUE封装表下拉组件使用element

1. 组件代码：

<template>
  <el-select  :placeholder="placeholder" :disabled="disabled" :value="getValueSting" @change="handleInput">
    <el-option
      v-for="dict in dictData"
      :key="dict.value"
      :label="dict.lable" :value="dict.value"
    ></el-option>
  </el-select>
</template>

<script>

// 导入接口（需要改）
import { getTableTagData } from "@/api/operation/common";

export default {
  name: 'tableSelectTag',
  props: {
    // 表名
    tableName: {
      type: String,
      required: true
    },
    // 显示字段名
    tableShowName: {
      type: String,
      required: true
    },
    // 填充的值
    tableShowVal: {
      type: String,
      required: true
    },
    // SQ条件
    sqlSelect: {
      type: String,
      required: false,
      default: null
    },
    placeholder: String,
    disabled: Boolean,
    value: [String, Number],
  },
  computed: {
    getValueSting(){
      // update-begin author:wangshuai date:20200601 for: 不显示placeholder的文字 ------
      // 当有null或“” placeholder不显示
      return this.value != null ? this.value.toString() : undefined;
      // update-end author:wangshuai date:20200601 for: 不显示placeholder的文字 ------
    },
  },
  data() {
    return {
      dictData: []
    }
  },
  created() {
    this.initDictData()
  },
  methods: {
    initDictData(){
      // 查询下拉数据
      var obj = {
        tableName: this.tableName,
        tableShowName: this.tableShowName,
        tableShowVal: this.tableShowVal,
        sqlSelect: this.sqlSelect
      }
      // 请求数据（需要改）
      getTableTagData(obj).then(res => {
        // console.log(res)
        this.dictData = res.data
      })
    },
    handleInput(e='') {
      let val;
      if(Object.keys(e).includes('target')){
        val = e.target.value
      }else{
        val = e
      }
      console.log(val);
      this.$emit('change', val);
      //LOWCOD-2146 【菜单】数据规则，选择自定义SQL 规则值无法输入空格
      this.$emit('input', val);
    },
  }
}
</script>

<style scoped>

</style>

2. 使用：

<table-select-tag v-model="form.jpSb"  placeholder="请选择检票设备" tableName="szpt_zygl_znsb" tableShowName="name" tableShowVal="id" sqlSelect="type=3"></table-select-tag>