mirror of
https://github.com/jekip/naive-ui-admin.git
synced 2026-02-13 09:42:27 +08:00
fix Bug or add docs
This commit is contained in:
Ah jung
75
src/views/comp/table/CellColumns.ts
Normal file
75
src/views/comp/table/CellColumns.ts
Normal file
@@ -0,0 +1,75 @@
|
||||
import { h } from 'vue';
|
||||
import { NAvatar } from 'naive-ui';
|
||||
|
||||
export const columns = [
|
||||
{
|
||||
title: 'id',
|
||||
key: 'id',
|
||||
},
|
||||
{
|
||||
title: '编码',
|
||||
key: 'no',
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
key: 'name',
|
||||
editComponent: 'NInput',
|
||||
// 默认必填校验
|
||||
editRule: true,
|
||||
edit: true,
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '头像',
|
||||
key: 'avatar',
|
||||
render(row) {
|
||||
return h(NAvatar, {
|
||||
size: 48,
|
||||
src: row.avatar,
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address',
|
||||
editComponent: 'NSelect',
|
||||
editComponentProps: {
|
||||
options: [
|
||||
{
|
||||
label: '广东省',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '浙江省',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
edit: true,
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '开始日期',
|
||||
key: 'beginTime',
|
||||
edit: true,
|
||||
width: 250,
|
||||
editComponent: 'NDatePicker',
|
||||
editComponentProps: {
|
||||
type: 'datetime',
|
||||
format: 'yyyy-MM-dd HH:mm:ss',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '结束日期',
|
||||
key: 'endTime',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
key: 'date',
|
||||
},
|
||||
{
|
||||
title: '停留时间',
|
||||
key: 'time',
|
||||
},
|
||||
];
|
||||
121
src/views/comp/table/basic.vue
Normal file
121
src/views/comp/table/basic.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<n-card :bordered="false" class="proCard">
|
||||
<BasicTable
|
||||
title="表格列表"
|
||||
titleTooltip="这是一个提示"
|
||||
:columns="columns"
|
||||
:request="loadDataTable"
|
||||
:row-key="(row) => row.id"
|
||||
ref="actionRef"
|
||||
:actionColumn="actionColumn"
|
||||
@update:checked-row-keys="onCheckedRow"
|
||||
>
|
||||
<template #toolbar>
|
||||
<n-button type="primary" @click="reloadTable">刷新数据</n-button>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</n-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, toRefs, ref, h } from 'vue';
|
||||
import { BasicTable, TableAction } from '@/components/Table';
|
||||
import { getTableList } from '@/api/table/list';
|
||||
import { columns } from './basicColumns';
|
||||
import { useDialog, useMessage } from 'naive-ui';
|
||||
|
||||
export default defineComponent({
|
||||
components: { BasicTable },
|
||||
setup() {
|
||||
const message = useMessage();
|
||||
const dialog = useDialog();
|
||||
const actionRef = ref();
|
||||
const state = reactive({
|
||||
params: {
|
||||
pageSize: 5,
|
||||
name: 'xiaoMa',
|
||||
},
|
||||
actionColumn: {
|
||||
width: 150,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
render(record) {
|
||||
return h(TableAction, {
|
||||
style: 'button',
|
||||
actions: createActions(record),
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
function createActions(record) {
|
||||
return [
|
||||
{
|
||||
label: '删除',
|
||||
icon: 'ic:outline-delete-outline',
|
||||
onClick: handleDelete.bind(null, record),
|
||||
// 根据业务控制是否显示 isShow 和 auth 是并且关系
|
||||
ifShow: () => {
|
||||
return true;
|
||||
},
|
||||
// 根据权限控制是否显示: 有权限，会显示，支持多个
|
||||
auth: ['basic_list'],
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
onClick: handleEdit.bind(null, record),
|
||||
ifShow: () => {
|
||||
return true;
|
||||
},
|
||||
auth: ['basic_list'],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
const loadDataTable = async (params) => {
|
||||
const data = await getTableList(params);
|
||||
return data;
|
||||
};
|
||||
|
||||
function onCheckedRow(rowKeys) {
|
||||
console.log(rowKeys);
|
||||
}
|
||||
|
||||
function reloadTable() {
|
||||
actionRef.value.reload();
|
||||
}
|
||||
|
||||
function handleDelete(record) {
|
||||
console.log(record);
|
||||
dialog.info({
|
||||
title: '提示',
|
||||
content: `您想删除${record.name}`,
|
||||
positiveText: '确定',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: () => {
|
||||
message.success('删除成功');
|
||||
},
|
||||
onNegativeClick: () => {},
|
||||
});
|
||||
}
|
||||
|
||||
function handleEdit(record) {
|
||||
console.log(record);
|
||||
message.success('您点击了编辑按钮');
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
columns,
|
||||
actionRef,
|
||||
loadDataTable,
|
||||
onCheckedRow,
|
||||
reloadTable,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
66
src/views/comp/table/basicColumns.ts
Normal file
66
src/views/comp/table/basicColumns.ts
Normal file
@@ -0,0 +1,66 @@
|
||||
import { h } from 'vue';
|
||||
import { NAvatar, NTag } from 'naive-ui';
|
||||
|
||||
export const columns = [
|
||||
{
|
||||
title: 'id',
|
||||
key: 'id',
|
||||
},
|
||||
{
|
||||
title: '编码',
|
||||
key: 'no',
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
key: 'name',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '头像',
|
||||
key: 'avatar',
|
||||
render(row) {
|
||||
return h(NAvatar, {
|
||||
size: 48,
|
||||
src: row.avatar,
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '开始日期',
|
||||
key: 'beginTime',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '结束日期',
|
||||
key: 'endTime',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
render(row) {
|
||||
return h(
|
||||
NTag,
|
||||
{
|
||||
type: row.status ? 'success' : 'error',
|
||||
},
|
||||
{
|
||||
default: () => (row.status ? '启用' : '禁用'),
|
||||
}
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
key: 'date',
|
||||
},
|
||||
{
|
||||
title: '停留时间',
|
||||
key: 'time',
|
||||
},
|
||||
];
|
||||
@@ -1,67 +0,0 @@
|
||||
import { h } from 'vue';
|
||||
import { NAvatar, NButton } from 'naive-ui';
|
||||
|
||||
export const columns = [
|
||||
{
|
||||
title: 'id',
|
||||
key: 'id',
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '头像',
|
||||
key: 'avatar',
|
||||
render(row) {
|
||||
return h(NAvatar, {
|
||||
size: 48,
|
||||
src: row.avatar,
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address',
|
||||
},
|
||||
{
|
||||
title: '开始日期',
|
||||
key: 'beginTime',
|
||||
},
|
||||
{
|
||||
title: '结束日期',
|
||||
key: 'endTime',
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
key: 'date',
|
||||
},
|
||||
{
|
||||
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: () => '编辑' }
|
||||
),
|
||||
];
|
||||
},
|
||||
},
|
||||
];
|
||||
131
src/views/comp/table/editCell.vue
Normal file
131
src/views/comp/table/editCell.vue
Normal file
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<n-card :bordered="false" class="proCard">
|
||||
<BasicTable
|
||||
title="表格列表"
|
||||
titleTooltip="这是一个提示"
|
||||
:columns="columns"
|
||||
:request="loadDataTable"
|
||||
:row-key="(row) => row.id"
|
||||
ref="actionRef"
|
||||
:actionColumn="actionColumn"
|
||||
@edit-end="editEnd"
|
||||
@edit-change="onEditChange"
|
||||
@update:checked-row-keys="onCheckedRow"
|
||||
>
|
||||
<template #toolbar>
|
||||
<n-button type="primary" @click="reloadTable">刷新数据</n-button>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</n-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, toRefs, ref, h } from 'vue';
|
||||
import { BasicTable, TableAction } from '@/components/Table';
|
||||
import { getTableList } from '@/api/table/list';
|
||||
import { columns } from './CellColumns';
|
||||
|
||||
export default defineComponent({
|
||||
components: { BasicTable },
|
||||
setup() {
|
||||
const actionRef = ref();
|
||||
const currentEditKeyRef = ref('');
|
||||
const state = reactive({
|
||||
params: {
|
||||
pageSize: 5,
|
||||
name: 'xiaoMa',
|
||||
},
|
||||
actionColumn: {
|
||||
width: 150,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
render(record) {
|
||||
return h(TableAction, {
|
||||
style: 'button',
|
||||
actions: createActions(record),
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
function handleEdit(record) {
|
||||
currentEditKeyRef.value = record.key;
|
||||
record.onEdit?.(true);
|
||||
}
|
||||
|
||||
function handleCancel(record: EditRecordRow) {
|
||||
currentEditKeyRef.value = '';
|
||||
record.onEdit?.(false, false);
|
||||
}
|
||||
|
||||
function onEditChange({ column, value, record }) {
|
||||
if (column.dataIndex === 'id') {
|
||||
record.editValueRefs.name4.value = `${value}`;
|
||||
}
|
||||
console.log(column, value, record);
|
||||
}
|
||||
|
||||
async function handleSave(record: EditRecordRow) {
|
||||
const pass = await record.onEdit?.(false, true);
|
||||
if (pass) {
|
||||
currentEditKeyRef.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
function createActions(record) {
|
||||
if (!record.editable) {
|
||||
return [
|
||||
{
|
||||
label: '编辑',
|
||||
onClick: handleEdit.bind(null, record),
|
||||
},
|
||||
];
|
||||
} else {
|
||||
return [
|
||||
{
|
||||
label: '保存',
|
||||
onClick: handleSave.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '取消',
|
||||
onClick: handleCancel.bind(null, record),
|
||||
},
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
const loadDataTable = async (params) => {
|
||||
const data = await getTableList(params);
|
||||
return data;
|
||||
};
|
||||
|
||||
function onCheckedRow(rowKeys) {
|
||||
console.log(rowKeys);
|
||||
}
|
||||
|
||||
function reloadTable() {
|
||||
console.log(actionRef.value);
|
||||
actionRef.value.reload();
|
||||
}
|
||||
|
||||
function editEnd({ record, index, key, value }) {
|
||||
console.log(value);
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
columns,
|
||||
actionRef,
|
||||
loadDataTable,
|
||||
onCheckedRow,
|
||||
reloadTable,
|
||||
editEnd,
|
||||
onEditChange,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
131
src/views/comp/table/editRow.vue
Normal file
131
src/views/comp/table/editRow.vue
Normal file
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<n-card :bordered="false" class="proCard">
|
||||
<BasicTable
|
||||
title="表格列表"
|
||||
titleTooltip="这是一个提示"
|
||||
:columns="columns"
|
||||
:request="loadDataTable"
|
||||
:row-key="(row) => row.id"
|
||||
ref="actionRef"
|
||||
:actionColumn="actionColumn"
|
||||
@edit-end="editEnd"
|
||||
@edit-change="onEditChange"
|
||||
@update:checked-row-keys="onCheckedRow"
|
||||
>
|
||||
<template #toolbar>
|
||||
<n-button type="primary" @click="reloadTable">刷新数据</n-button>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</n-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, toRefs, ref, h } from 'vue';
|
||||
import { BasicTable, TableAction } from '@/components/Table';
|
||||
import { getTableList } from '@/api/table/list';
|
||||
import { columns } from './rowColumns';
|
||||
|
||||
export default defineComponent({
|
||||
components: { BasicTable },
|
||||
setup() {
|
||||
const actionRef = ref();
|
||||
const currentEditKeyRef = ref('');
|
||||
const state = reactive({
|
||||
params: {
|
||||
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) {
|
||||
currentEditKeyRef.value = record.key;
|
||||
record.onEdit?.(true);
|
||||
}
|
||||
|
||||
function handleCancel(record: EditRecordRow) {
|
||||
currentEditKeyRef.value = '';
|
||||
record.onEdit?.(false, false);
|
||||
}
|
||||
|
||||
function onEditChange({ column, value, record }) {
|
||||
if (column.dataIndex === 'id') {
|
||||
record.editValueRefs.name4.value = `${value}`;
|
||||
}
|
||||
console.log(column, value, record);
|
||||
}
|
||||
|
||||
async function handleSave(record: EditRecordRow) {
|
||||
const pass = await record.onEdit?.(false, true);
|
||||
if (pass) {
|
||||
currentEditKeyRef.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
function createActions(record) {
|
||||
if (!record.editable) {
|
||||
return [
|
||||
{
|
||||
label: '编辑',
|
||||
onClick: handleEdit.bind(null, record),
|
||||
},
|
||||
];
|
||||
} else {
|
||||
return [
|
||||
{
|
||||
label: '保存',
|
||||
onClick: handleSave.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '取消',
|
||||
onClick: handleCancel.bind(null, record),
|
||||
},
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
const loadDataTable = async (params) => {
|
||||
const data = await getTableList(params);
|
||||
return data;
|
||||
};
|
||||
|
||||
function onCheckedRow(rowKeys) {
|
||||
console.log(rowKeys);
|
||||
}
|
||||
|
||||
function reloadTable() {
|
||||
console.log(actionRef.value);
|
||||
actionRef.value.reload();
|
||||
}
|
||||
|
||||
function editEnd({ record, index, key, value }) {
|
||||
console.log(value);
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
columns,
|
||||
actionRef,
|
||||
loadDataTable,
|
||||
onCheckedRow,
|
||||
reloadTable,
|
||||
editEnd,
|
||||
onEditChange,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -1,61 +0,0 @@
|
||||
<template>
|
||||
<n-card :bordered="false" class="proCard">
|
||||
<BasicTable
|
||||
title="表格列表"
|
||||
titleTooltip="这是一个提示"
|
||||
:columns="columns"
|
||||
:request="loadDataTable"
|
||||
:row-key="(row) => row.id"
|
||||
ref="actionRef"
|
||||
@update:checked-row-keys="onCheckedRow"
|
||||
>
|
||||
<template #toolbar>
|
||||
<n-button type="primary" @click="reloadTable">刷新数据</n-button>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</n-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, toRefs, ref } from 'vue';
|
||||
import { BasicTable } from '@/components/Table';
|
||||
import { getTableList } from '@/api/table/list';
|
||||
import { columns } from './columns';
|
||||
|
||||
export default defineComponent({
|
||||
components: { BasicTable },
|
||||
setup() {
|
||||
const actionRef = ref();
|
||||
const state = reactive({
|
||||
params: {
|
||||
pageSize: 5,
|
||||
name: 'xiaoMa',
|
||||
},
|
||||
});
|
||||
const loadDataTable = async (params) => {
|
||||
const data = await getTableList(params);
|
||||
return data;
|
||||
};
|
||||
|
||||
function onCheckedRow(rowKeys) {
|
||||
console.log(rowKeys);
|
||||
}
|
||||
|
||||
function reloadTable() {
|
||||
console.log(actionRef.value);
|
||||
actionRef.value.reload();
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
columns,
|
||||
actionRef,
|
||||
loadDataTable,
|
||||
onCheckedRow,
|
||||
reloadTable,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
89
src/views/comp/table/rowColumns.ts
Normal file
89
src/views/comp/table/rowColumns.ts
Normal file
@@ -0,0 +1,89 @@
|
||||
import { h } from 'vue';
|
||||
import { NAvatar } from 'naive-ui';
|
||||
|
||||
export const columns = [
|
||||
{
|
||||
title: 'id',
|
||||
key: 'id',
|
||||
},
|
||||
{
|
||||
title: '编码',
|
||||
key: 'no',
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
key: 'name',
|
||||
editComponent: 'NInput',
|
||||
editRow: true,
|
||||
// 默认必填校验
|
||||
editRule: true,
|
||||
edit: true,
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '头像',
|
||||
key: 'avatar',
|
||||
render(row) {
|
||||
return h(NAvatar, {
|
||||
size: 48,
|
||||
src: row.avatar,
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address',
|
||||
editRow: true,
|
||||
editComponent: 'NSelect',
|
||||
editComponentProps: {
|
||||
options: [
|
||||
{
|
||||
label: '广东省',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '浙江省',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
edit: true,
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '开始日期',
|
||||
key: 'beginTime',
|
||||
editRow: true,
|
||||
edit: true,
|
||||
width: 250,
|
||||
editComponent: 'NDatePicker',
|
||||
editComponentProps: {
|
||||
type: 'datetime',
|
||||
format: 'yyyy-MM-dd HH:mm:ss',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '结束日期',
|
||||
key: 'endTime',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
editRow: true,
|
||||
edit: true,
|
||||
width: 100,
|
||||
editComponent: 'NSwitch',
|
||||
editValueMap: (value) => {
|
||||
return value ? '启用' : '禁用';
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
key: 'date',
|
||||
},
|
||||
{
|
||||
title: '停留时间',
|
||||
key: 'time',
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user