安装

npm i @ifun-vue2/lazy-load

组件包包含

• 一个指令v-lazy-load
• 一个lazy-select 下拉懒加载组件，可结合el-form表单校验
• 一个lazy-list 下来滚动列表组件。

import IFunLazyLoad from "@ifun-vue2/lazy-load";
// 样式加载
import "@ifun-vue2/lazy-load/dist/style.css";

// 使用
Vue.use(IFunLazyLoad);

组件完全支持所有的el-select 属性。比如clearable, 但是懒加载可能会对其他使用场景有一些限制，测试不能完全

lazy-select 基本使用

通过传入data, 数据类型为数组。

<template>
  <div style="margin-bottom:20px;">
    <IFunLazySelect :data="data" v-model="value" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      value: "",
    };
  },
  mounted() {
    this.data = new Array(100).fill(0).map((item, index) => ({
      value: index,
      label: "数据" + index,
    }));
  },
};
</script>

自定义下拉渲染props

使用selectProps 来定义下拉渲染定义的 value、label 值

<template>
  <div style="margin-bottom:20px;">
    <IFunLazySelect :data="data" :selectProps="selectProps" v-model="value" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      selectProps: {
        value: "id",
        label: "title",
      },
      value: "",
    };
  },
  mounted() {
    this.data = new Array(100).fill(0).map((item, index) => ({
      id: index,
      title: "数据" + index,
    }));
  },
};
</script>

结合el-form实现组件校验。

v-model数据绑定。通过 el-form rules进行数据校验。

<template>
  <div style="margin-bottom:20px;">
    <el-form :model="form" :rules="rules">
      <el-form-item prop="userId">
        <IFunLazySelect
          :data="data"
          :selectProps="selectProps"
          v-model="form.userId"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      selectProps: {
        value: "id",
        label: "title",
      },
      form: {
        userId: "",
      },
      rules: {
        userId: [{ required: true, message: "请选择" }],
      },
    };
  },
  mounted() {
    this.data = new Array(100).fill(0).map((item, index) => ({
      id: index,
      title: "数据" + index,
    }));
  },
};
</script>

实现默认值选中

由于是懒加载数据，默认初始值可能由于没有被渲染，而导致不能展示出名称。通过定义属性处理默认值。

使用checked 来传入默认选中的 value 值。

<template>
  <div style="margin-bottom:20px;">
    <IFunLazySelect
      :data="data"
      :checked="23"
      :selectProps="selectProps"
      v-model="value"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      selectProps: {
        value: "id",
        label: "title",
      },
      value: "",
    };
  },
  mounted() {
    this.data = new Array(100).fill(0).map((item, index) => ({
      id: index,
      title: "数据" + index,
    }));
  },
};
</script>

checked 支持 select 的多选操作。字符串或者数组；选中默认值

通过lazy设置是否分页加载数据

分页加载数据时，通过绑定外部加载函数load处理分页加载。数据处理逻辑则自行处理。

 <IFunLazySelect
  :data="data"
  lazy
  :load="handleLoadData"
  :selectProps="selectProps"
  v-model="value"
/>

lazy-list 基本使用

通过传入data, 数据类型为数组。

<template>
  <div style="margin-bottom:20px;height:150px;">
    <IFunLazyList :data="data" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
    };
  },
  mounted() {
    this.data = new Array(100).fill(0).map((item, index) => ({
      value: index,
      label: "数据" + index,
    }));
  },
};
</script>

API 属性一览

| props | 说明 | 默认值 | | ----------- | :------------------------------------: | ----------------------------------: | | checked | 初始值，默认选中回显 | 非必须，string | | data | 下拉数据源 | 必传，Array | | selectProps | 下拉列表渲染的属性 key | 默认{value:"value",label:"label"} | | lazy | 是否远程加载，需配合load加载远程数据 | 默认 false | | load | 需配合lazy加载远程数据 | Function |

其他el-select 支持的属性，事件。