“付费”提个 Vuejs+element-UI 的问题，一个月任意视频会员。

[Eyon]

一个问题真的是耽误太长时间了，请有空的帮我理一下这个思路，采纳答案赠送一个月视频会员（直接充到你账号那种），腾讯优酷爱奇艺芒果任选。虽然不值钱，但不白嫖的心情希望大家理解。




如图，每一个 cell 都是 el-input，商品数量不定（图上每行是一个商品信息）。

需求是：

1 、输入单价和折扣，动态计算出折后价。
2 、计算出折后价之后，可以修改折后价，动态计算出折扣率，比如上图我修改任意一行的折扣价，可以动态改变折扣列的数据。
3 、任意 cell 都可能有小数点。控制台不能有报错。

蟹蟹大家。

[KouShuiYu]

用 table 的 cell-click 事件就可以里

[Eyon]

为了方便大家测试，我把 vue 文件放出来，免得你又去写。

`
<template>
<div id="app">
<el-table :data="tableData">
<el-table-column label="原价">
<template slot-scope="scope">
<el-input v-model="scope.row.price"></el-input>
</template>
</el-table-column>
<el-table-column label="折扣率">
<template slot-scope="scope">
<el-input v-model="scope.row.discountRate"></el-input>
</template>
</el-table-column>
<el-table-column label="折后价">
<template slot-scope="scope">
<el-input v-model="scope.row.discountPrice"></el-input>
</template>
</el-table-column>
</el-table>
</div>
</template>

<script>
export default {
data() {
return {
tableData:[{},{},{},{}]
}
},
};
</script>

`

[Eyon]

@KouShuiYu 我感觉不行，你要不试试。

[Kmmoonlight]

监听 cell 里面 input 的 blur 事件就好了，在 blur 事件里面做计算

[InternetExplorer]

https://codesandbox.io/s/withered-glade-580et?file=/src/App.vue 这样么，瞎写的

[InternetExplorer]

vue 还是神奇哦，这样编辑原对象也能触发更新

[maitiantuzi]

图挂了？

[Eyon]

@Kmmoonlight 方法行不通，因为每个商品有一个默认的折扣，比如 1，在填入商品的时候，会自动将这个 1 填进折扣列，因此这里就不存在 blur 事件了。

我要的是，我要的是，默认填入 1 之后，得到商品的折后价(商品价*1)，但此时修改折后价，能够动态计算出商品的折扣率。

[InternetExplorer]

防止你打不开

[Kmmoonlight]

@Eyon 填入商品的 input 不是有 blur 事件么，初始化就用商品的 blur, 计算折扣率和折扣价就用各自的 blur 事件

[Vegetable]

IE 的答案和我写的一样，我就不贴了，不过我用的是 watch，直接 watch 三个属性直觉上可能会出先循环触发的 bug，不过 vue 给属性赋值与原值相等时好像不会触发 watch 事件，也能正常用。

[InternetExplorer]

@Vegetable #11 这种需求一般会有保留小数位数的需求，一般算出来结果不是完全精准的，所以还是有可能一直循环

[Eyon]

@InternetExplorer 稍等我放到项目里测试一下，如果可以的话就给你充会员哈。。。我试试

[Eyon]

@Eyon 留个视频账号吧，我给你充会员。

[Eyon]

@InternetExplorer 怎么给你充会员.....

btw，我始终搞不清楚我在项目里为什么折后价不能输入小数点.....

[InternetExplorer]

d2FuZ2thbjExMTkK 可以加个微信，会员别冲到这里...