fix: 修复pure-table带状态表格在深色整体风格下状态样式消失的问题

This commit is contained in:
xiaoxian521 2024-03-06 08:49:08 +08:00
parent 5c4fd951bc
commit 7a59999dc7
7 changed files with 21 additions and 13 deletions

View File

@ -1079,6 +1079,9 @@ export default defineFakeRoute([
}
];
list = list.filter(item => item.username.includes(body?.username));
list = list.filter(item =>
String(item.status).includes(String(body?.status))
);
return {
success: true,
data: {

View File

@ -96,15 +96,8 @@ html.dark {
color: var(--el-color-primary);
}
/* element-plus */
.el-table__cell {
background: var(--el-bg-color);
}
.el-card {
--el-card-bg-color: var(--el-bg-color);
// border: none !important;
}
.el-backtop {

View File

@ -9,6 +9,7 @@ import { type Ref, reactive, ref, onMounted, toRaw } from "vue";
export function useRole(tableRef: Ref) {
const form = reactive({
username: "",
status: "",
loginTime: ""
});
const dataList = ref([]);

View File

@ -46,9 +46,20 @@ const {
v-model="form.username"
placeholder="请输入用户名"
clearable
class="!w-[180px]"
class="!w-[150px]"
/>
</el-form-item>
<el-form-item label="登录状态" prop="status">
<el-select
v-model="form.status"
placeholder="请选择"
clearable
class="!w-[150px]"
>
<el-option label="成功" value="1" />
<el-option label="失败" value="0" />
</el-select>
</el-form-item>
<el-form-item label="登录时间" prop="loginTime">
<el-date-picker
v-model="form.loginTime"

View File

@ -77,8 +77,8 @@ const {
row-key="id"
alignWhole="center"
:header-cell-style="{
background: '#f5f7fa',
color: '#303133'
background: 'var(--el-fill-color-light)',
color: 'var(--el-text-color-primary)'
}"
:data="
tableData.slice(

View File

@ -40,7 +40,7 @@ export function useColumns(selectRef: Ref) {
function rowStyle({ row: { name } }) {
return {
cursor: "pointer",
background: name === selectValue.value ? "#f5f7fa" : ""
background: name === selectValue.value ? "var(--el-fill-color-light)" : ""
};
}

View File

@ -28,8 +28,8 @@ const {
row-key="id"
alignWhole="center"
:header-cell-style="{
background: '#f5f7fa',
color: '#303133'
background: 'var(--el-fill-color-light)',
color: 'var(--el-text-color-primary)'
}"
:row-style="rowStyle"
:data="