V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Eyon
V2EX  ›  问与答

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

  •  
  •   Eyon · 2021-04-07 18:29:06 +08:00 · 1727 次点击
    这是一个创建于 1327 天前的主题,其中的信息可能已经有所发展或是发生改变。
    一个问题真的是耽误太长时间了,请有空的帮我理一下这个思路,采纳答案赠送一个月视频会员(直接充到你账号那种),腾讯优酷爱奇艺芒果任选。虽然不值钱,但不白嫖的心情希望大家理解。




    如图,每一个 cell 都是 el-input,商品数量不定(图上每行是一个商品信息)。

    需求是:

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

    蟹蟹大家。
    16 条回复    2021-04-07 20:10:05 +08:00
    KouShuiYu
        1
    KouShuiYu  
       2021-04-07 18:36:34 +08:00
    用 table 的 cell-click 事件就可以里
    Eyon
        2
    Eyon  
    OP
       2021-04-07 18:43:27 +08:00
    为了方便大家测试,我把 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
        3
    Eyon  
    OP
       2021-04-07 18:46:15 +08:00
    @KouShuiYu 我感觉不行,你要不试试。
    Kmmoonlight
        4
    Kmmoonlight  
       2021-04-07 18:46:36 +08:00
    监听 cell 里面 input 的 blur 事件就好了,在 blur 事件里面做计算
    InternetExplorer
        5
    InternetExplorer  
       2021-04-07 18:48:33 +08:00
    InternetExplorer
        6
    InternetExplorer  
       2021-04-07 18:49:25 +08:00
    vue 还是神奇哦,这样编辑原对象也能触发更新
    maitiantuzi
        7
    maitiantuzi  
       2021-04-07 18:50:17 +08:00
    图挂了?
    Eyon
        8
    Eyon  
    OP
       2021-04-07 18:50:30 +08:00
    @Kmmoonlight 方法行不通,因为每个商品有一个默认的折扣,比如 1,在填入商品的时候,会自动将这个 1 填进折扣列,因此这里就不存在 blur 事件了。

    我要的是,我要的是,默认填入 1 之后,得到商品的折后价(商品价*1),但此时修改折后价,能够动态计算出商品的折扣率。
    InternetExplorer
        9
    InternetExplorer  
       2021-04-07 18:52:30 +08:00
    防止你打不开
    Kmmoonlight
        10
    Kmmoonlight  
       2021-04-07 18:54:22 +08:00
    @Eyon 填入商品的 input 不是有 blur 事件么,初始化就用商品的 blur, 计算折扣率和折扣价就用各自的 blur 事件
    Vegetable
        11
    Vegetable  
       2021-04-07 18:55:46 +08:00
    IE 的答案和我写的一样,我就不贴了,不过我用的是 watch,直接 watch 三个属性直觉上可能会出先循环触发的 bug,不过 vue 给属性赋值与原值相等时好像不会触发 watch 事件,也能正常用。
    InternetExplorer
        12
    InternetExplorer  
       2021-04-07 18:58:27 +08:00
    @Vegetable #11 这种需求一般会有保留小数位数的需求,一般算出来结果不是完全精准的,所以还是有可能一直循环
    Eyon
        13
    Eyon  
    OP
       2021-04-07 19:02:00 +08:00
    @InternetExplorer 稍等我放到项目里测试一下,如果可以的话就给你充会员哈。。。我试试
    Eyon
        14
    Eyon  
    OP
       2021-04-07 19:18:34 +08:00
    @Eyon 留个视频账号吧,我给你充会员。
    Eyon
        15
    Eyon  
    OP
       2021-04-07 19:53:38 +08:00
    @InternetExplorer 怎么给你充会员.....

    btw,我始终搞不清楚我在项目里为什么折后价不能输入小数点.....
    InternetExplorer
        16
    InternetExplorer  
       2021-04-07 20:10:05 +08:00
    d2FuZ2thbjExMTkK 可以加个微信,会员别冲到这里...
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5692 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 43ms · UTC 09:01 · PVG 17:01 · LAX 01:01 · JFK 04:01
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.