基于element-plus二次封装基础组件-----下拉表格

先说一个问题  element-plus版本的引用方法

2.3.7以及之前的引用方法：
import zhCN from "element-plus/lib/locale/lang/zh-cn";
import en from "element-plus/lib/locale/lang/en";
2.3.8的引用方法：
import zhCN from "element-plus/dist/locale/zh-cn.mjs";
import en from "element-plus/dist/locale/en.mjs";

示例图

封装组件无非就是两点 一灵活  二可复用   

<el-select
    ref="selectRef"
    v-model="props.itConfig.name"
    :placeholder="props.itConfig.placeholder"
    :loading="loading"
    :filterable="props.itConfig.filterable"
    :filter-method="filterMethod"
  >
    <template #empty>
      <div class="table" :style="{ width: `${props.itConfig.tableWidth}px` }">
        <el-table
          :data="props.itConfig.tableData"
          border
          style="width: 100%"
          @row-click="rowClick"
        >
          <el-table-column
            v-for="item in props.itConfig.tableColumn"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            :align="item.align || 'center'"
            :width="item.width"
            :show-overflow-tooltip="item.noShowTip"
          >
            <template #default="{ row, $index }">
              <template v-if="item.render">
                <render-col
                  :column="item"
                  :row="row"
                  :render="item.render"
                  :index="$index"
                />
              </template>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination" v-if="isShowPagination">
          <el-pagination
            v-model:current-page="props.itConfig.currentPage"
            v-model:page-size="props.itConfig.pageSize"
            layout="->, total, prev, pager, next"
            :total="props.itConfig.tableTotal"
            background
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </template>
  </el-select>

说一下遇到的问题：

        element-plus 的el-select 组件的filterable设置成true ，自带的blur()方法就会失效

解决方案：

//vue3的写法
const onBlur = () => {
  //此处代码是为了解决 element-plus 的filterable属性设置为true，selectRef.value.blur()方法失效的问题
  let TimerID;
  clearTimeout(TimerID);
  selectRef.value.focus();
  TimerID = setTimeout(() => {
    selectRef.value.blur();
  }, 200);
};

//vue2的写法 在el-select上配置@focus="changeSelectedCondition"

changeSelectedCondition () {
     this.$refs['select'].$refs.input.blur = () => {
          console.log("999===",this.formData.selection_criteria)

      }
  }