javascript - Quasar 无法有条件地设置 QTable 单元格的样式
问题描述
这是我使用 Quasar 创建的表的简单模板。
:class="'(props.value < 1000) ? bg-red : bg-green'"
我无法根据条件数为每个单元格着色,并且它一直为假(在这种情况下,每个单元格都会触发 bg-green)。我检查了所有单元格typeOf
都是number
.
<template>
<div class="q-pa-sm">
<q-table
ref="mainTable"
class="my-sticky-virtscroll-table"
style="height: 800px"
:data="data"
:columns="columns"
row-key="name"
:selected-rows-label="getSelectedString"
selection="multiple"
:selected.sync="selected"
virtual-scroll
:pagination.sync="pagination"
:virtual-scroll-sticky-size-start="48"
:rows-per-page-options="[0]"
:filter="filter"
flat
bordered=""
@focusin.native="activateNavigation"
@focusout.native="deactivateNavigation"
@keydown.native="onKey"
>
<template v-slot:top-left>
<q-input
ref="mainSearchInput"
debounce="10"
v-model="filter"
label="Búsqueda"
filled
bottom-slots
clearable=""
style="width:500px"
>
<template v-slot:hint
>Puede hacer busquedas online con commandos.</template
>
</q-input>
</template>
<template v-slot:body-cell-qty="props">
<q-td :props="props">
<q-badge
:class="'(props.value < 1000) ? bg-red : bg-green'"
:label="props.value"
/>
</q-td>
</template>
<template v-slot:body-cell-code="props">
<q-td :props="props">
<q-badge
:class="'props.value < 5 ? bg-orange : bg-red'"
:label="props.value"
/>
</q-td>
</template>
</q-table>
<div class="q-mt-md">Selected: {{ JSON.stringify(selected) }}</div>
</div>
</template>
你可以在这里看到,Qty Column
总是green
并且出于某种原因,Código Column
总是正确的。
下面是我的脚本和样式部分。
<script>
import path from "path";
import { remote } from "electron";
export default {
data() {
return {
navigationActive: false,
filter: "",
selected: [],
pagination: {
rowsPerPage: 0
},
columns: [
{
name: "code",
required: true,
label: "Código",
align: "left",
// field: row => row.name,
field: "CODIGO",
format: val => `${val}`,
sortable: true
},
{
name: "description",
align: "left",
label: "Descipción",
field: "DESCRIPCION",
sortable: true
},
{ name: "qty", label: "Qty", field: "INVENT", align: "right" },
{ name: "codAlt", label: "Cod Alt", field: "COD.ALT.", align: "left" },
{
name: "desAlt",
label: "Desc Alt",
field: "DESC.ALT.",
align: "left"
},
{
name: "groups",
label: "Grupo",
field: "GRUPO",
align: "left"
},
{ name: "price", label: "Precio", field: "PRECIO", align: "right" },
{
name: "discount20",
label: "20 %",
field: "PRECIO",
align: "right",
sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
}
],
data: []
};
},
methods: {
getSelectedString() {
return this.selected.length === 0
? ""
: `${this.selected.length} record${
this.selected.length > 1 ? "s" : ""
} selected of ${this.data.length}`;
},
activateNavigation() {
this.navigationActive = true;
},
deactivateNavigation() {
this.navigationActive = false;
},
onKey(evt) {
if (
this.navigationActive !== true ||
[33, 34, 35, 36, 38, 40].indexOf(evt.keyCode) === -1 ||
this.$refs.mainTable === void 0
) {
return;
}
evt.preventDefault();
switch (evt.keyCode) {
case 36: // Home
page = 1;
index = 0;
break;
case 35: // End
page = lastPage;
index = rowsPerPage - 1;
break;
case 33: // PageUp
page = currentPage <= 1 ? lastPage : currentPage - 1;
if (index < 0) {
index = 0;
}
break;
case 34: // PageDown
page = currentPage >= lastPage ? 1 : currentPage + 1;
if (index < 0) {
index = rowsPerPage - 1;
}
break;
case 38: // ArrowUp
if (currentIndex <= 0) {
page = currentPage <= 1 ? lastPage : currentPage - 1;
index = rowsPerPage - 1;
} else {
index = currentIndex - 1;
}
break;
case 40: // ArrowDown
if (currentIndex >= lastIndex) {
page = currentPage >= lastPage ? 1 : currentPage + 1;
index = 0;
} else {
index = currentIndex + 1;
}
break;
}
if (page !== this.pagination.page) {
this.pagination = {
...this.pagination,
page
};
this.$nextTick(() => {
const { computedRows } = this.$refs.mainTable;
this.selected = [
computedRows[Math.min(index, computedRows.length - 1)]
];
});
} else {
this.selected = [computedRows[index]];
}
}
},
mounted() {
// get file path
const filePath = path.join(
remote.app.getPath("home"),
"/Dropbox/Sync/inventarioHL.json"
);
// load the File System to execute our common tasks (CRUD)
var fs = require("fs");
// read file content
const fsData = fs.readFileSync(filePath, "utf-8");
// parse text into json
var jsonData = JSON.parse(fsData);
// add entire data to table
this.data = jsonData;
// for (const x in jsonData) {
// console.log(x);
// }
console.log(jsonData[0]);
// focus on q-input
this.$refs.mainSearchInput.$el.focus();
}
};
</script>
<style lang="sass">
.my-sticky-virtscroll-table
/* height or max-height is important */
height: 310px
/* specifying max-width so the example can
highlight the sticky column on any browser window */
max-width: 1300px
td:first-child
/* bg color is important for td; just specify one */
background-color: #fafafa !important
tr th
position: sticky
/* higher than z-index for td below */
z-index: 2
/* bg color is important; just specify one */
background: #fafafa
/* this will be the loading indicator */
thead tr:last-child th
/* height of all previous header rows */
top: 48px
/* highest z-index */
z-index: 3
thead tr:first-child th
top: 0
z-index: 1
tr:first-child th:first-child
/* highest z-index */
z-index: 3
td:first-child
z-index: 1
td:first-child, th:first-child
position: sticky
left: 0
</style>
解决方案
您的班级状况格式错误,应该是-
: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>
推荐阅读
- python - python 列中重复波斯语单词的计数
- java - 尽管有flush(),但“分离的实体传递给坚持”
- php - 一旦满足某个自定义时间,如何更新表中的某个值 CRON JOB - PHP
- java - 带注释发现模式的 CDI 1.1 不适用于 Weblogic 12.2
- swift - 如何快速将图像居中到它位于上方的图像的中心
- ios - AudioPlayers 不适用于 iOS | 颤振插件
- r - 列名中的 Unicode
- python - 从 100x100 的 pytorch 张量中获取 10x10 的补丁,其中圆环样式环绕边界
- sql - 嵌套 SQL 查询是原子的吗?
- reactjs - 已解决:系列数组更改后 React 顶点图表不呈现