fix: 表格按照最新fit2cloud-ui样式

This commit is contained in:
fit2cloud-chenyw 2021-04-28 14:54:55 +08:00
parent be033a5c66
commit 52d31b504e
8 changed files with 50 additions and 35 deletions

View File

@ -22,7 +22,7 @@
"element-resize-detector": "^1.2.2",
"element-ui": "2.13.0",
"file-saver": "^2.0.5",
"fit2cloud-ui": "^0.1.12",
"fit2cloud-ui": "^1.1.1",
"html2canvas": "^1.0.0-rc.7",
"js-cookie": "2.2.0",
"jsencrypt": "^3.0.0-rc.1",

View File

@ -1,3 +1,4 @@
<template>
<div class="complex-table">
<div v-if="$slots.header || header" class="complex-table__header">
@ -5,12 +6,16 @@
</div>
<div v-if="$slots.toolbar || searchConfig" class="complex-table__toolbar">
<slot name="toolbar">
<fu-search-bar v-bind="searchConfig" @exec="search">
<slot name="buttons" />
<fu-table-column-select :columns="columns" />
</fu-search-bar>
</slot>
<div>
<slot name="toolbar" />
</div>
<fu-search-bar v-bind="searchConfig" @exec="search">
<template #complex>
<slot name="complex" />
</template>
<slot name="buttons" />
<fu-table-column-select :columns="columns" />
</fu-search-bar>
</div>
<div class="complex-table__body">
@ -41,13 +46,9 @@ export default {
type: Array,
default: () => []
},
// eslint-disable-next-line vue/require-default-prop
localKey: String, // Key
// eslint-disable-next-line vue/require-default-prop
header: String,
// eslint-disable-next-line vue/require-default-prop
searchConfig: Object,
// eslint-disable-next-line vue/require-default-prop
paginationConfig: Object
},
data() {
@ -72,12 +73,16 @@ export default {
.complex-table {
.complex-table__header {
@include flex-row(flex-start, center);
height: 60px;
font-size: 20px;
line-height: 60px;
font-size: 18px;
}
.complex-table__toolbar {
@include flex-row(flex-end, center);
@include flex-row(space-between, center);
.fu-search-bar {
width: auto;
}
}
.complex-table__pagination {

View File

@ -5,12 +5,22 @@
</div>
<div v-if="$slots.toolbar || searchConfig" class="complex-table__toolbar">
<slot name="toolbar">
<!-- <slot name="toolbar">
<fu-search-bar v-bind="searchConfig" @exec="search">
<slot name="buttons" />
<fu-table-column-select :columns="columns" />
</fu-search-bar>
</slot>
</slot> -->
<div>
<slot name="toolbar" />
</div>
<fu-search-bar v-bind="searchConfig" @exec="search">
<template #complex>
<slot name="complex" />
</template>
<slot name="buttons" />
<fu-table-column-select :columns="columns" />
</fu-search-bar>
</div>
<div class="complex-table__body">
@ -73,12 +83,16 @@ export default {
.complex-table {
.complex-table__header {
@include flex-row(flex-start, center);
height: 60px;
font-size: 20px;
line-height: 60px;
font-size: 18px;
}
.complex-table__toolbar {
@include flex-row(flex-end, center);
@include flex-row(space-between, center);
.fu-search-bar {
width: auto;
}
}
.complex-table__pagination {

View File

@ -3,14 +3,14 @@
<complex-table
:data="data"
:columns="columns"
:buttons="buttons"
:header="header"
:search-config="searchConfig"
:pagination-config="paginationConfig"
@select="select"
@search="search"
>
<template #buttons>
<template #toolbar>
<fu-table-button v-permission="['datasource:add']" icon="el-icon-circle-plus-outline" :label="$t('datasource.create')" @click="create" />
</template>

View File

@ -18,12 +18,11 @@
> -->
<tree-table
:columns="columns"
:buttons="buttons"
:header="header"
:search-config="searchConfig"
@search="search"
>
<template #buttons>
<template #toolbar>
<fu-table-button v-permission="['dept:add']" icon="el-icon-circle-plus-outline" :label="$t('organization.create')" @click="create" />
</template>
<el-table

View File

@ -2,12 +2,11 @@
<layout-content v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
<tree-table
:columns="columns"
:buttons="buttons"
:header="header"
:search-config="searchConfig"
@search="initTableData"
>
<template v-permission="['menu:add']" #buttons>
<template #toolbar>
<fu-table-button v-permission="['menu:add']" icon="el-icon-circle-plus-outline" :label="$t('menu.create')" @click="create" />
</template>
@ -173,7 +172,7 @@ export default {
}
],
searchConfig: {
useQuickSearch: false,
useQuickSearch: true,
useComplexSearch: false,
quickPlaceholder: '按姓名搜索',
components: [

View File

@ -7,14 +7,13 @@
highlight-current-row
:data="tableData"
:columns="columns"
:buttons="buttons"
:header="header"
:search-config="searchConfig"
:pagination-config="paginationConfig"
@search="search"
@row-click="rowClick"
>
<template #buttons>
<template #toolbar>
<fu-table-button icon="el-icon-circle-plus-outline" :label="$t('role.add')" @click="create" />
</template>

View File

@ -3,14 +3,13 @@
<complex-table
:data="data"
:columns="columns"
:buttons="buttons"
:header="header"
:search-config="searchConfig"
:pagination-config="paginationConfig"
@select="select"
@search="search"
>
<template #buttons>
<template #toolbar>
<fu-table-button v-permission="['user:add']" icon="el-icon-circle-plus-outline" :label="$t('user.create')" @click="create" />
</template>