element的下拉框封装

javascript 复制代码
<!-- 仓位 -->
<template>
  <el-select
    clearable
    :value="value || []"
    class="ele-fluid"
    :filterable="true"
    placeholder="仓位"
    @input="updateValue"
  >
    <el-option
      v-for="item in data"
      :key="item.id"
      :value="item.id"
      :label="item.storageName"
    />
  </el-select>
</template>

<script>
  // import { listStorage } from '@/api/basic/storage/index';
  import { listStorage } from '@/api/basic/storage';
  export default {
    props: {
      // 选中的数据(v-model)
      value: [Array, String, Number],
      // 提示信息
      placeholder: {
        type: String,
        default: '请选择转入仓位'
      }
    },
    data() {
      return {
        //班次数据
        data: []
      };
    },
    created() {
      listStorage({})
        .then((list) => {
          this.loading = false;
          this.data = list;
          //   this.data = this.$util.toTreeData({
          //     data: list,
          //     idField: 'organizationId',
          //     parentIdField: 'parentId'
          //   });
          console.log(this.data);
          // this.$nextTick(() => {
          //   this.onNodeClick(this.data[0]);
          // });
        })
        .catch((e) => {
          this.loading = false;
          this.$message.error(e.message);
        });
    },
    methods: {
      /* 更新选中数据 */
      updateValue(value) {
        this.$emit('input', value);
      }
    }
  };
</script>

@input="updateValue"

:value="value || []"

相关推荐
Moment1 分钟前
到底选 Nuxt 还是 Next.js?SEO 真的有那么大差距吗 🫠🫠🫠
前端·javascript·后端
神州数码云基地2 分钟前
首次开发陌生技术?用 AI 赋能前端提速开发!
前端·人工智能·开源·ai开发
程序员小易20 分钟前
前端轮子(2)--diy响应数据
前端·javascript·浏览器
前天的五花肉20 分钟前
D3.js研发Biplot(代谢)图
前端·javascript·css
董世昌4123 分钟前
JavaScript 中 undefined 和 not defined 的区别
java·服务器·javascript
oh,huoyuyan26 分钟前
【实用技巧】火语言RPA:界面『日期时间』控件,实现网页日期自动填写
前端·javascript·rpa
程序员小寒26 分钟前
前端性能优化之Webpack篇
前端·webpack·性能优化
谢尔登26 分钟前
React的Fiber架构
前端·react.js·架构
我是华为OD~HR~栗栗呀29 分钟前
(华为od)21届-Python面经
java·前端·c++·python·华为od·华为·面试
武昌库里写JAVA32 分钟前
java设计模式 - 工厂方法模式
vue.js·spring boot·sql·layui·课程设计