mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-06 16:37:18 +08:00
Merge branch 'main' into feature/ReDrawer
This commit is contained in:
xiaoming
GitHub
commit
935c9336de
@ -26,7 +26,6 @@ export function getPluginsList(
|
||||
// jsx、tsx语法支持
|
||||
vueJsx(),
|
||||
VueI18nPlugin({
|
||||
jitCompilation: false,
|
||||
include: [pathResolve("../locales/**")]
|
||||
}),
|
||||
checker({
|
||||
|
||||
@ -78,7 +78,8 @@ export default defineFlatConfig([
|
||||
languageOptions: {
|
||||
parser: parserTypeScript,
|
||||
parserOptions: {
|
||||
sourceType: "module"
|
||||
sourceType: "module",
|
||||
warnOnUnsupportedTypeScriptVersion: false
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
|
||||
98
package.json
98
package.json
@ -48,28 +48,28 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||
"@howdyjs/mouse-menu": "^2.1.3",
|
||||
"@howdyjs/mouse-menu": "^2.1.6",
|
||||
"@infectoone/vue-ganttastic": "^2.3.2",
|
||||
"@logicflow/core": "^1.2.28",
|
||||
"@logicflow/extension": "^1.2.28",
|
||||
"@pureadmin/descriptions": "^1.2.1",
|
||||
"@pureadmin/table": "^3.2.0",
|
||||
"@pureadmin/table": "^3.2.1",
|
||||
"@pureadmin/utils": "^2.4.8",
|
||||
"@vue-flow/background": "^1.3.0",
|
||||
"@vue-flow/core": "^1.39.3",
|
||||
"@vueuse/core": "^10.11.1",
|
||||
"@vueuse/motion": "^2.2.3",
|
||||
"@vue-flow/core": "^1.41.2",
|
||||
"@vueuse/core": "^11.1.0",
|
||||
"@vueuse/motion": "^2.2.5",
|
||||
"@wangeditor/editor": "^5.1.23",
|
||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"@zxcvbn-ts/core": "^3.0.4",
|
||||
"animate.css": "^4.1.1",
|
||||
"axios": "^1.7.3",
|
||||
"axios": "^1.7.7",
|
||||
"china-area-data": "^5.0.1",
|
||||
"cropperjs": "^1.6.2",
|
||||
"dayjs": "^1.11.12",
|
||||
"dayjs": "^1.11.13",
|
||||
"echarts": "^5.5.1",
|
||||
"el-table-infinite-scroll": "^3.0.6",
|
||||
"element-plus": "^2.8.0",
|
||||
"element-plus": "^2.8.3",
|
||||
"intro.js": "^7.2.0",
|
||||
"js-cookie": "^3.0.5",
|
||||
"jsbarcode": "^3.11.6",
|
||||
@ -79,98 +79,98 @@
|
||||
"mqtt": "4.3.7",
|
||||
"nprogress": "^0.2.0",
|
||||
"path": "^0.12.7",
|
||||
"pinia": "^2.2.1",
|
||||
"pinia": "^2.2.2",
|
||||
"pinyin-pro": "^3.24.2",
|
||||
"plus-pro-components": "^0.1.14",
|
||||
"plus-pro-components": "^0.1.16",
|
||||
"qrcode": "^1.5.4",
|
||||
"qs": "^6.13.0",
|
||||
"responsive-storage": "^2.2.0",
|
||||
"sortablejs": "^1.15.2",
|
||||
"swiper": "^11.1.9",
|
||||
"typeit": "^8.8.4",
|
||||
"sortablejs": "^1.15.3",
|
||||
"swiper": "^11.1.14",
|
||||
"typeit": "^8.8.5",
|
||||
"v-contextmenu": "^3.2.0",
|
||||
"v3-infinite-loading": "^1.3.1",
|
||||
"version-rocket": "^1.7.2",
|
||||
"vue": "^3.4.37",
|
||||
"vue-i18n": "^9.13.1",
|
||||
"v3-infinite-loading": "^1.3.2",
|
||||
"version-rocket": "^1.7.3",
|
||||
"vue": "^3.5.7",
|
||||
"vue-i18n": "^10.0.1",
|
||||
"vue-json-pretty": "^2.4.0",
|
||||
"vue-pdf-embed": "^2.1.0",
|
||||
"vue-router": "^4.4.3",
|
||||
"vue-router": "^4.4.5",
|
||||
"vue-tippy": "^6.4.4",
|
||||
"vue-types": "^5.1.3",
|
||||
"vue-virtual-scroller": "2.0.0-beta.8",
|
||||
"vue-waterfall-plugin-next": "^2.4.3",
|
||||
"vue-waterfall-plugin-next": "^2.6.0",
|
||||
"vue3-danmaku": "^1.6.1",
|
||||
"vue3-puzzle-vcode": "^1.1.7",
|
||||
"vuedraggable": "^4.1.0",
|
||||
"vxe-table": "4.6.17",
|
||||
"wavesurfer.js": "^7.8.3",
|
||||
"xgplayer": "^3.0.19",
|
||||
"vxe-table": "4.6.19",
|
||||
"wavesurfer.js": "^7.8.6",
|
||||
"xgplayer": "^3.0.20",
|
||||
"xlsx": "^0.18.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^19.4.0",
|
||||
"@commitlint/config-conventional": "^19.2.2",
|
||||
"@commitlint/types": "^19.0.3",
|
||||
"@eslint/js": "^9.9.0",
|
||||
"@commitlint/cli": "^19.5.0",
|
||||
"@commitlint/config-conventional": "^19.5.0",
|
||||
"@commitlint/types": "^19.5.0",
|
||||
"@eslint/js": "^9.11.0",
|
||||
"@faker-js/faker": "^8.4.1",
|
||||
"@iconify-icons/ep": "^1.2.12",
|
||||
"@iconify-icons/ri": "^1.2.10",
|
||||
"@iconify/vue": "^4.1.2",
|
||||
"@intlify/unplugin-vue-i18n": "^4.0.0",
|
||||
"@intlify/unplugin-vue-i18n": "^5.0.0",
|
||||
"@pureadmin/theme": "^3.2.0",
|
||||
"@types/dagre": "^0.7.52",
|
||||
"@types/gradient-string": "^1.1.6",
|
||||
"@types/intro.js": "^5.1.5",
|
||||
"@types/js-cookie": "^3.0.6",
|
||||
"@types/node": "^20.14.15",
|
||||
"@types/node": "^20.16.5",
|
||||
"@types/nprogress": "^0.2.3",
|
||||
"@types/qrcode": "^1.5.5",
|
||||
"@types/qs": "^6.9.15",
|
||||
"@types/qs": "^6.9.16",
|
||||
"@types/sortablejs": "^1.15.8",
|
||||
"@typescript-eslint/eslint-plugin": "^7.18.0",
|
||||
"@typescript-eslint/parser": "^7.18.0",
|
||||
"@vitejs/plugin-vue": "^5.1.2",
|
||||
"@vitejs/plugin-vue-jsx": "^4.0.0",
|
||||
"@vitejs/plugin-vue": "^5.1.4",
|
||||
"@vitejs/plugin-vue-jsx": "^4.0.1",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"boxen": "^7.1.1",
|
||||
"cssnano": "^7.0.5",
|
||||
"boxen": "^8.0.1",
|
||||
"cssnano": "^7.0.6",
|
||||
"dagre": "^0.8.5",
|
||||
"eslint": "^9.9.0",
|
||||
"eslint": "^9.11.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-define-config": "^2.1.0",
|
||||
"eslint-plugin-prettier": "^5.2.1",
|
||||
"eslint-plugin-vue": "^9.27.0",
|
||||
"eslint-plugin-vue": "^9.28.0",
|
||||
"gradient-string": "^2.0.2",
|
||||
"husky": "^9.1.4",
|
||||
"lint-staged": "^15.2.8",
|
||||
"postcss": "^8.4.41",
|
||||
"husky": "^9.1.6",
|
||||
"lint-staged": "^15.2.10",
|
||||
"postcss": "^8.4.47",
|
||||
"postcss-html": "^1.7.0",
|
||||
"postcss-import": "^16.1.0",
|
||||
"postcss-scss": "^4.0.9",
|
||||
"prettier": "^3.3.3",
|
||||
"rimraf": "^5.0.10",
|
||||
"rimraf": "^6.0.1",
|
||||
"rollup-plugin-visualizer": "^5.12.0",
|
||||
"sass": "^1.77.8",
|
||||
"stylelint": "^16.8.1",
|
||||
"stylelint-config-recess-order": "^5.0.1",
|
||||
"sass": "1.77.8",
|
||||
"stylelint": "^16.9.0",
|
||||
"stylelint-config-recess-order": "^5.1.0",
|
||||
"stylelint-config-recommended-vue": "^1.5.0",
|
||||
"stylelint-config-standard-scss": "^13.1.0",
|
||||
"stylelint-prettier": "^5.0.2",
|
||||
"svgo": "^3.3.2",
|
||||
"tailwindcss": "^3.4.9",
|
||||
"typescript": "^5.5.4",
|
||||
"vite": "^5.4.0",
|
||||
"tailwindcss": "^3.4.12",
|
||||
"typescript": "^5.6.2",
|
||||
"vite": "^5.4.7",
|
||||
"vite-plugin-cdn-import": "^1.0.1",
|
||||
"vite-plugin-checker": "^0.7.2",
|
||||
"vite-plugin-checker": "^0.8.0",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
"vite-plugin-fake-server": "^2.1.1",
|
||||
"vite-plugin-fake-server": "^2.1.2",
|
||||
"vite-plugin-remove-console": "^2.2.0",
|
||||
"vite-plugin-router-warn": "^1.0.0",
|
||||
"vite-plugin-vue-inspector": "^5.1.3",
|
||||
"vite-plugin-vue-inspector": "^5.2.0",
|
||||
"vite-svg-loader": "^5.1.0",
|
||||
"vue-eslint-parser": "^9.4.3",
|
||||
"vue-tsc": "^2.0.29"
|
||||
"vue-tsc": "^2.1.6"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^18.18.0 || ^20.9.0 || >=21.1.0",
|
||||
|
||||
3079
pnpm-lock.yaml
generated
3079
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -54,7 +54,7 @@ const props = {
|
||||
export default defineComponent({
|
||||
name: "PureTableBar",
|
||||
props,
|
||||
emits: ["refresh"],
|
||||
emits: ["refresh", "fullscreen"],
|
||||
setup(props, { emit, slots, attrs }) {
|
||||
const size = ref("default");
|
||||
const loading = ref(false);
|
||||
@ -117,6 +117,11 @@ export default defineComponent({
|
||||
toggleRowExpansionAll(props.tableRef.data, isExpandAll.value);
|
||||
}
|
||||
|
||||
function onFullscreen() {
|
||||
isFullscreen.value = !isFullscreen.value;
|
||||
emit("fullscreen", isFullscreen.value);
|
||||
}
|
||||
|
||||
function toggleRowExpansionAll(data, isExpansion) {
|
||||
data.forEach(item => {
|
||||
props.tableRef.toggleRowExpansion(item, isExpansion);
|
||||
@ -378,7 +383,7 @@ export default defineComponent({
|
||||
class={["w-[16px]", iconClass.value]}
|
||||
icon={isFullscreen.value ? ExitFullscreen : Fullscreen}
|
||||
v-tippy={isFullscreen.value ? "退出全屏" : "全屏"}
|
||||
onClick={() => (isFullscreen.value = !isFullscreen.value)}
|
||||
onClick={() => onFullscreen()}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -52,7 +52,7 @@ const props = {
|
||||
export default defineComponent({
|
||||
name: "VxeTableBar",
|
||||
props,
|
||||
emits: ["refresh"],
|
||||
emits: ["refresh", "fullscreen"],
|
||||
setup(props, { emit, slots, attrs }) {
|
||||
const size = ref("small");
|
||||
const loading = ref(false);
|
||||
@ -113,6 +113,11 @@ export default defineComponent({
|
||||
props.vxeTableRef.refreshColumn();
|
||||
}
|
||||
|
||||
function onFullscreen() {
|
||||
isFullscreen.value = !isFullscreen.value;
|
||||
emit("fullscreen", isFullscreen.value);
|
||||
}
|
||||
|
||||
function reloadColumn() {
|
||||
const curCheckedColumns = cloneDeep(dynamicColumns.value).filter(item =>
|
||||
checkedColumns.value.includes(item.title)
|
||||
@ -369,7 +374,7 @@ export default defineComponent({
|
||||
class={["w-[16px]", iconClass.value]}
|
||||
icon={isFullscreen.value ? ExitFullscreen : Fullscreen}
|
||||
v-tippy={isFullscreen.value ? "退出全屏" : "全屏"}
|
||||
onClick={() => (isFullscreen.value = !isFullscreen.value)}
|
||||
onClick={() => onFullscreen()}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -50,7 +50,7 @@ function getObjectKeys(obj) {
|
||||
if (obj[k] && isObject(obj[k])) {
|
||||
stack.push({ obj: obj[k], key: newKey });
|
||||
} else {
|
||||
keys.add(newKey);
|
||||
keys.add(key);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -163,9 +163,10 @@
|
||||
|
||||
/* 仿 el-scrollbar 滚动条样式，支持大多数浏览器，如Chrome、Edge、Firefox、Safari等。整体暗色风格在 src/style/dark.scss 文件进行了适配 */
|
||||
.pure-scrollbar {
|
||||
scrollbar-color: rgb(221 222 224) transparent; /* 滑块颜色、轨道颜色 */
|
||||
|
||||
/* Firefox */
|
||||
scrollbar-width: thin; /* 可选值为 'auto', 'thin', 'none' */
|
||||
scrollbar-color: rgb(221 222 224) transparent; /* 滑块颜色、轨道颜色 */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px; /* 滚动条宽度 */
|
||||
}
|
||||
|
||||
@ -26,6 +26,11 @@ const {
|
||||
handleDelete,
|
||||
handleSelectionChange
|
||||
} = useDept();
|
||||
|
||||
function onFullscreen() {
|
||||
// 重置表格高度
|
||||
tableRef.value.setAdaptive();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -75,6 +80,7 @@ const {
|
||||
:columns="columns"
|
||||
:tableRef="tableRef?.getTableRef()"
|
||||
@refresh="onSearch"
|
||||
@fullscreen="onFullscreen"
|
||||
>
|
||||
<template #buttons>
|
||||
<el-button
|
||||
|
||||
@ -123,7 +123,7 @@ export function useDept() {
|
||||
fullscreen: deviceDetection(),
|
||||
fullscreenIcon: true,
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () => h(editForm, { ref: formRef }),
|
||||
contentRenderer: () => h(editForm, { ref: formRef, formInline: null }),
|
||||
beforeSure: (done, { options }) => {
|
||||
const FormRef = formRef.value.getRef();
|
||||
const curData = options.props.formInline as FormItemProps;
|
||||
|
||||
@ -27,6 +27,11 @@ const {
|
||||
handleDelete,
|
||||
handleSelectionChange
|
||||
} = useMenu();
|
||||
|
||||
function onFullscreen() {
|
||||
// 重置表格高度
|
||||
tableRef.value.setAdaptive();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -66,6 +71,7 @@ const {
|
||||
:isExpandAll="false"
|
||||
:tableRef="tableRef?.getTableRef()"
|
||||
@refresh="onSearch"
|
||||
@fullscreen="onFullscreen"
|
||||
>
|
||||
<template #buttons>
|
||||
<el-button
|
||||
|
||||
@ -165,7 +165,7 @@ export function useMenu() {
|
||||
fullscreen: deviceDetection(),
|
||||
fullscreenIcon: true,
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () => h(editForm, { ref: formRef }),
|
||||
contentRenderer: () => h(editForm, { ref: formRef, formInline: null }),
|
||||
beforeSure: (done, { options }) => {
|
||||
const FormRef = formRef.value.getRef();
|
||||
const curData = options.props.formInline as FormItemProps;
|
||||
|
||||
@ -195,7 +195,7 @@ export function useRole(treeRef: Ref) {
|
||||
fullscreen: deviceDetection(),
|
||||
fullscreenIcon: true,
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () => h(editForm, { ref: formRef }),
|
||||
contentRenderer: () => h(editForm, { ref: formRef, formInline: null }),
|
||||
beforeSure: (done, { options }) => {
|
||||
const FormRef = formRef.value.getRef();
|
||||
const curData = options.props.formInline as FormItemProps;
|
||||
|
||||
@ -96,7 +96,7 @@ defineExpose({ onTreeReset });
|
||||
<template>
|
||||
<div
|
||||
v-loading="treeLoading"
|
||||
class="h-full bg-bg_color overflow-auto"
|
||||
class="h-full bg-bg_color overflow-hidden relative"
|
||||
:style="{ minHeight: `calc(100vh - 141px)` }"
|
||||
>
|
||||
<div class="flex items-center h-[34px]">
|
||||
@ -151,54 +151,56 @@ defineExpose({ onTreeReset });
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<el-divider />
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
:data="treeData"
|
||||
node-key="id"
|
||||
size="small"
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
:expand-on-click-node="false"
|
||||
:filter-node-method="filterNode"
|
||||
@node-click="nodeClick"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span
|
||||
:class="[
|
||||
'pl-1',
|
||||
'pr-1',
|
||||
'rounded',
|
||||
'flex',
|
||||
'items-center',
|
||||
'select-none',
|
||||
'hover:text-primary',
|
||||
searchValue.trim().length > 0 &&
|
||||
node.label.includes(searchValue) &&
|
||||
'text-red-500',
|
||||
highlightMap[node.id]?.highlight ? 'dark:text-primary' : ''
|
||||
]"
|
||||
:style="{
|
||||
color: highlightMap[node.id]?.highlight
|
||||
? 'var(--el-color-primary)'
|
||||
: '',
|
||||
background: highlightMap[node.id]?.highlight
|
||||
? 'var(--el-color-primary-light-7)'
|
||||
: 'transparent'
|
||||
}"
|
||||
>
|
||||
<IconifyIconOffline
|
||||
:icon="
|
||||
data.type === 1
|
||||
? OfficeBuilding
|
||||
: data.type === 2
|
||||
? LocationCompany
|
||||
: Dept
|
||||
"
|
||||
/>
|
||||
{{ node.label }}
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
<el-scrollbar height="calc(90vh - 88px)">
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
:data="treeData"
|
||||
node-key="id"
|
||||
size="small"
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
:expand-on-click-node="false"
|
||||
:filter-node-method="filterNode"
|
||||
@node-click="nodeClick"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<div
|
||||
:class="[
|
||||
'rounded',
|
||||
'flex',
|
||||
'items-center',
|
||||
'select-none',
|
||||
'hover:text-primary',
|
||||
searchValue.trim().length > 0 &&
|
||||
node.label.includes(searchValue) &&
|
||||
'text-red-500',
|
||||
highlightMap[node.id]?.highlight ? 'dark:text-primary' : ''
|
||||
]"
|
||||
:style="{
|
||||
color: highlightMap[node.id]?.highlight
|
||||
? 'var(--el-color-primary)'
|
||||
: '',
|
||||
background: highlightMap[node.id]?.highlight
|
||||
? 'var(--el-color-primary-light-7)'
|
||||
: 'transparent'
|
||||
}"
|
||||
>
|
||||
<IconifyIconOffline
|
||||
:icon="
|
||||
data.type === 1
|
||||
? OfficeBuilding
|
||||
: data.type === 2
|
||||
? LocationCompany
|
||||
: Dept
|
||||
"
|
||||
/>
|
||||
<span class="!w-[120px] !truncate" :title="node.label">
|
||||
{{ node.label }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -331,7 +331,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
|
||||
fullscreen: deviceDetection(),
|
||||
fullscreenIcon: true,
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () => h(editForm, { ref: formRef }),
|
||||
contentRenderer: () => h(editForm, { ref: formRef, formInline: null }),
|
||||
beforeSure: (done, { options }) => {
|
||||
const FormRef = formRef.value.getRef();
|
||||
const curData = options.props.formInline as FormItemProps;
|
||||
|
||||
@ -6,11 +6,7 @@ const { columns, dataList, exportExcel } = useColumns();
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="mb-[20px] float-right"
|
||||
@click="exportExcel"
|
||||
>
|
||||
<el-button type="primary" class="mb-[20px]" @click="exportExcel">
|
||||
导出
|
||||
</el-button>
|
||||
<pure-table row-key="id" border :data="dataList" :columns="columns" />
|
||||
|
||||
51
src/views/table/high/header/columns.tsx
Normal file
51
src/views/table/high/header/columns.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
import { tableData } from "../data";
|
||||
import { ref, onMounted } from "vue";
|
||||
import { clone } from "@pureadmin/utils";
|
||||
|
||||
export function useColumns() {
|
||||
const dataList = ref([]);
|
||||
const columns = ref<TableColumnList>([
|
||||
{
|
||||
label: "日期",
|
||||
prop: "date"
|
||||
},
|
||||
{
|
||||
label: "姓名",
|
||||
prop: "name"
|
||||
},
|
||||
{
|
||||
label: "地址",
|
||||
prop: "address"
|
||||
}
|
||||
]);
|
||||
|
||||
function onChange() {
|
||||
// 动态表头只需给 columns.value 重新赋值即可，如下
|
||||
columns.value = [
|
||||
{
|
||||
label: "日期" + Math.round(Math.random() * 99),
|
||||
prop: "date"
|
||||
},
|
||||
{
|
||||
label: Math.round(Math.random() * 99) + "姓名",
|
||||
prop: "name"
|
||||
},
|
||||
{
|
||||
label: "地址",
|
||||
prop: "address"
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
clone(tableData, true).forEach((item, index) => {
|
||||
dataList.value.push({ id: index, ...item });
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
columns,
|
||||
dataList,
|
||||
onChange
|
||||
};
|
||||
}
|
||||
25
src/views/table/high/header/index.vue
Normal file
25
src/views/table/high/header/index.vue
Normal file
@ -0,0 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useColumns } from "./columns";
|
||||
|
||||
const tableRef = ref();
|
||||
|
||||
const { columns, dataList, onChange } = useColumns();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-button type="primary" class="mb-[20px]" @click="onChange">
|
||||
切换表头
|
||||
</el-button>
|
||||
<pure-table
|
||||
ref="tableRef"
|
||||
border
|
||||
row-key="id"
|
||||
alignWhole="center"
|
||||
showOverflowTooltip
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,5 +1,6 @@
|
||||
import Adaptive from "./adaptive/index.vue";
|
||||
import Page from "./page/index.vue";
|
||||
import Header from "./header/index.vue";
|
||||
import RowDrag from "./drag/row/index.vue";
|
||||
import ColumnDrag from "./drag/column/index.vue";
|
||||
import Contextmenu from "./contextmenu/index.vue";
|
||||
@ -25,6 +26,12 @@ export const list = [
|
||||
title: "分页、加载动画、动态列",
|
||||
component: Page
|
||||
},
|
||||
{
|
||||
key: "header",
|
||||
content: rendContent("header"),
|
||||
title: "动态表头",
|
||||
component: Header
|
||||
},
|
||||
{
|
||||
key: "tableSelect",
|
||||
content: rendContent("table-select"),
|
||||
|
||||
@ -9,7 +9,7 @@ const { columns, dataList, print, cellStyle, rowStyle, headerCellStyle } =
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-button type="primary" class="mb-[20px] float-right" @click="print">
|
||||
<el-button type="primary" class="mb-[20px]" @click="print">
|
||||
打印
|
||||
</el-button>
|
||||
<!-- rowHoverBgColor="transparent" 鼠标经过行时，去掉行的背景色 -->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user