前端 javascript 练习题--表格的操作及进度条的实现

创建表格,添加删除操作
介绍:这是用基本的方式,更便捷的方法是,使用es6提供的模板字符串,代码和效率能提高很多
简单的样式:

a <input type="text"/>

b <input type="text"/>

c <input type="text"/><input type="button" value="添加"/><table></table>

js实现代码:

var oinput=document.getElementsByTagName("input");var otable=document.getElementsByTagName("table")[0];

oinput[oinput.length-1].οnclick=function(){

    var otr=document.createElement("tr");

    //创建单元格,并且将文本的值加到单元格里

    for(var i=0;i<oinput.length-1;i++){

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您好!对于el-upload组件的http-request请求,您可以通过使用进度条来显示上传进度。下面是一种实现方式: 1. 首先,在el-upload组件中添加http-request属性,并将其绑定到一个方法上: ```html <el-upload class="upload-demo" :action="uploadUrl" :http-request="uploadFile" :on-success="handleSuccess" :on-error="handleError" > <!-- 其他配置 --> </el-upload> ``` 2. 然后,在methods中定义uploadFile方法,用于实现自定义的http请求逻辑。在该方法中,可以通过axios或其他方式发起请求,并在上传过程中更新进度条的值: ```javascript methods: { uploadFile(file) { // 创建FormData对象,用于传输文件和其他数据 const formData = new FormData(); formData.append('file', file); // 发起请求 return axios.post(this.uploadUrl, formData, { onUploadProgress: (progressEvent) => { const percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total ); // 更新进度条的值 // 这里假设进度条的ref名称为progressRef this.$refs.progressRef.setCurrentPercent(percentCompleted); }, }); }, // 其他方法 } ``` 3. 最后,您需要在组件中定义一个带有setCurrentPercent方法的进度条组件,以便在上传过程中更新进度条的值。您可以使用el-progress组件来实现: ```html <el-progress ref="progressRef" :percentage="0"></el-progress> ``` 通过以上步骤,您就可以在el-upload的http-request请求中显示进度条了。请注意,代码中的一些细节可能需要根据您的具体情况进行调整。希望对您有所帮助!如果还有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值