重庆建设工程信息网最新网站,网上商店也叫做,网站里的动画效果,如何建设学校门户网站加载用户列表分页请求、默认请求20条数据。想添加远程搜索用户功能。原有的方法filter-method不能监听到输入清空数据的时候。这样搜索完无法返回默认的20条数据。直接监听级联选择的v-model绑定的值是无法检测到用户自己输入的。
解决思路#xff1a;
el-cascader 没有提供…加载用户列表分页请求、默认请求20条数据。想添加远程搜索用户功能。原有的方法filter-method不能监听到输入清空数据的时候。这样搜索完无法返回默认的20条数据。直接监听级联选择的v-model绑定的值是无法检测到用户自己输入的。
解决思路
el-cascader 没有提供监听用户输入的内容、要单独获取到input添加监听事件。添加完事件、可以watch监听下用户的输入。清空输入时候可以重新加载数据。使用befor-filter先做根据搜索内容请求接口函数返回true才会执行filter-method、再调用filter-method返回true就行了。
下面是个模拟的加载用户列表的demo
templatediv classpageel-cascader v-modelmodel.userIds classuser-cascader :optionsuserList filterable :before-filterbeforeFilterUser :filter-methodfilterUser clearable changechangeUser /el-cascader/div
/templatescript
export default {data() {return {model: {userIds: [],},userList: [], //用户列表search: ,timer: null}},watch: {//监听搜索内容search(val, old) {if(this.timer) clearTimeout(this.timer)this.timer setTimeout(async () {if(!val) this.loadUserList()},300)}},mounted() {this.init()this.loadUserList()},methods: {//添加监听事件init() {this.$nextTick(() {let dom document.getElementsByClassName(user-cascader)[0]let inputDom document.getElementsByClassName(el-input__inner)[0]inputDom.addEventListener(input,(e) {// console.log(e.target.value,输入的是)this.search e.target.value})})},//加载用户列表loadUserList(keyword) {// ...// this.userList res.data},async beforeFilterUser(node, keyword) {//先根据关键词加载用户列表 再return trueawait this.loadUserList(keyword)return true},filterUser(node, keyword) {return true},changeUser(val) {}}
}
/scriptstyle scoped langless
.page {padding: 20px;
}
/style
