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>浏览器方式实现
和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>
