73 lines
1.7 KiB
TypeScript
73 lines
1.7 KiB
TypeScript
import { message } from "@/utils/message";
|
||
import { tableData } from "../data";
|
||
import { ref, computed } from "vue";
|
||
|
||
// 需是hooks写法（函数中有return），避免失去响应性
|
||
export function useColumns() {
|
||
const search = ref("");
|
||
const filterTableData = computed(() =>
|
||
tableData.filter(
|
||
data =>
|
||
!search.value ||
|
||
data.name.toLowerCase().includes(search.value.toLowerCase())
|
||
)
|
||
);
|
||
|
||
const handleEdit = (index: number, row) => {
|
||
message(`您修改了第 ${index} 行，数据为：${JSON.stringify(row)}`, {
|
||
type: "success"
|
||
});
|
||
};
|
||
|
||
const handleDelete = (index: number, row) => {
|
||
message(`您删除了第 ${index} 行，数据为：${JSON.stringify(row)}`);
|
||
};
|
||
|
||
const columns: TableColumnList = [
|
||
{
|
||
prop: "date",
|
||
// 自定义表头，slot用法 #nameHeader="{ column, $index }"
|
||
headerSlot: "nameHeader"
|
||
},
|
||
{
|
||
label: "姓名",
|
||
prop: "name"
|
||
},
|
||
{
|
||
label: "地址",
|
||
prop: "address"
|
||
},
|
||
{
|
||
align: "right",
|
||
// 自定义表头，tsx用法
|
||
headerRenderer: () => (
|
||
<el-input
|
||
v-model={search.value}
|
||
size="small"
|
||
clearable
|
||
placeholder="Type to search"
|
||
/>
|
||
),
|
||
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>
|
||
</>
|
||
)
|
||
}
|
||
];
|
||
|
||
return {
|
||
columns,
|
||
filterTableData
|
||
};
|
||
}
|