73 lines
1.8 KiB
TypeScript
73 lines
1.8 KiB
TypeScript
import { message } from "@/utils/message";
|
||
import { tableData } from "../data";
|
||
|
||
// 如果您不习惯tsx写法，可以传slot，然后在template里写
|
||
// 需是hooks写法（函数中有return），避免失去响应性
|
||
export function useColumns() {
|
||
const columns: TableColumnList = [
|
||
{
|
||
label: "日期",
|
||
prop: "date",
|
||
cellRenderer: ({ row }) => (
|
||
<div style="display: flex; align-items: center">
|
||
<iconify-icon-online icon="ep:timer" />
|
||
<span style="margin-left: 10px">{row.date}</span>
|
||
</div>
|
||
)
|
||
},
|
||
{
|
||
label: "姓名",
|
||
prop: "name",
|
||
cellRenderer: ({ row }) => (
|
||
<el-popover effect="light" trigger="hover" placement="top" width="auto">
|
||
{{
|
||
default: () => (
|
||
<>
|
||
<div>name: {row.name}</div>
|
||
<div>address: {row.address}</div>
|
||
</>
|
||
),
|
||
reference: () => <el-tag>{row.name}</el-tag>
|
||
}}
|
||
</el-popover>
|
||
)
|
||
},
|
||
{
|
||
label: "地址",
|
||
prop: "address"
|
||
},
|
||
{
|
||
label: "操作",
|
||
cellRenderer: ({ index, row }) => (
|
||
<>
|
||
<el-button size="small" onClick={() => handleEdit(index + 1, row)}>
|
||
Edit
|
||
</el-button>
|
||
<el-button
|
||
size="small"
|
||
type="danger"
|
||
onClick={() => handleDelete(index + 1, row)}
|
||
>
|
||
Delete
|
||
</el-button>
|
||
</>
|
||
)
|
||
}
|
||
];
|
||
|
||
const handleEdit = (index: number, row) => {
|
||
message(`您修改了第 ${index} 行，数据为：${JSON.stringify(row)}`, {
|
||
type: "success"
|
||
});
|
||
};
|
||
|
||
const handleDelete = (index: number, row) => {
|
||
message(`您删除了第 ${index} 行，数据为：${JSON.stringify(row)}`);
|
||
};
|
||
|
||
return {
|
||
columns,
|
||
tableData
|
||
};
|
||
}
|