x-php-Admin/copy backup/vab/contextmenu.vue

<!--
 * @Descripttion: 右键简单组件演示文件
 * @version: 1.0
 * @Author: sakuya
 * @Date: 2021年7月22日16:31:14
 * @LastEditors:
 * @LastEditTime:
-->

<template>
	<el-main>
		<el-row :gutter="15">
			<el-col :lg="12">
				<el-card shadow="never">
					<el-alert title="试试右键表格行看看. 支持多级菜单, 动态菜单等等等..." type="success" style="margin-bottom:20px;"></el-alert>
					<el-table ref="table" :data="tableData" highlight-current-row @row-contextmenu="rowContextmenu">
						<el-table-column type="expand">
							<template #default="props">
								<el-empty :description="props.row.id + ' 自定义扩展行'" :image-size="60"></el-empty>
							</template>
						</el-table-column>
						<el-table-column prop="id" label="ID" width="50"></el-table-column>
						<el-table-column prop="name" label="NAME" width="220"></el-table-column>
						<el-table-column prop="date" label="DATE"></el-table-column>
						<el-table-column prop="state" label="STATE"></el-table-column>
					</el-table>
				</el-card>
			</el-col>
			<el-col :lg="12">
				<el-card shadow="never" @contextmenu.prevent="openMenu">
					<div style="height:500px;display: flex;flex-direction: column;align-items: center;justify-content: center;color: #999;">
						试试看在上下左右四个角落右键，看看边缘位置修正效果
					</div>
				</el-card>
			</el-col>
		</el-row>
	</el-main>

	<x-contextmenu ref="contextmenu" @command="handleCommand" @visible-change="visibleChange">
		<x-contextmenu-item command="a" title="返回(B)" suffix="Alt+←"></x-contextmenu-item>
		<x-contextmenu-item command="b" title="重新加载(R)" suffix="Ctrl+R" icon="el-icon-refresh"></x-contextmenu-item>
		<x-contextmenu-item title="切换兼容性模式" divided>
			<x-contextmenu-item command="c1" title="二级菜单1"></x-contextmenu-item>
			<x-contextmenu-item title="二级菜单2">
				<x-contextmenu-item command="c2-1" title="三级菜单1"></x-contextmenu-item>
				<x-contextmenu-item command="c2-2" title="三级菜单2"></x-contextmenu-item>
				<x-contextmenu-item command="c2-3" title="三级菜单3"></x-contextmenu-item>
			</x-contextmenu-item>
			<x-contextmenu-item command="c3" title="二级菜单3"></x-contextmenu-item>
		</x-contextmenu-item>
		<x-contextmenu-item  command="d" title="属性(P)" divided :disabled="row&&row.state==0"></x-contextmenu-item>
		<x-contextmenu-item  command="e" title="设置state=1" v-if="row&&row.state==0"></x-contextmenu-item>
	</x-contextmenu>

</template>

<script>
	import xContextmenu from '@/components/xContextmenu'
	import xContextmenuItem from '@/components/xContextmenu/item'
	export default {
		name: 'contextmenu',
		components: {
			xContextmenu,
			xContextmenuItem
		},
		data() {
			return {
				row: null,
				tableData: [
					{
						id: '1',
						name: 'Sakuya',
						date: '2021-10-10',
						state: 1
					},
					{
						id: '2',
						name: 'Lolowan(此行右键属性禁用)',
						date: '2021-10-09',
						state: 0
					},
					{
						id: '3',
						name: 'Ali',
						date: '2021-10-08',
						state: 1
					}
				]
			}
		},
		mounted() {

		},
		methods: {
			rowContextmenu(row, column, event){
				this.row = row
				this.$refs.table.setCurrentRow(row);
				this.$refs.contextmenu.openMenu(event)
			},
			openMenu(e){
				this.row = null
				this.$refs.contextmenu.openMenu(e)
			},
			handleCommand(command){
				this.$message('click on item ' + command)
				if(command == 'e'){
					this.row.state = 1
				}
			},
			visibleChange(visible){
				if(!visible){
					this.$refs.table.setCurrentRow();
				}
			}
		}
	}
</script>