Vue 使用el-select 实现模糊搜索内嵌tag

最新推荐文章于 2024-04-12 14:26:27 发布

上优

最新推荐文章于 2024-04-12 14:26:27 发布

阅读量708

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_65084919/article/details/129611868

版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <style>
      .increase_list_ipt .el-input__suffix {
        top: 1px;
        right: 2px;
      }
      .increase_list_ipt .el-tag {
        height: 32px;
        background-color: rgba(15, 163, 255, 0.1);
        color: #0fa3ff;
        font-size: 16px;
      }
      .increase_list_ipt .el-tag__close.el-icon-close {
        color: #0fa3ff;
        font-size: 20px;
        background-color: transparent;
      }
      .increase_list_ipt .el-tag__close.el-icon-close:hover {
        color: #0fa3ff;
        background-color: transparent;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <el-select
        class="increase_list_ipt"
        v-model="increaseList"
        placeholder="请输入"
        multiple
        filterable
        remote
        reserve-keyword
        :remote-method="remoteMethod"
      >
        <el-option
          v-for="item in options"
          :key="item.user_id"
          :label="item.user_name"
          :value="item.user_id"
        >
        </el-option>
      </el-select>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
      var example = new Vue({
        el: "#app",
        data() {
          return {
            increaseList: [], // 选中绑定的值 根据你el-option 的:value 来控制选中的值
            options: [], // 下拉框可以选中的
            state: [
              {
                user_id: 1,
                user_name: "石上优",
              },
              {
                user_id: 2,
                user_name: "武小道",
              },
              {
                user_id: 3,
                user_name: "山治",
              },
              {
                user_id: 4,
                user_name: "野原广志",
              },
            ], // 全部数据
          };
        },
        methods: {
          remoteMethod(query) {
            if (query) {
              // 找到符合条件的数组 
              this.options = this.state.filter((v) => {
                return v.user_name.includes(query);
              });
            } else {
              this.options = [];
            }
          },
        },
      });
    </script>
  </body>
</html>