基于Vue2实现动态折扣表格
更新时间:2024年01月14日 16:06:32 作者:上优
这篇文章主要为大家详细介绍了如何基于Vue2实现动态折扣表格,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
效果图
实现代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow" /> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> --> <link rel="stylesheet" href="./vue/element_ui.css" rel="external nofollow" /> <script src="./vue/vue.js"></script> <script src="./vue/unocss.js"></script> <script src="./vue/element_ui.js"></script> <style> * { margin: 0; padding: 0; box-sizing: border-box; } </style> </head> <body> <div id="app" class="h-100vh"> <div class="h-full flex items-center justify-center"> <div> <div class="flex items-center gap-10px"> <div class="cursor-pointer bg-blue-500 text-white p-[2px_10px] w-max rounded-[4px] text-[12px]" @click="addRow" > + 行 </div> <div class="cursor-pointer bg-blue-500 text-white p-[2px_10px] w-max rounded-[4px] text-[12px]" @click="addCol" > + 列 </div> </div> <span> 打折: </span> <input type="text" class="bg-[unset] rounded-5px w-100px mt-[10px] outline-none border-solid border-[1px] border-blue-500 text-center" v-model="rate" @blur="handle()" /> <table class="mt-[10px]"> <tbody> <tr class="bg-violet-500/20 text-violet-500" v-for="(item, index) in list" :key="index" > <td class="text-center" v-for="(j, i) in item.child"> <input type="text" class="bg-[unset] outline-none h-full border-none text-center" v-model="j.value" @blur="handle(index,i)" /> </td> </tr> </tbody> </table> </div> </div> </div> <script> new Vue({ el: '#app', data() { return { list: [ { child: [ { value: 800, }, { value: 200, }, ], }, ], rate: 20, }; }, methods: { addRow() { const row = { child: [], }; this.list[0].child.forEach((item) => { row.child.push({ value: 0, }); }); this.list.push(row); this.handle(); }, addCol() { this.list.forEach((item) => { item.child.push({ value: 0, }); }); this.handle(); }, handle(oneIndex, childIndex) { if (oneIndex == 0) { let newArr = this.list.filter((item, i) => i == 0); this.list .filter((item, index) => index > 0) .forEach((item, index) => { item.child.forEach((j, i) => { if (childIndex == i) { j.value = ( newArr[0].child[i].value - newArr[0].child[i].value * (this.rate / 100) * (index + 1) ).toFixed(2); } }); }); } if (!oneIndex) { let newArr = this.list.filter((item, i) => i == 0); this.list .filter((item, index) => index > 0) .forEach((item, index) => { item.child.forEach((j, i) => { j.value = ( newArr[0].child[i].value - newArr[0].child[i].value * (this.rate / 100) * (index + 1) ).toFixed(2); }); }); } }, }, }); </script> </body> </html>
以上就是基于Vue2实现动态折扣表格的详细内容,更多关于Vue2动态表格的资料请关注脚本之家其它相关文章!
相关文章
详解vue中$nextTick和$forceUpdate的用法
这篇文章主要介绍了详解vue中$nextTick和$forceUpdate的用法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-12-12
最新评论