快捷導(dǎo)航

基于Vue2實現(xiàn)動態(tài)折扣表格

更新時間：2024年01月14日 16:06:32 作者：上優(yōu)

這篇文章主要為大家詳細介紹了如何基于Vue2實現(xiàn)動態(tài)折扣表格,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

效果圖

實現(xiàn)代碼

<!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"
       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實現(xiàn)動態(tài)折扣表格的詳細內(nèi)容，更多關(guān)于Vue2動態(tài)表格的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: