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 => item.username.includes(body?.username));
list = list.filter(item =>
String(item.status).includes(String(body?.status))
);
return { return {
success: true, success: true,
data: { data: {

View File

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

View File

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

View File

@ -46,9 +46,20 @@ const {
v-model="form.username" v-model="form.username"
placeholder="请输入用户名" placeholder="请输入用户名"
clearable clearable
class="!w-[180px]" class="!w-[150px]"
/> />
</el-form-item> </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-form-item label="登录时间" prop="loginTime">
<el-date-picker <el-date-picker
v-model="form.loginTime" v-model="form.loginTime"

View File

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

View File

@ -40,7 +40,7 @@ export function useColumns(selectRef: Ref) {
function rowStyle({ row: { name } }) { function rowStyle({ row: { name } }) {
return { return {
cursor: "pointer", 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" row-key="id"
alignWhole="center" alignWhole="center"
:header-cell-style="{ :header-cell-style="{
background: '#f5f7fa', background: 'var(--el-fill-color-light)',
color: '#303133' color: 'var(--el-text-color-primary)'
}" }"
:row-style="rowStyle" :row-style="rowStyle"
:data=" :data="