Ant Design Vue Cascader loadData ajax服务器端加载的例子

如果联级加载的数据量比较大比如上万条数据甚至几十万条数据，那么就不适合一次性把这些数据全部加载到前端网页，需要动态向服务器加载，Cascader通过了loadData方法来实现。

在线例子

node.js webpack方式

<template>
  <a-cascader
    :options="options"
    @change="onChange"
    :loadData="loadData"
    placeholder="请选择"
    changeOnSelect
    style="width:330px"
  />
</template>
<script>
  export default {
    data() {
      return {
        options: [
          {
            value: 'zhejiang',
            label: '浙江省',
            isLeaf: false,
          },
          {
            value: 'jiangsu',
            label: '江西省',
            isLeaf: false,
          },
        ],
      };
    },
    methods: {
      onChange(value) {
        console.log(value);
      },
      //这个是模拟的ajax请求，你可以把这部分代码改成真正的ajax请求
      loadData(selectedOptions) {
        const targetOption = selectedOptions[selectedOptions.length - 1];
        targetOption.loading = true;

        // load options lazily
        setTimeout(() => {
          targetOption.loading = false;
          targetOption.children = [
            {
              label: `${targetOption.label} 服务器端加载1`,
              value: 'dynamic1',
            },
            {
              label: `${targetOption.label} 服务器端加载2`,
              value: 'dynamic2',
            },
          ];
          this.options = [...this.options];
        }, 1000);
      },
    },
  };
</script>copy

浏览器方式实现

和webpack方式不同的是需要把<a-locale-provider :loadData="loadData"/>改成<a-locale-provider :load-data="loadData"/>即可

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Ant Design Vue Cascader ajax服务器端加载的例子</title>
    <script src="https://www.itxst.com/package/vue/vue.min.js"></script>
    <script src="https://www.itxst.com/package/ant-design-vue/antd.min.js"></script>
    <link href="https://www.itxst.com/package/ant-design-vue/antd.min.css" rel="stylesheet" />
    <!--需要引入vue-dash-event插件-->
    <script src="https://www.itxst.com/package/ant-design-vue/vue-dash-event.js"></script>
    <!--国际化-->
    <script src="https://www.itxst.com/package/ant-design-vue/antd-with-locales.min.js"></script>
    <style>
        body {
            padding-top: 10px
        } 
        .ant-pagination-item-link.red {
            color: red;
            padding-left: 6px;
            padding-right: 6px;
        }
    </style>
</head>
<body>
    <div id="app">
        <a-locale-provider :locale="locales.zh_CN">
            <a-cascader :options="options" @change="onChange"
             :load-data="loadData" placeholder="输入浦区试试看"
                        style="width: 330px"></a-cascader>
        </a-locale-provider>
    </div>
    <script>
        //本地化
        const { LocaleProvider, locales } = window.antd;
        //vue-dash-event插件
        Vue.use(window['vue-dash-event']);
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    options: [
          {
            value: 'zhejiang',
            label: '浙江省',
            isLeaf: false,
          },
          {
            value: 'jiangsu',
            label: '江西省',
            isLeaf: false,
          },
        ],
                };
            },
            methods: {
                onChange(value) {
                    console.log(value);
                },
                  loadData(selectedOptions) {
        const targetOption = selectedOptions[selectedOptions.length - 1];
        targetOption.loading = true;


        //这个是模拟的ajax请求，你可以把这部分代码改成真正的ajax请求
        setTimeout(() => {
          targetOption.loading = false;
          targetOption.children = [
            {
              label: `${targetOption.label} 服务器端加载1`,
              value: 'dynamic1',
            },
            {
              label: `${targetOption.label} 服务器端加载2`,
              value: 'dynamic2',
            },
          ];
          this.options = [...this.options];
        }, 1000);
      },
            },
        });
    </script>
</body>
</html>copy