Quasar 无法有条件地设置 QTable 单元格的样式

Question

这是我用 Quasar 创建的表的简单模板。

\n\n

:class="\'(props.value < 1000) ? bg-red : bg-green\'"\n我无法根据数字条件为每个单元格着色，并且它一直为假（在这种情况下，每个单元格都会触发 bg-green ）。我检查了所有单元格typeOf都是number.

\n\n

<template>\n  <div class="q-pa-sm">\n    <q-table\n      ref="mainTable"\n      class="my-sticky-virtscroll-table"\n      style="height: 800px"\n      :data="data"\n      :columns="columns"\n      row-key="name"\n      :selected-rows-label="getSelectedString"\n      selection="multiple"\n      :selected.sync="selected"\n      virtual-scroll\n      :pagination.sync="pagination"\n      :virtual-scroll-sticky-size-start="48"\n      :rows-per-page-options="[0]"\n      :filter="filter"\n      flat\n      bordered=""\n      @focusin.native="activateNavigation"\n      @focusout.native="deactivateNavigation"\n      @keydown.native="onKey"\n    >\n      <template v-slot:top-left>\n        <q-input\n          ref="mainSearchInput"\n          debounce="10"\n          v-model="filter"\n          label="B\xc3\xbasqueda"\n          filled\n          bottom-slots\n          clearable=""\n          style="width:500px"\n        >\n          <template v-slot:hint\n            >Puede hacer busquedas online con commandos.</template\n          >\n        </q-input>\n      </template>\n\n      <template v-slot:body-cell-qty="props">\n        <q-td :props="props">\n          <q-badge\n            :class="\'(props.value < 1000) ? bg-red : bg-green\'"\n            :label="props.value"\n          />\n        </q-td>\n      </template>\n\n      <template v-slot:body-cell-code="props">\n        <q-td :props="props">\n          <q-badge\n            :class="\'props.value < 5 ? bg-orange : bg-red\'"\n            :label="props.value"\n          />\n        </q-td>\n      </template>\n    </q-table>\n    <div class="q-mt-md">Selected: {{ JSON.stringify(selected) }}</div>\n  </div>\n</template>\n

\n\n

你可以在这里看到，Qty Column由于green某种原因，C\xc3\xb3digo Column总是如此。

\n\n

\n\n

下面是我的脚本和样式部分。

\n\n

