element el-select数据量过大造成页面卡死情况（解决）

是小张呀！2024-06-18 10:02

template

bash 复制代码

<el-form-item>
            <el-select
              v-model="form.nameId"
              placeholder="姓名"
              clearable
              filterable
              remote
              collapse-tags
              reserve-keyword
              multiple
              :loading="loading"
              :remote-method="remoteMethod"
              style="width: 100%"
              @change="changeEmployeeName"
            >
              <el-option
                v-for="item in employeeUserList"
                :key="item.id"
                :label="item.employeename"
                :value="item.id"
              />
            </el-select>
</el-form-item>

script

data:

bash 复制代码

loading: false,
form: {
        limit: 10,
        page: 1,
        ....
      },
queryData: {
        page: 1,
        limit: 999999,
        employeename: "",
      },
      employeeUserList: [],

methods:

bash 复制代码

remoteMethod(query) {
      if (query !== "") {
        this.employeeUserList = [];
        this.loading = true;
        this.queryData.employeename = query;
        getEmployeeUser(this.queryData).then((res) => {
          this.loading = false;
          this.employeeUserList = res.data.rows.filter((item) => {
            return (
              item.employeename.toLowerCase().indexOf(query.toLowerCase()) > -1
            );
          });
          this.loading = false;
        });
      } else {
        this.employeeUserList = [];
      }
    },

element el-select数据量过大 造成页面卡死情况（解决）

element el-select数据量过大造成页面卡死情况（解决）