74 lines
1.6 KiB
TypeScript
74 lines
1.6 KiB
TypeScript
|
import { ref } from "vue";
|
|||
|
|
import { tableDataDrag } from "../data";
|
|||
|
|
import { clone } from "@pureadmin/utils";
|
|||
|
|
import { message } from "@/utils/message";
|
|||
|
|
import { CustomMouseMenu } from "@howdyjs/mouse-menu";
|
|||
|
|
|
|||
|
|
export function useColumns() {
|
|||
|
|
const dataList = ref(clone(tableDataDrag, true));
|
|||
|
|
|
|||
|
|
const columns: TableColumnList = [
|
|||
|
|
{
|
|||
|
|
label: "ID",
|
|||
|
|
prop: "id"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "日期",
|
|||
|
|
prop: "date"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "姓名",
|
|||
|
|
prop: "name"
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// 配置参考：https://kongfandong.cn/howdy/mouse-menu/readme
|
|||
|
|
const menuOptions = {
|
|||
|
|
menuList: [
|
|||
|
|
{
|
|||
|
|
label: ({ id }) => `ID为：${id}`,
|
|||
|
|
disabled: true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "修改",
|
|||
|
|
tips: "Edit",
|
|||
|
|
fn: row =>
|
|||
|
|
message(
|
|||
|
|
`您修改了第 ${
|
|||
|
|
dataList.value.findIndex(v => v.id === row.id) + 1
|
|||
|
|
} 行，数据为：${JSON.stringify(row)}`,
|
|||
|
|
{
|
|||
|
|
type: "success"
|
|||
|
|
}
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function showMouseMenu(row, column, event) {
|
|||
|
|
event.preventDefault();
|
|||
|
|
const { x, y } = event;
|
|||
|
|
const ctx = CustomMouseMenu({
|
|||
|
|
el: event.currentTarget,
|
|||
|
|
params: row,
|
|||
|
|
// 菜单容器的CSS设置
|
|||
|
|
menuWrapperCss: {
|
|||
|
|
background: "var(--el-bg-color)"
|
|||
|
|
},
|
|||
|
|
menuItemCss: {
|
|||
|
|
labelColor: "var(--el-text-color)",
|
|||
|
|
hoverLabelColor: "var(--el-color-primary)",
|
|||
|
|
hoverTipsColor: "var(--el-color-primary)"
|
|||
|
|
},
|
|||
|
|
...menuOptions
|
|||
|
|
});
|
|||
|
|
ctx.show(x, y);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
columns,
|
|||
|
|
dataList,
|
|||
|
|
showMouseMenu
|
|||
|
|
};
|
|||
|
|
}
|