user19395617
user19395617

Reputation: 81

vuesax table element styles disappear

If you go to page 2 and go to page 1 again, the table that disappeared appears in white. disappeared 'element.style {}' is not returned. Is there any way to keep this? I tried to control it by adding a class, but it failed. I think it's probably because it's v-if, not v-show, but I don't know how to properly fix vuesax.


enter image description here


     <template #tbody>
    <vs-tr
      :key="i"
      v-for="(exchangedatasT, i) in $vs.getPage(exchangedatas1, page, max)"
      :data="exchangedatasT"
      class="tableColor"
      :class="{
        lastDay: todayGo2 !== new Date().toISOString().substring(0, 10),
      }"
    >
      <vs-td
        ><p>{{ exchangedatasT.Machinecd }}</p></vs-td
      >
      <vs-td
        ><p>{{ exchangedatasT.Exchangedt }}</p></vs-td
      >
      <vs-td
        ><p>{{ exchangedatasT.ExchangeItemnm }}</p></vs-td
      >
      <vs-td
        ><p>{{ exchangedatasT.Specnm }}</p></vs-td
      >
      <vs-td class="pointer" :id="[`e${i}`]" @click="click2(i)">
        <p>
          <span :id="[`s${i}`]"></span>
          {{ exchangedatasT.CntDay }}
        </p>
      </vs-td>
      <vs-td
        ><p>{{ exchangedatasT.ExchangeUser }}</p></vs-td
      >
      <!-- <vs-td>{{ exchangedatasT.Remark }}</vs-td> -->
    </vs-tr>
  </template>

    created() {
    const vm = this;
    axios
      //소모품 항목
      .post(``, {
        Machinecd: "Test",
        Exchangedt: vm.todayGo2,
      })
      .then((response) => {
        const entries = Object.values(response.data);
        vm.exchangedatas1 = entries;
        console.log(response.data);
        for (let i = 0; i < Object.keys(response.data).length; i++) {
          this.ExchangeUser = response.data[i].ExchangeUser;
          this.CntDay = response.data[i].CntDay;
          setTimeout(() => {
            if (response.data[i].CntDay == 99999) {
              document.getElementById(`e${i}`).style.background = "#ceecc5";
              document.getElementById(`e${i}`).style.color = "#176f24";
              document.getElementById(
                `s${i}`
              ).innerHTML = `<span>교체 완료 : </span>`;
            } else if (response.data[i].CntDay > 20) {
              document.getElementById(`e${i}`).style.background = "#ceecc5";
              document.getElementById(`e${i}`).style.color = "#176f24";
              document.getElementById(
                `s${i}`
              ).innerHTML = `<span>점검 완료 : </span>`;
            } else if (response.data[i].CntDay > 10) {
              document.getElementById(`e${i}`).style.background = "#ffe079";
              document.getElementById(`e${i}`).style.color = "#db751c";
              document.getElementById(
                `s${i}`
              ).innerHTML = `<span>미점검 : </span>`;
            } else {
              document.getElementById(`e${i}`).style.background = "#e96666";
              document.getElementById(`e${i}`).style.color = "#ffffff";
              document.getElementById(
                `s${i}`
              ).innerHTML = `<span>미점검 : </span>`;
            }
          }, 1);
        }
      })
      .catch((error) => {
        console.error(error);
      });
  },

Upvotes: 0

Views: 41

Answers (0)

Related Questions