element-ui plus 文件上传组件,设置单选,并支持替换和回显

文章讲述了在使用Element-UIplus上传组件时遇到的问题,如limit属性对on-change事件的影响,以及解决方法,即不设置limit,通过onChange函数控制文件数量。还提到版本更新对file-list属性名的要求变化。

遇到的坑:
1、设置limit属性为1后,on-change属性不生效
2、on-exceed属性虽然值改变,但是回显没有随之变化
3、由于element-ui plus版本file-list值出现问题
最后的解决方案决定不设置 limit 属性,通过 on-change 中的判断来控制数量。
根据网友的说法,element-ui plus 高于 2.2.9 将 :file-list=“fileList” 改为 v-model:file-list=“fileList”
最终代码:

 <el-upload
     ref="uploadRef"
     class="upload-demo"
     :auto-upload="false"
     v-model:file-list="fileList"
     :on-change="handleFileChange"
  >
    <template>
       <el-button type="primary">选择文件</el-button>
       </template>
</el-upload>
function handleFileChange (file, files) {
  if (files.length > 1) {
    fileList = [files[files.length - 1]]
  } else {
    fileList = files
  }
}
### Element Plus `el-cascader` 组件实现懒加载与多选回显 #### 懒加载功能配置 为了使 `el-cascader` 支持懒加载,需设置属性 `options` 为空数组,通过异步请求获取子节点数据。当用户展开某个节点时触发回调函数来加载该节点下的选项。 ```javascript const loadOptions = async (node, resolve) => { const { value } = node; let result; try { // 假设这里调用了后端API返回了响应结果 result = await fetchChildNodes(value); // 将获取到的数据传递给resolve方法完成渲染 resolve(result.map(item => ({ value: item.id, label: item.name, leaf: !item.hasChildren }))); } catch(error){ console.error('Failed to load options:', error); resolve([]); } }; ``` 此部分逻辑应放在组件内部定义的方法里[^1]。 #### 多选模式下保存已选择项 对于支持多选的情况(`multiple=true`),可以通过监听输入框变化事件更新本地状态变量存储当前所选值: ```html <template> <!-- ... --> <el-cascader v-model="selectedValues" multiple :props="{ lazyLoad: true, checkStrictly: false}" @change="handleChange"> </el-cascader> </template> <script setup lang="ts"> import { ref } from 'vue'; let selectedValues = ref([]); function handleChange(values){ // 更新selectedValues的状态 } </script> ``` 此处需要注意的是,在多选场景中,如果希望父级节点被勾选时不自动全选其所有子节点,则可以将 `checkStrictly` 设置为 `true`[^2]。 #### 编辑状态下恢复初始选择 为了让编辑页面能够正确展示之前已经做出的选择,可以在初始化阶段根据已有记录填充 `v-model` 对应的绑定字段。假设服务器端提供了完整的路径信息作为参数传入前端应用: ```typescript // 获取详情接口成功后的处理逻辑 async function getDetail(id:string):Promise<void>{ const res=await api.get(`/api/detail/${id}`); // 如果是单选则直接赋值;如果是多选则遍历每一条记录分别push进去 form.value.cascadeValue=res.data.singleSelect ? [res.data.path.split(',')] : res.data.multiPaths.map(path=>path.split(',')); // 渲染视图... } onMounted(() => { if(route.params.id){ // 判断是否存在ID表示处于编辑态 getDetail(String(route.params.id)); } }); ``` 上述代码片段展示了如何基于不同情况(单选或多选),利用逗号分隔字符串形式的路径构建起始值列表[^3]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值