Cascader

ng-alain 使用SF formReset重置搜索表单时，级联组件cascader不生效，文字没被清空？在使用ng-alain生成的列表模板中，上面是由动态表单组件SF构成。下面是由ST表格组件构成。下面说说ST表格的上方的搜索表单组件SF。 在使用过程中，SF动态表单可以随意配置已有的小部件，大多小部件都很实用并且常用，但有个别小部分存在缺陷问题，如cascader级联组件。你可能会遇到以下的小问题： 当表单都存在数据时，进行重置操作，使用SF的(formReset)方法，但出来的效果除了级联组件cascader内容没清空外，其他小部件都清空了原有的值。此时再调用SF的(formSubmit)方法，发现原来cascader的值是空的，而组件所显示文字却没有被清空。 此时解决办法如下：在(formReset)方法中刷新SF的schema来实现清空。 html文件 <page-header [action]="phActionTpl" [breadcrumb]="breadcrumb"></page-header><nz-card> <sf #sf mode="search" [schema]="searchSchema" [ui]="uiSchema" [button]="sfButton" (formSubmit)="search($event)" (formReset)="reset($event)"></sf> <st #st [data]="url" [columns]="columns"></st></nz-card>ts文件 /** * 搜索 * @param event 搜索表单数据对象 */search(event) { console.log(event) this.st.load(undefined, event)}/*** 搜索重置 * @param event 搜索表单数据对象 */reset(event) { this.st.reset(event); // 针对级联组件cascader不能清空的问题，重新refresh一次表单 this.sf.refreshSchema();}

关于elementUI中cascader选中值后，能获取value或者label，但不能同时获value和label，这一问题，琢磨出了这么个办法。以新增和编辑城市为例，type: 1 编辑，type: 0 新增1. 配置元素<el-cascader filterable :class="{‘city-cascader’: type==1}" :placeholder=“city || ‘请选择’” :options=“cityLists” :props=“cityProps” v-model=“citySelected” style=“width:300px;” :show-all-levels=“false” @change=“changeCity” ></el-cascader>2. 配置cityPropscityProps: {value: ‘all’, label: ’label’}3. 组装props中的all// cityLists中遍历组装allall: { value: value, label: label}4. 使用此时，点击cascader选择需要的内容后，取出来的citySelected值就是[{value: 选中值的value, label: 选中值的label}]这个方法可以通过配置all获取任意自己想要的值。PS: 关于拿不到默认值的问题，我投机取巧的使用了placeholder。:placeholder=“city || ‘请选择’“然后在cascader上加上样式：:class=”{‘city-cascader’: type==1}".city-cascader .el-input__inner::placeholder { color: #333 !important;}ok，完美解决cascader取值问题。