前端 - vue-ant-design 动态增减表单，级联选择器怎么做数据回显？
vue-ant-design 动态增减表单，懒加载的级联选择器怎么做数据回显？
<template> <a-cascader :options="options" :load-data="loadData" placeholder="Please select" change-on-select @change="onChange" /></template><script>export default { data() { return { options: [ { value: 'zhejiang', label: 'Zhejiang', isLeaf: false, }, { value: 'jiangsu', label: 'Jiangsu', isLeaf: false, }, ], }; }, methods: { onChange(value) { console.log(value); }, loadData(selectedOptions) { const targetOption = selectedOptions[selectedOptions.length - 1]; targetOption.loading = true; // load options lazily setTimeout(() => { targetOption.loading = false; targetOption.children = [ { label: `${targetOption.label} Dynamic 1`, value: 'dynamic1', }, { label: `${targetOption.label} Dynamic 2`, value: 'dynamic2', }, ]; this.options = [...this.options]; }, 1000); }, },};</script>共有1个答案
<template> <a-cascader v-model="selectedOptions" :options="options" :load-data="loadData" placeholder="Please select" change-on-select @change="onChange" /></template><script>export default { data() { return { selectedOptions: [], // 存选中的选项 options: [ { value: 'zhejiang', label: 'Zhejiang', isLeaf: false, }, { value: 'jiangsu', label: 'Jiangsu', isLeaf: false, }, ], }; }, methods: { onChange(value) { console.log(value); }, loadData(selectedOptions) { const targetOption = selectedOptions[selectedOptions.length - 1]; targetOption.loading = true; // load options lazily setTimeout(() => { targetOption.loading = false; targetOption.children = [ { label: `${targetOption.label} Dynamic 1`, value: 'dynamic1', }, { label: `${targetOption.label} Dynamic 2`, value: 'dynamic2', }, ]; this.options = [...this.options]; }, 1000); }, }, mounted() { // 你想要回显的数据是 ['zhejiang', 'dynamic1'] this.selectedOptions = ['zhejiang', 'dynamic1']; }};</script>-
有人能推荐一个指南/教程来使用最佳实践在Rails中实现动态选择菜单/级联下拉菜单吗？或者可能是最近关于同一主题的问题。可能我找错了词。 我看了一下railscast:#88动态选择菜单（修订版），但不认为使用csv文件存储选项是最好的方法。 我发现的关于下拉列表的所有其他内容似乎都不完整或过时。
-
Ant Design Vue 是使用 Vue 实现的遵循 Ant Design 设计规范的高质量 UI 组件库，用于开发和服务于企业级中后台产品。 特性 提炼自企业级中后台产品的交互语言和视觉风格。 开箱即用的高质量 Vue 组件。 共享 Ant Design of React 设计工具体系。 支持环境 现代浏览器和 IE9 及以上（需要 polyfills）。 支持服务端渲染。 安装 使用 np
-
本文向大家介绍Drupal 9：级联Ajax选择表单，包括了Drupal 9：级联Ajax选择表单的使用技巧和注意事项，需要的朋友参考一下 借助Drupal 9中内置的Ajax和状态系统，可以很轻松地将表单中的不同选择元素绑定在一起。这意味着任何Drupal表单都可以具有一个select元素，该元素可以将选项显示和更新为同一表单中的另一个select元素。 。使用此系统，您可以创建一个分层系统，其
-
Cascader 级联选择器 当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。 基础用法 有两种触发子菜单的方式 只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器。通过props.expandTrigger可以定义展开子级菜单的触发方式。 <div class="block"> <span class="demonstration">默认 c
-
当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。 基础用法 有两种触发子菜单的方式 只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器。通过props.expandTrigger可以定义展开子级菜单的触发方式。 <div class="block"> <span class="demonstration">默认 click 触发子菜单</spa
-
Cascader 级联选择器 当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。 基础用法 有两种触发子菜单的方式 :::demo 只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器。通过expandTrigger可以定义展开子级菜单的触发方式。本例还展示了onChange事件，它的参数为 Cascader 的绑定值：一个由各级菜单的值所组成的数组。