mirrors2/naive-ui-admin
1
0
Fork 0
mirror of https://github.com/jekip/naive-ui-admin.git synced 2026-02-11 16:52:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix bug #22 表格列默认开启 ellipsis 属性

Browse Source
This commit is contained in:
啊俊
2021-08-08 15:17:02 +08:00
parent d973b2a543
commit 8f05b20ffa
14 changed files with 56 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Table/src/Table.vue
View File

@@ -233,9 +233,6 @@
getCacheColumns,
setCacheColumnsField,
emit,
getSize: () => {
return unref(getBindValues).size;
},
};
const getCanResize = computed(() => {
@@ -288,7 +285,6 @@
densitySelect,
updatePage,
updatePageSize,
updateCheckedRowKeys,
pagination,
tableAction,
};

2
src/components/Table/src/hooks/useColumns.ts
View File

@@ -52,6 +52,8 @@ export function useColumns(propsRef: ComputedRef<BasicTableProps>) {
return hasPermission(column.auth) && isIfShow(column);
})
.map((column) => {
//默认 ellipsis 为true
column.ellipsis = typeof column.ellipsis === 'undefined' ? { tooltip: true } : false;
const { edit } = column;
if (edit) {
column.render = renderEditCell(column);

6
src/layout/components/Menu/index.vue
View File

@@ -40,7 +40,8 @@
default: 'left',
},
},
setup(props) {
emits: ['update:collapsed'],
setup(props, { emit }) {
// 当前路由
const currentRoute = useRoute();
const router = useRouter();
@@ -72,6 +73,9 @@
() => settingStore.menuSetting.mixMenu,
() => {
updateMenu();
if (props.collapsed) {
emit('update:collapsed', !props.collapsed);
}
}
);

11
src/views/comp/table/CellColumns.ts
View File

@@ -5,10 +5,12 @@ export const columns = [
{
title: 'id',
key: 'id',
width: 100,
},
{
title: '编码',
key: 'no',
width: 100,
},
{
title: '名称',
@@ -22,6 +24,7 @@ export const columns = [
{
title: '头像',
key: 'avatar',
width: 100,
render(row) {
return h(NAvatar, {
size: 48,
@@ -47,29 +50,33 @@ export const columns = [
},
edit: true,
width: 200,
ellipsis: false,
},
{
title: '开始日期',
key: 'beginTime',
edit: true,
width: 250,
width: 160,
editComponent: 'NDatePicker',
editComponentProps: {
type: 'datetime',
format: 'yyyy-MM-dd HH:mm:ss',
},
ellipsis: false,
},
{
title: '结束日期',
key: 'endTime',
width: 200,
width: 160,
},
{
title: '创建时间',
key: 'date',
width: 160,
},
{
title: '停留时间',
key: 'time',
width: 160,
},
];

1
src/views/comp/table/basic.vue
View File

@@ -8,6 +8,7 @@
:row-key="(row) => row.id"
ref="actionRef"
:actionColumn="actionColumn"
:scroll-x="1360"
@update:checked-row-keys="onCheckedRow"
>
<template #toolbar>

14
src/views/comp/table/basicColumns.ts
View File

@@ -5,19 +5,22 @@ export const columns = [
{
title: 'id',
key: 'id',
width: 100,
},
{
title: '编码',
key: 'no',
width: 100,
},
{
title: '名称',
key: 'name',
width: 200,
width: 100,
},
{
title: '头像',
key: 'avatar',
width: 100,
render(row) {
return h(NAvatar, {
size: 48,
@@ -28,21 +31,22 @@ export const columns = [
{
title: '地址',
key: 'address',
width: 200,
width: 150,
},
{
title: '开始日期',
key: 'beginTime',
width: 200,
width: 160,
},
{
title: '结束日期',
key: 'endTime',
width: 200,
width: 160,
},
{
title: '状态',
key: 'status',
width: 100,
render(row) {
return h(
NTag,
@@ -58,9 +62,11 @@ export const columns = [
{
title: '创建时间',
key: 'date',
width: 160,
},
{
title: '停留时间',
key: 'time',
width: 160,
},
];

15
src/views/comp/table/editCell.vue
View File

@@ -7,10 +7,10 @@
:request="loadDataTable"
:row-key="(row) => row.id"
ref="actionRef"
:actionColumn="actionColumn"
@edit-end="editEnd"
@edit-change="onEditChange"
@update:checked-row-keys="onCheckedRow"
:scroll-x="1300"
>
<template #toolbar>
<n-button type="primary" @click="reloadTable">刷新数据</n-button>
@@ -35,19 +35,6 @@
pageSize: 5,
name: 'xiaoMa',
},
actionColumn: {
width: 150,
title: '操作',
key: 'action',
fixed: 'right',
align: 'center',
render(record) {
return h(TableAction, {
style: 'button',
actions: createActions(record),
});
},
},
});
function handleEdit(record) {

1
src/views/comp/table/editRow.vue
View File

@@ -11,6 +11,7 @@
@edit-end="editEnd"
@edit-change="onEditChange"
@update:checked-row-keys="onCheckedRow"
:scroll-x="1530"
>
<template #toolbar>
<n-button type="primary" @click="reloadTable">刷新数据</n-button>

11
src/views/comp/table/rowColumns.ts
View File

@@ -5,10 +5,12 @@ export const columns = [
{
title: 'id',
key: 'id',
width: 100,
},
{
title: '编码',
key: 'no',
width: 100,
},
{
title: '名称',
@@ -23,6 +25,7 @@ export const columns = [
{
title: '头像',
key: 'avatar',
width: 100,
render(row) {
return h(NAvatar, {
size: 48,
@@ -49,23 +52,25 @@ export const columns = [
},
edit: true,
width: 200,
ellipsis: false,
},
{
title: '开始日期',
key: 'beginTime',
editRow: true,
edit: true,
width: 250,
width: 160,
editComponent: 'NDatePicker',
editComponentProps: {
type: 'datetime',
format: 'yyyy-MM-dd HH:mm:ss',
},
ellipsis: false,
},
{
title: '结束日期',
key: 'endTime',
width: 200,
width: 160,
},
{
title: '状态',
@@ -81,9 +86,11 @@ export const columns = [
{
title: '创建时间',
key: 'date',
width: 160,
},
{
title: '停留时间',
key: 'time',
width: 160,
},
];

38
src/views/list/basicList/columns.ts
View File

@@ -5,14 +5,17 @@ export const columns = [
{
title: 'id',
key: 'id',
width: 100,
},
{
title: '名称',
key: 'name',
width: 100,
},
{
title: '头像',
key: 'avatar',
width: 100,
render(row) {
return h(NAvatar, {
size: 48,
@@ -27,48 +30,21 @@ export const columns = [
ifShow: (_column) => {
return true; // 根据业务控制是否显示
},
width: 150,
},
{
title: '开始日期',
key: 'beginTime',
width: 160,
},
{
title: '结束日期',
key: 'endTime',
width: 160,
},
{
title: '创建时间',
key: 'date',
width: 100,
},
// {
// title: '操作',
// key: 'actions',
// width: 150,
// //简单写一下例子，不建议这么写，过段时间，这里封二次封装
// render() {
// return [
// h(
// NButton,
// {
// size: 'small',
// type: 'error',
// style: 'margin-right:10px',
// onClick: () => {
// }
// },
// { default: () => '删除' }
// ),
// h(
// NButton,
// {
// size: 'small',
// onClick: () => {
//
// }
// },
// { default: () => '编辑' }
// )
// ]
// }
// }
];

3
src/views/list/basicList/index.vue
View File

@@ -13,6 +13,7 @@
ref="actionRef"
:actionColumn="actionColumn"
@update:checked-row-keys="onCheckedRow"
:scroll-x="1090"
>
<template #tableTitle>
<n-button type="primary" @click="addTable">
@@ -230,7 +231,7 @@
name: 'xiaoMa',
},
actionColumn: {
width: 250,
width: 220,
title: '操作',
key: 'action',
fixed: 'right',