Browse Source

👣 二次封装扩展vben-Table组件

master
wangxiang 3 years ago
parent
commit
7914fb2877
  1. 15
      kicc-ui/src/components/Table/src/BasicTable.vue
  2. 45
      kicc-ui/src/components/Table/src/components/TableHeader.vue
  3. 4
      kicc-ui/src/views/system/user/index.vue

15
kicc-ui/src/components/Table/src/BasicTable.vue

@ -328,6 +328,14 @@ @@ -328,6 +328,14 @@
.ant-table-tbody > tr.ant-table-row-selected td {
background-color: #262626;
}
.@{prefix-cls} {
// []table
.alert {
background-color: #323232;
border-color: #424242;
}
}
}
.@{prefix-cls} {
@ -410,6 +418,13 @@ @@ -410,6 +418,13 @@
padding: 12px 8px;
}
// []table
.alert {
height: 38px;
background-color: #f3f3f3;
border-color: #e3e3e3;
}
&--inset {
.ant-table-wrapper {
padding: 0;

45
kicc-ui/src/components/Table/src/components/TableHeader.vue

@ -20,20 +20,48 @@ @@ -20,20 +20,48 @@
/>
</div>
</div>
<!------------------------------------二次封装扩展------------------------------------->
<!--扩展table顶部插槽-->
<div style="margin:-2px 0 -2px;padding-top: 5px;">
<slot name="tableTop">
<Alert v-if="openRowSelection!=null"
type="info"
show-icon
class="alert"
>
<template #message>
<template v-if="selectRowKeys.length > 0">
<span>已选中 {{ selectRowKeys.length }} 条记录(可跨页)</span>
<Divider type="vertical"/>
<a @click="setSelectedRowKeys([])">清空</a>
<slot name="alertAfter"></slot>
</template>
<template v-else>
<span>未选中任何数据</span>
</template>
</template>
</Alert>
</slot>
</div>
<!--扩展table顶部插槽-->
</div>
</template>
<script lang="ts">
import type { TableSetting, ColumnChangeParam } from '../types/table';
import type { PropType } from 'vue';
import { defineComponent } from 'vue';
import { Divider } from 'ant-design-vue';
import { defineComponent, computed } from 'vue';
import { Divider, Alert } from 'ant-design-vue';
import TableSettingComponent from './settings/index.vue';
import TableTitle from './TableTitle.vue';
import { useDesign } from '/@/hooks/web/useDesign';
import { useTableContext } from '../hooks/useTableContext';
export default defineComponent({
name: 'BasicTableHeader',
components: {
Alert,
Divider,
TableTitle,
TableSetting: TableSettingComponent,
@ -59,7 +87,18 @@ @@ -59,7 +87,18 @@
function handleColumnChange(data: ColumnChangeParam[]) {
emit('columns-change', data);
}
return { prefixCls, handleColumnChange };
const { getSelectRowKeys, setSelectedRowKeys, getRowSelection } = useTableContext();
const selectRowKeys = computed(() => getSelectRowKeys());
const openRowSelection = computed(() => getRowSelection());
return {
prefixCls,
handleColumnChange,
selectRowKeys,
setSelectedRowKeys,
openRowSelection
};
},
});
</script>

4
kicc-ui/src/views/system/user/index.vue

@ -7,7 +7,6 @@ @@ -7,7 +7,6 @@
<DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect"/>
<BasicTable class="w-3/4 xl:w-5/5"
@register="registerTable"
@fetch-success="handleSelectionChange"
@selection-change="handleSelectionChange"
>
<template #toolbar>
@ -102,7 +101,7 @@ @@ -102,7 +101,7 @@
const { createMessage } = useMessage();
const [registerModal, { openModal }] = useModal();
const [registerResetPwdModal, { openModal: openResetPwdModal }] = useModal();
const [registerTable, { reload }] = useTable({
const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
title: '用户列表',
api: listUser,
rowKey: 'id',
@ -172,6 +171,7 @@ @@ -172,6 +171,7 @@
/** 处理表单提交成功 */
function handleSuccess() {
reload();
clearSelectedRowKeys();
}
/** 处理部门管理点击 */

Loading…
Cancel
Save