<script>\nimport path from "path";\nimport { remote } from "electron";\n\nexport default {\n  data() {\n    return {\n      navigationActive: false,\n      filter: "",\n      selected: [],\n      pagination: {\n        rowsPerPage: 0\n      },\n      columns: [\n        {\n          name: "code",\n          required: true,\n          label: "C\xc3\xb3digo",\n          align: "left",\n          // field: row => row.name,\n          field: "CODIGO",\n          format: val => `${val}`,\n          sortable: true\n        },\n        {\n          name: "description",\n          align: "left",\n          label: "Descipci\xc3\xb3n",\n          field: "DESCRIPCION",\n          sortable: true\n        },\n        { name: "qty", label: "Qty", field: "INVENT", align: "right" },\n        { name: "codAlt", label: "Cod Alt", field: "COD.ALT.", align: "left" },\n        {\n          name: "desAlt",\n          label: "Desc Alt",\n          field: "DESC.ALT.",\n          align: "left"\n        },\n        {\n          name: "groups",\n          label: "Grupo",\n          field: "GRUPO",\n          align: "left"\n        },\n        { name: "price", label: "Precio", field: "PRECIO", align: "right" },\n        {\n          name: "discount20",\n          label: "20 %",\n          field: "PRECIO",\n          align: "right",\n          sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)\n        }\n      ],\n      data: []\n    };\n  },\n\n  methods: {\n    getSelectedString() {\n      return this.selected.length === 0\n        ? ""\n        : `${this.selected.length} record${\n            this.selected.length > 1 ? "s" : ""\n          } selected of ${this.data.length}`;\n    },\n\n    activateNavigation() {\n      this.navigationActive = true;\n    },\n\n    deactivateNavigation() {\n      this.navigationActive = false;\n    },\n\n    onKey(evt) {\n      if (\n        this.navigationActive !== true ||\n        [33, 34, 35, 36, 38, 40].indexOf(evt.keyCode) === -1 ||\n        this.$refs.mainTable === void 0\n      ) {\n        return;\n      }\n\n      evt.preventDefault();\n\n      switch (evt.keyCode) {\n        case 36: // Home\n          page = 1;\n          index = 0;\n          break;\n        case 35: // End\n          page = lastPage;\n          index = rowsPerPage - 1;\n          break;\n        case 33: // PageUp\n          page = currentPage <= 1 ? lastPage : currentPage - 1;\n          if (index < 0) {\n            index = 0;\n          }\n          break;\n        case 34: // PageDown\n          page = currentPage >= lastPage ? 1 : currentPage + 1;\n          if (index < 0) {\n            index = rowsPerPage - 1;\n          }\n          break;\n        case 38: // ArrowUp\n          if (currentIndex <= 0) {\n            page = currentPage <= 1 ? lastPage : currentPage - 1;\n            index = rowsPerPage - 1;\n          } else {\n            index = currentIndex - 1;\n          }\n          break;\n        case 40: // ArrowDown\n          if (currentIndex >= lastIndex) {\n            page = currentPage >= lastPage ? 1 : currentPage + 1;\n            index = 0;\n          } else {\n            index = currentIndex + 1;\n          }\n          break;\n      }\n\n      if (page !== this.pagination.page) {\n        this.pagination = {\n          ...this.pagination,\n          page\n        };\n\n        this.$nextTick(() => {\n          const { computedRows } = this.$refs.mainTable;\n          this.selected = [\n            computedRows[Math.min(index, computedRows.length - 1)]\n          ];\n        });\n      } else {\n        this.selected = [computedRows[index]];\n      }\n    }\n  },\n\n  mounted() {\n    // get file path\n    const filePath = path.join(\n      remote.app.getPath("home"),\n      "/Dropbox/Sync/inventarioHL.json"\n    );\n\n    // load the File System to execute our common tasks (CRUD)\n    var fs = require("fs");\n\n    // read file content\n    const fsData = fs.readFileSync(filePath, "utf-8");\n\n    // parse text into json\n    var jsonData = JSON.parse(fsData);\n\n    // add entire data to table\n    this.data = jsonData;\n\n    // for (const x in jsonData) {\n    //   console.log(x);\n    // }\n\n    console.log(jsonData[0]);\n\n    // focus on q-input\n    this.$refs.mainSearchInput.$el.focus();\n  }\n};\n</script>\n\n<style lang="sass">\n.my-sticky-virtscroll-table\n  /* height or max-height is important */\n  height: 310px\n\n  /* specifying max-width so the example can\n    highlight the sticky column on any browser window */\n  max-width: 1300px\n\n  td:first-child\n    /* bg color is important for td; just specify one */\n    background-color: #fafafa !important\n\n  tr th\n    position: sticky\n    /* higher than z-index for td below */\n    z-index: 2\n    /* bg color is important; just specify one */\n    background: #fafafa\n\n  /* this will be the loading indicator */\n  thead tr:last-child th\n    /* height of all previous header rows */\n    top: 48px\n    /* highest z-index */\n    z-index: 3\n  thead tr:first-child th\n    top: 0\n    z-index: 1\n  tr:first-child th:first-child\n    /* highest z-index */\n    z-index: 3\n\n  td:first-child\n    z-index: 1\n\n  td:first-child, th:first-child\n    position: sticky\n    left: 0\n</style>\n

\n

Answer 1

您的课程条件格式错误，应该是这样的 -

:class="(props.value < 1000) ? 'bg-red' : 'bg-green'"

     <template v-slot:body-cell-fat="props">
        <q-td :props="props">
          <div>
            <q-badge :class="(props.value > 10) ? 'bg-red' : 'bg-blue'" :label="props.value"></q-badge>
          </div>
        </q-td>
      </template>

代码笔 - https://codepen.io/Pratik__007/pen/qBOQgKm