twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-07 17:07:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: RePureTableBar组件搭配pure-admin-table支持表头国际化切换

Browse Source
This commit is contained in:
xiaoxian521 2024-03-26 16:07:35 +08:00
parent bc1da0b759
commit 52103ab52d
1 changed files with 15 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/RePureTableBar/src/bar.tsx
View File

@ -1,3 +1,5 @@
import Sortable from "sortablejs";
import { transformI18n } from "@/plugins/i18n";
import { useEpThemeStoreHook } from "@/store/modules/epTheme"; import { useEpThemeStoreHook } from "@/store/modules/epTheme";
import { defineComponent, ref, computed, type PropType, nextTick } from "vue"; import { defineComponent, ref, computed, type PropType, nextTick } from "vue";
import { import {
@ -8,7 +10,6 @@ import {
getKeyList getKeyList
} from "@pureadmin/utils"; } from "@pureadmin/utils";
import Sortable from "sortablejs";
import DragIcon from "./svg/drag.svg?component"; import DragIcon from "./svg/drag.svg?component";
import ExpandIcon from "./svg/expand.svg?component"; import ExpandIcon from "./svg/expand.svg?component";
import RefreshIcon from "./svg/refresh.svg?component"; import RefreshIcon from "./svg/refresh.svg?component";
@ -118,6 +119,7 @@ export default defineComponent({
} }
function handleCheckedColumnsChange(value: string[]) { function handleCheckedColumnsChange(value: string[]) {
checkedColumns.value = value;
const checkedCount = value.length; const checkedCount = value.length;
checkAll.value = checkedCount === checkColumnList.length; checkAll.value = checkedCount === checkColumnList.length;
isIndeterminate.value = isIndeterminate.value =
@ -125,7 +127,9 @@ export default defineComponent({
} }
function handleCheckColumnListChange(val: boolean, label: string) { function handleCheckColumnListChange(val: boolean, label: string) {
dynamicColumns.value.filter(item => item.label === label)[0].hide = !val; dynamicColumns.value.filter(
item => transformI18n(item.label) === transformI18n(label)
)[0].hide = !val;
} }
async function onReset() { async function onReset() {
@ -198,7 +202,9 @@ export default defineComponent({
}; };
const isFixedColumn = (label: string) => { const isFixedColumn = (label: string) => {
return dynamicColumns.value.filter(item => item.label === label)[0].fixed return dynamicColumns.value.filter(
item => transformI18n(item.label) === transformI18n(label)
)[0].fixed
? true ? true
: false; : false;
}; };
@ -293,7 +299,7 @@ export default defineComponent({
<div class="pt-[6px] pl-[11px]"> <div class="pt-[6px] pl-[11px]">
<el-scrollbar max-height="36vh"> <el-scrollbar max-height="36vh">
<el-checkbox-group <el-checkbox-group
v-model={checkedColumns.value} modelValue={checkedColumns.value}
onChange={value => handleCheckedColumnsChange(value)} onChange={value => handleCheckedColumnsChange(value)}
> >
<el-space <el-space
@ -301,7 +307,7 @@ export default defineComponent({
alignment="flex-start" alignment="flex-start"
size={0} size={0}
> >
{checkColumnList.map(item => { {checkColumnList.map((item, index) => {
return ( return (
<div class="flex items-center"> <div class="flex items-center">
<DragIcon <DragIcon
@ -316,17 +322,18 @@ export default defineComponent({
}) => rowDrop(event)} }) => rowDrop(event)}
/> />
<el-checkbox <el-checkbox
key={item} key={index}
label={item}
value={item} value={item}
onChange={value => onChange={value =>
handleCheckColumnListChange(value, item) handleCheckColumnListChange(value, item)
} }
> >
<span <span
title={item} title={transformI18n(item)}
class="inline-block w-[120px] truncate hover:text-text_color_primary" class="inline-block w-[120px] truncate hover:text-text_color_primary"
> >
{item} {transformI18n(item)}
</span> </span>
</el-checkbox> </el-checkbox>
</div> </div>