怎样用服务器做网站,wordpress下载地址,重庆产品网站建设,网站建设合同 下载先看图#xff0c;你是否也遇到这个需求#xff1f;如果你正在焦头烂额#xff0c;无脑抓瞎#xff0c;那么你来对地方了#xff0c;因为我将给你一个简单易懂的实现方案。我也在网上翻了无数页答案#xff0c;也照着别人的代码和思路尝试了#xff0c;事实上并不能解决…先看图你是否也遇到这个需求如果你正在焦头烂额无脑抓瞎那么你来对地方了因为我将给你一个简单易懂的实现方案。我也在网上翻了无数页答案也照着别人的代码和思路尝试了事实上并不能解决我这个棘手的问题。级联下拉选多选、懒加载、数据回显尽管 ElementUI 已经很贴心文档写的也很好。前两个很容易就可以实现可是唯独数据回显被遗忘了似乎忘记了数据回显应该是级联选择器必备的功能很遗憾需要我们自己去实现。根据文档我们可以很容易配置一个级联组件并且级联选择器的值应该是一个二维数组。el-cascaderv-modelupdateForm.categoryseparator-:propscascaderProps
/el-cascader然后配置cascaderProps数据如下cascaderProps: {multiple: true,checkStrictly: true,lazy: true,lazyLoad: this.lazyLoad,value: id,label: name,leaf: leaf
}
如果照做了那么恭喜你已经实现了一半的需求了不过你很快就会发现编辑的时候级联选择器的数据是空的。不过组件给我们提供了一个参数options如果级联选择的模板是完整的那就可以很容易回显这个数组可是现在的选择模板是懒加载的那么就需要根据updateForm.category 拼出一个备选模板就可以了。问题的关键就在于options模板如何生成这个问题困恼了我好几天最后也是灵感加成十分钟就撸完了。先看一段代码然后分析下思路。//编辑类目async updateBtnClick(node, data) {this.node node.parent;
this.updateForm.id data.id;
this.updateForm.name data.name;this.updateForm.level [一级类目, 二级类目, 三级类目, 四级类目][node.level - 1];this.updateForm.parent_name node.level 1 ? node.parent.data.name : ;this.updateForm.category data.category || [];// this.updateForm.category_name data.category_name || [];this.category_array Array.from(new Set(this.updateForm.category.join(,).split(,)));this.initOptions();},//初始化categoryasync initOptions() {let req {parent_id: 0,category_id: this.node.id || 0};let res await this.$api.getFrontcategoryTemp(req);if (res.error_code 0 res.data res.data.list) {this.cascaderOptions await this.loadOptions(res.data.list || []);this.updateForm.visible true;}},//递归加载子类目async loadOptions(category) {let array [];for (let i 0; i category.length; i) {if (category[i].child_count 0 this.category_array.includes(category[i].id )) {let req {parent_id: category[i].id,category_id: this.node.id || 0};let res await this.$api.getFrontcategoryTemp(req);if (res.error_code 0 res.data res.data.list) {category[i].children await this.loadOptions(res.data.list);}}array.push(category[i]);}return array;}解决方案的思路1、将需要回显的数据二维数组平铺成一维数组并去重。2、初始化备选项的一级下拉选。3、遍历一级下拉选判断是否需要加载子类目。4、递归遍历下拉选。这个方案确实也是非常容易理解的与我们手动点击加载子集类似。最终的组件配置如下el-cascaderv-modelupdateForm.categoryseparator-:optionscascaderOptions:propscascaderProps
/el-cascader好了希望你能搜到我这个方案最好尽快搜到。ElementUI 版本2.13.2。----再来更新一点算是优化吧。针对第一步1、将需要回显的数据二维数组平铺成一维数组并去重。可以做点优化二维数组[[1,10,101],[1,11,115],[2,20,201,2014]]
//可以去掉最后一位
[[1,10],[1,11],[2,20,201]]
//这样可以减少很多请求
减少不必要的资源开销。-------------再来更新一点-------------因为搜索的问题所以重新封装了组件然后重新缕了一下思路实现了更优雅的懒加载回显和搜索以及搜索回显的问题。UI如下准备打个包方便以后需要的人吧。
