数组对比后不同标记颜色

玩代码的菜鸟

已于 2024-04-01 10:13:26 修改

阅读量145

点赞数 3

文章标签： java 前端

于 2024-03-12 17:38:14 首次发布

本文链接：https://blog.csdn.net/junhian/article/details/136658103

版权

文章描述了如何使用JavaScript遍历后端返回的数据，针对数据中的价格模式和数量，根据不同的源设置颜色值，并在Vue组件Vxe-table中展示。作者展示了如何在HTML模板中动态应用这些颜色规则。

摘要由CSDN通过智能技术生成

上面是效果图

数据是样的：后端返回数据是这样的

let data = {
        products: [
          {
            sn: "200600024454",
            amountList: [
              {
                source: 1,
                priceMode: 1,
                productCount: 1,
               
              },
              {
                source: 2,
                orderViceNumber: "2024031115390008",
                priceMode: 1,
                productCount: 1,
              
              },
            ],
          },
          {
            sn: "200000024460",
            amountList: [
              {
                source: 1,
                priceMode: 1,
                productCount: 1,
               
              },
              {
                source: 2,
                orderViceNumber: "2024031115390009",
                priceMode: 2,
                productCount: 1,
              },
            ],
          },
        ],
      };

思路：数组遍历后使用js方法去处理后给数据设置颜色值

下面是html

 <vxe-table
          height="100%"
          ref="role"
          :data="products"
          :loading="loadingTable"
          border="full"
          class="tableMoudle"
          show-header-overflow
          :row-config="{ isHover: true }"
        >

<vxe-column field="priceMode" title="计价方式" width="140px">
            <template #default="{ row, rowIndex }">
              <div class="row-mode">
                <div v-for="(item, i) in row.amountList" :key="i">
                  <span
                    :style="{
                      color: item.source === 2 ? item.priceModeColor : '',
                      fontWeight: item.source === 2 ? item.priceModeWeight : '',
                    }"
                    >{{ item.priceMode === 1 ? "金工石分离" : "一口价" }}</span
                  >
                </div>
              </div>
            </template>
          </vxe-column>
          <vxe-column field="productCount" title="数量" width="140px">
            <template #default="{ row, rowIndex }">
              <div class="row-mode">
                <div v-for="(item, i) in row.amountList" :key="i">
                  <span
                    :style="{
                      color: item.source === 2 ? item.productCountColor : '',
                      fontWeight:
                        item.source === 2 ? item.productCountWeight : '',
                    }"
                    >{{ item.productCount }}</span
                  >
                </div>
              </div>
            </template>
          </vxe-column>

</vxe-table>

js处理逻辑

 const priceModeValues = product.amountList
            .filter((o) => {
              return (
                !o.priceMode || o.priceMode != "" || o.priceMode != "undefined"
              );
            })
            .map((item) => item.priceMode);
          // 数量
 const productCountValues = product.amountList
            .filter((o) => {
              return (
                !o.productCount ||
                o.productCount != "" ||
                o.productCount != "undefined"
              );
            })
           .map((item) => item.productCount);
if (priceModeValues.length > 1) {
            const allSourcesEqual = priceModeValues.every(
              (val, i, arr) => val === arr[0]
            );
            if (allSourcesEqual === false) {
              product.amountList.forEach((item) => {
                if (item.source === 2) {
                  this.$set(item, "priceModeColor", "#DC143C");
                  this.$set(item, "priceModeWeight", "bold");
                } else {
                  this.$set(item, "priceModeColor", "#000000");
                }
              });
            }
          }
          // 数量
          if (productCountValues.length > 1) {
            const allSourcesEqual = productCountValues.every(
              (val, i, arr) => val === arr[0]
            );
            if (allSourcesEqual === false) {
              product.amountList.forEach((item) => {
                if (item.source === 2) {
                  this.$set(item, "productCountColor", "#DC143C");
                  this.$set(item, "productCountWeight", "bold");
                } else {
                  this.$set(item, "productCountColor", "#000000");
                }
              });
            }
          }