Vue2 实现动态折扣表格

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    
    <link rel="stylesheet" href="./vue/element_ui.css" />
    <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>

你可能感兴趣的:(windows)