54 lines
1.3 KiB
Plaintext
54 lines
1.3 KiB
Plaintext
<template>
|
|
<a-card :bordered="false" class="proCard">
|
|
<BasicTable
|
|
leftTitle="表格列表"
|
|
leftTitleTooltip="这是一个提示"
|
|
:columns="columns"
|
|
:request="loadDataTable"
|
|
:row-key="(row) => row.id"
|
|
ref="actionRef"
|
|
@edit-end="editEnd"
|
|
@edit-change="onEditChange"
|
|
>
|
|
<template #toolbar>
|
|
<a-button type="primary" @click="reloadTable">刷新数据</a-button>
|
|
</template>
|
|
</BasicTable>
|
|
</a-card>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { reactive, ref } from 'vue';
|
|
import { BasicTable } from '@/components/Table';
|
|
import { getTableList } from '@/api/table/list';
|
|
import { columns } from './CellColumns';
|
|
|
|
const actionRef = ref();
|
|
const params = reactive({
|
|
pageSize: 5,
|
|
name: 'xiaoMa',
|
|
});
|
|
|
|
function onEditChange({ column, value, record }) {
|
|
if (column.key === 'id') {
|
|
record.editValueRefs.name4.value = `${value}`;
|
|
}
|
|
console.log(column, value, record);
|
|
}
|
|
|
|
const loadDataTable = async (res) => {
|
|
return await getTableList({ ...params, ...res });
|
|
};
|
|
|
|
function reloadTable() {
|
|
console.log(actionRef.value);
|
|
actionRef.value.reload();
|
|
}
|
|
|
|
function editEnd({ value }) {
|
|
console.log(value);
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped></style>
|