Specify dataLoad function in a component file and not at the global level

[rlightner]

I want to use this in different vue components. How can I use this without specifying the dataLoad function in main.js?

[TerryZ]

If the data source of v-selectpage is not from server side, you don't have to specify dataLoad option in plugin install.

<v-selectpage :data="list" v-model="value" @values="values">
</v-selectpage>

//script
data(){
	return {
		value: '',
		list: [
			{id:1,name:'aaa'},
			{id:2,name:'bbb'},
			{id:3,name:'ccc'},
			{id:4,name:'ddd'}
		]
	};
},
methods: {
	values(picked){
		console.log(picked);
	}
}

[rlightner]

But, what if I want to use it server side. Having the axios function located in the main.js file is really out of the way if I need to customize/change anything per request. Debouncing comes up as an issue too, since it calls back on every keystroke. I'm gonna make a pull request with some enhancements :) Thanks for the hard work on the control!

[TerryZ]

Config dataLoad option in plugin install, is tell to plugin how to request server side data when we need, it's just a one-time operation.

The data option of v-selectpage have 2 data types(string | Array), when you set string type content as server side url, plugin will call dataLoad method to load server side data.when you set Array content like this:

[
    {id:1,name:'aaa'},
    {id:2,name:'bbb'},
    {id:3,name:'ccc'},
    {id:4,name:'ddd'},
]

v-selectpage will use this Array data directly as a data source, and will not going to call dataLoad method.

So the conclusion is set dataLoad option in plugin install, is show the way how to load server side data.

When useing v-selectpage, want to load server side data, give it(data option) string type content as url, want to use local data, just give it an Array.

[rongdongwang]

这样全局配置确实有不方便的地方，例如后台使用graphql的时候，需要把搜索的内容作为参数拼接到查询字符串里面传给后台，因为字符串的内容比较长，使用了ES6的字符串模板，不同地方使用的字符串不一样，全局配置不够灵活，例如下面的字符串模板：{ MdDictionary(id: ${localMDField.id}) { entryPage( rowRequest:{ start: ${start} rows: ${rows} filter: { ${ searchKey ? filterType: string
operator: "contains"
field: "${searchKey}"
value: "${searchValue}": filterType: or
conditions: [
{
filterType: string
operator: "contains"
field: "key"
value: "${search}"
},
{
filterType: string
operator: "contains"
field: "value"
value: "${search}"
}
] } } } ) { rows { id key value } total } } }
这个模板不是固定的，所以全局配置的话就比较难办了

[TerryZ]

这样全局配置确实有不方便的地方，例如后台使用graphql的时候，需要把搜索的内容作为参数拼接到查询字符串里面传给后台，因为字符串的内容比较长，使用了ES6的字符串模板，不同地方使用的字符串不一样，全局配置不够灵活，例如下面的字符串模板：{ MdDictionary(id: ${localMDField.id}) { entryPage( rowRequest:{ start: ${start} rows: ${rows} filter: { ${ searchKey ? filterType: string
operator: "contains"
field: "${searchKey}"
value: "${searchValue}": filterType: or
conditions: [
{
filterType: string
operator: "contains"
field: "key"
value: "${search}"
},
{
filterType: string
operator: "contains"
field: "value"
value: "${search}"
}
] } } } ) { rows { id key value } total } } }
这个模板不是固定的，所以全局配置的话就比较难办了

首先每个插件都是可以单独设置 dataLoad 参数的，全局配置只是提供了可以在全局设置插件的 dataLoad 行为的方式，不用每个使用 v-selectpage 的地方再去配置而已

<v-selectpage :data-load="dataLoad">
</v-selectpage>

//script
methods: {
  dataLoad () {
    do something...
  }
}

[rongdongwang]

//script
methods: {
dataLoad () {
do something...
}
}如果data配置的是url，从服务器返回数据而不是使用静态数组，这样配置data-load好像没生效，不知道是否哪里配错了？