elementui 计数器动态渲染无法点击

<el-table :data="orders" style="width: 100%;min-height:auto !important;"><el-table-column prop="name" label="名称"></el-table-column><el-table-column prop="price" label="单价"></el-table-column><el-table-column label="数量" width="110"><template slot-scope="scope"><el-input-number size="mini" :value="scope.row.value" v-on:input="handleBlur" @change="handleChange( scope.row )"></el-input-number></template></el-table-column><el-table-column label=" " width="30"><template slot-scope="scope"><el-button class="btn" plain icon="el-icon-delete" size="mini" @click="delChange( scope.row )"></el-button></template></el-table-column>
</el-table>

渲染效果：

handleBlur(value){this.input_number_value = value;let total=0;for(let i=0;i<this.orders.length;i++){total=total+(this.orders[i].price*this.orders[i].value);}this.totalprice=total;},handleChange( data ) {data.value = this.input_number_value;let total=0;for(let i=0;i<this.orders.length;i++){total=total+(this.orders[i].price*this.orders[i].value);}this.totalprice=total;},delChange(index){//删除for(let i=0;i<this.orders.length;i++){if(this.orders[i].id==index.id){this.orders.splice(i, 1);let seit = this.checkedC.indexOf(index.id);if (seit > -1) {this.checkedC.splice(seit, 1);}}}let total=0;for(let i=0;i<this.orders.length;i++){total=total+(this.orders[i].price*this.orders[i].value);}this.totalprice=total;},Changeimg2(index){if(this.checkedC.indexOf(index.id)==-1){this.checkedC.push(index.id);}this.orders=[];for(let j=0;j<this.packData.length;j++){for(let i=0;i<this.checkedC.length;i++){if(this.checkedC[i]==this.packData[j].id){let obj = new Object();obj.code=this.packData[j].code;obj.id=this.packData[j].id;obj.imageUrl=this.packData[j].imageUrl;obj.name=this.packData[j].name;obj.price=this.packData[j].price;obj.stock=this.packData[j].stock;obj.value=1;this.$set(this.orders,i, obj);}}}/* console.log(this.orders); */                let total=0;for(let i=0;i<this.orders.length;i++){total=total+(this.orders[i].price*this.orders[i].value);}this.totalprice=total;},

在data中定义数组orders:[ ],在methods为其设置的值要用 this.$set(),来设置，否则会出现增减无效。

elementui 计数器动态渲染无法点击相关推荐

jquery动态渲染绑定点击事件不生效
原因:动态添加的HTML元素是在CSS,JS代码加载完成后再渲染的HTML页面.浏览器解析这些通过ajax请求到后台返回的数据,再根据返回的结果动态生成HTML页面时,这时绑定事件的标签元素还没有生成 ...
elementUI表格动态渲染错乱
问题: 表格设置固定高度,表格内容超过高度,表格出现滚动,但是表格滚动部分高度偏小(比表格高度减去表格头小).表格左侧第一列固定左侧,横向出现滚动,表格横向出现错位.不固定出现,频率有时高.有时低. ...
【element】InputNumber计数器动态渲染设置默认值后加减号失效问题
今天同事遇到了一个问题,遍历一个数组,在页面上渲染n个计数器,计数器的初始值为0. 上图为el-input绑定的值. 一开始是直接赋值,结果导致加减号失效.后来百度后发现需要使用this.￥set,至 ...
layui动态渲染上传文件功能点击选择文件没反应解决方案
layui动态渲染上传文件功能点击选择文件没反应解决方案场景动态加载出来的table表格如下表格问题点击选择多文件没有反应不弹出选择文件的弹框如果你和我是同样问题请向下继续看如果不同 ...
vue中手写动态渲染左右滚动菜单栏点击居左以及设置scrollLeft属性设置无效的原因解决
vue中可能会碰到无法使用框架的问题,此时需要手写左右滚动的滑动菜单栏,并且头部或者底部还有对应的标题点击定位.此时应该怎么做呢? (1)下面看结构: <div class="cour ...
vue-video-player 实现动态渲染后端传来的视频
1.安装vue-video-player npm install vue-video-player --save 2.在main.js入口文件中引入 import VideoPlayer from ' ...
driver.get调用iframe中的页面_【5分钟玩转Lighthouse】爬取JavaScript动态渲染页面
0x00 背景概述通过[技术干货 007 | Scrapy爬虫初探]教程,大家应该已经对如何编写爬虫有了一定的认识.但对于较为复杂的网站设计,比如网站页面使用了JavaScript动态渲染,入门级的 ...
vue 给checkbox 赋值_Vue动态生成el-checkbox点击无法赋值的解决方法
前言最近遇到一个问题,在一个页面需要动态渲染页面内的表单,其中包括 checkbox 表单类型,并且使用 Element 组件 UI 时,此时 v-model 绑定的数据也是动态生成的例如: 定义 ...
微信小程序使用三元运算符动态渲染布局
今天在写微信小程序时,被坑到了, <!--.wxml-> <view class="row-in {{to_top ? 'to-top' : 'to-bottom'}}&q ...

elementui 计数器动态渲染无法点击

elementui 计数器动态渲染无法点击相关推荐

最新文章

热门文章