el-select下拉框 change事件返回该项所有数据

 主要代码 value-key

<template>
  <div>
    <el-select
      v-model="value"
      value-key="label"
      placeholder="请选择"
      @change="selectChange"
    >
      <el-option
        v-for="item in options"
        :key="item.label"
        :label="item.label"
        :value="item"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
    };
  },
  mounted() {},
  methods: {
    selectChange(item) {
      console.log(item);
    },
  },
};
</script>

<style scoped></style>

 以下暂时自行理解,需与后端对接(有时间在整理)。。。。。

1. input 远程搜索
 <el-autocomplete
                style="width: 100%"
                v-model="form.ENTNAME"
                :fetch-suggestions="querySearchAsync"
                placeholder="企业名称"
                @select="handleSelect"
                clearable
                value-key="ENTAME"
              >
              </el-autocomplete>

 querySearchAsync(query, callBack) {
      if (query!== "") {
        this.$http
          .post("/system/ssoloin/getUrlataMap", {
            method: "getEntByword",
            token: getToken(),
            mapData: { type: "0", keyword: query},
          })
          .then((res) => {
            callBack(res.data.data.RESULTDATA);
          });
      }
    },

    handleSelect(item) {
      this.$http
        .post("/syem/ssolon/getUrltap", {
          method: "getRegistnfo",
          token: getToken(),
          mapData: { type: "0", keyWord: item.ENTNAME },
        })
        .then((res) => {
          this.form = res.data.data.RESTDATA[0];
        });
    },

 2. select 远程搜索

<el-select
                v-model="form.ENTNAME"
                filterable
                remote
                reserve-keyword
                placeholder="请输入企业名称"
                :remote-method="remoteMethod"
                :loading="loading"
                style="width: 100%"
                @change="selectChange"
              >
                <el-option
                  v-for="(item, index) in options"
                  :key="index"
                  :label="item.ENTNAME"
                  :value="item.ENTNAME"
                >
                </el-option>
              </el-select>

    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        this.$http
          .post("/syst/ssgin/getUrlaMap", {
            method: "getEyKeyord",
            token: getToken(),
            mapData: { type: "0", keyword: query },
          })
          .then((res) => {
            this.loading = false;

            this.options = res.data.data.RESUDTA;
          });
      } else {
        this.options = [];
      }
    },

 selectChange(value) {
      this.$http
        .post("/syem/ssogin/getUrlDaMap", {
          method: "getRegierInfo",
          token: getToken(),
          mapData: { type: "0", keyWord: value},
        })
        .then((res) => {
          this.form = res.data.data.RESULATA[0];
        });
    },

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-04 15:18:02       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-04 15:18:02       106 阅读
  3. 在Django里面运行非项目文件

    2024-01-04 15:18:02       87 阅读
  4. Python语言-面向对象

    2024-01-04 15:18:02       96 阅读

热门阅读

  1. uView Keyboard 键盘

    2024-01-04 15:18:02       73 阅读
  2. 四种限流算法

    2024-01-04 15:18:02       63 阅读
  3. vue3如何用了按需引入组件如何修改ant的主题颜色

    2024-01-04 15:18:02       58 阅读
  4. 80机华南独山更改点算法--对每个循环显示的优化

    2024-01-04 15:18:02       53 阅读
  5. Vue2/Vue3-插槽(全)

    2024-01-04 15:18:02       59 阅读
  6. 前后端项目统一返回类型(配置即用)

    2024-01-04 15:18:02       58 阅读
  7. oracle 子查询和窗口函数

    2024-01-04 15:18:02       62 阅读
  8. 深度学习必备框架PyTorch简介和参考资料

    2024-01-04 15:18:02       63 阅读
  9. python&Pandas二:数据读取与写入

    2024-01-04 15:18:02       66 阅读
  10. 原码、反码、补码,计算机中负数的表示

    2024-01-04 15:18:02       50 阅读
  11. 连接字符串

    2024-01-04 15:18:02       60 阅读
  12. 分布式【ZooKeeper面试题】

    2024-01-04 15:18:02       44 阅读