elementui中table和unpload的坑

ElementUI使用技巧与坑点
本文探讨ElementUI中上传组件限制文件大小与数量的方法,介绍如何通过状态标记避免限制失效,分享table组件表头自定义技巧,以及解决query参数类型转换问题。

上传文件限制大小或个数

限制的原理是先上传(before-upload)后删除,如果上传限制的同时还用到before-remove的话,用户就可以阻碍删除限制的文件,当用户点了取消删除按钮,限制的文件则还是上传了。这样限制就中return false或true就失效了。
解决:在data或computed中添加一个字段flag设置状态,在before-upload中判断条件修改flag状态,on-remove中设置flag,最后根据flag状态决定是否删除

2.table表头自定义

slot方式:如果自定义中用到data或computed中的变量,且在页面中变量不是响应的时,应采用render-header方式,就可以解决
两种 1.slot

<template slot="header">
	<el-select >
		<el-option label="全部" value=""></el-option>
		<el-option label="禁用" value="0"></el-option>
		<el-option label="启用" value="1"></el-option>
	</el-select>
</template>

2.render-header=“handleRendeHeader”

handleRendeHeader(h,{column,$index}) {
	const filters =[{text:'全部',value:''},{text:'禁用',value:'0'}{text:'启用',value:'1'}]
	return h('el-select', {
		on:{
			input:(value) => {
				this.checkStatus = value
			},
			change:(value) => {
				this.hanbleSelectChange(value)
			}
		},
		props: {
			value:this.checkStatus
		}
		
	},[
		filters.map(item => {
			return h('el-option', {
				props: {
					value:item.value,
					label:item.text
				}
			}
		})
	]
}

3.query传参数,在页面刷新的时候可能会将query中参数的类型发生转换(如number转string)

解决:再把参数转为number

### ElementUI Table 组件加载动画实现 为了在 ElementUI 的 `Table` 组件中实现加载动画效果,可以利用其内置的 `v-loading` 属性来控制加载状态。以下是具体的实现方法: #### 使用 v-loading 控制加载动画 通过设置 `v-loading="loading"`,其中 `loading` 是一个布尔类型的变量,在需要显示加载动画时将其设为 `true`,完成数据加载后再将其设为 `false`。 ```vue <template> <el-table :data="tableData" style="width: 100%" v-loading="loading"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </template> <script> export default { data() { return { loading: true, // 初始化为 true 显示加载动画 tableData: [] }; }, mounted() { this.fetchData(); }, methods: { fetchData() { setTimeout(() => { // 模拟异步请求 this.tableData = [ { date: '2023-01-01', name: '张三', address: '北京市' }, { date: '2023-01-02', name: '李四', address: '上海市' } ]; this.loading = false; // 数据加载完成后关闭加载动画 }, 2000); } } }; </script> ``` 上述代码展示了如何通过 `v-loading` 来启用加载动画[^1]。当页面初始化时,`loading` 被设置为 `true`,此时会自动触发加载动画;待模拟的数据加载完毕后,将 `loading` 设置为 `false` 关闭动画。 #### 自定义加载提示文字或图标 如果希望自定义加载中的提示文字或者图标,可以通过传递对象给 `v-loading` 并配合 `element-loading-text` 其他相关属性实现更丰富的交互体验。 ```vue <el-table :data="tableData" style="width: 100%" v-loading="{ text: '正在拼命加载...' }" ></el-table> ``` 此配置允许开发者指定特定的文字描述或其他视觉元素作为占位符[^2]。 #### 封装增强功能 对于更加复杂的场景,比如结合分页、筛选等功能,推荐对基础表格进行二次封装以提升可维护性复用率。参考某些高级案例可知,合理运用 Vue 生命周期钩子函数与事件监听机制能够极大简化业务逻辑处理过程[^3]。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值