Element-UI-表格

字体大小预览速度下载代码编辑器大小

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
	Element UI进阶-表格
</title>

<script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css" />
    
<script src="https://unpkg.com/element-ui@2.15.14/lib/index.js"></script>

<script src="https://unpkg.com/three@0.128.0/build/three.min.js"></script>

<script src="https://unpkg.com/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
<style>
        body {
            background-color: #111;
            color: #e6e6e6;
            min-height: 100vh;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
        #app {
            display: flex;
            flex-direction: column;
            height: 100vh;
            width: 100vw;
        }
        .scene-container {
            width: 100%;
            height: 100%;
            position: relative;
        }
        #three-container {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .instructions {
            position: absolute;
            float: left;
            margin-left: 75px;
            transform: translateX(-50%);
            text-align: center;
            color: rgba(255, 255, 255, 1);
            font-size: 0.9rem;
            padding: 10px 20px;
            border-radius: 10px;
            z-index: 10;
            backdrop-filter: blur(5px);
        }
        .control-panel {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 15px;
            z-index: 10;
        }
        .objects-table-container {
            width: 400px;
            margin-top: 100px;
            background: rgba(30, 30, 40, 0.9);
            border-left: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
    </style>
<div id="app">
	
	<div class="scene-container">
		
		<div class="instructions">
			Element UI进阶-表格
		</div>
		<div class="control-panel">
			<el-button type="primary" round="" icon="el-icon-plus" @click="dialogVisible = true">添加物体</el-button>
		</div>

            <canvas id="three-container"></canvas>
            
            <el-dialog title="添加3D物体" :visible.sync="dialogVisible" width="500px" @closed="resetForm">
                <el-form :model="form" :rules="rules" ref="form" label-width="80px">
                    
		<div class="form-section">
			<el-form-item label="物体类型" prop="type">
                            <el-select v-model="form.type" placeholder="请选择物体类型" style="width:100%;">
                                <el-option label="立方体" value="cube"></el-option>
                                <el-option label="球体" value="sphere"></el-option>
                                <el-option label="圆柱体" value="cylinder"></el-option>
                                <el-option label="圆环" value="torus"></el-option>
                                <el-option label="圆锥体" value="cone"></el-option>
                                <el-option label="平面" value="plane"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="物体名称" prop="name">
                            <el-input v-model="form.name" placeholder="请输入物体名称"></el-input>
                        </el-form-item>
                        <el-form-item label="颜色">
                            <el-color-picker v-model="form.color" show-alpha=""></el-color-picker>
                        </el-form-item>
                        <el-form-item label="X坐标">
                            <el-slider v-model="form.position.x" :min="-10" :max="10" :step="0.5"></el-slider>
                        </el-form-item>
                        <el-form-item label="Y坐标">
                            <el-slider v-model="form.position.y" :min="-10" :max="10" :step="0.5"></el-slider>
                        </el-form-item>
                        <el-form-item label="Z坐标">
                            <el-slider v-model="form.position.z" :min="-10" :max="10" :step="0.5"></el-slider>
                        </el-form-item>
		</div>
</el-form>
                <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addObjectToScene">确 定</el-button>
                </span> </el-dialog>
            
		<div class="objects-table-container">
			<el-table :data="objectList" style="width:100%;" :header-cell-style="{background: 'rgba(50, 50, 60, 0.9)', color: '#e6e6e6'}" :cell-style="{background: 'rgba(40, 40, 50, 0.7)', color: '#e6e6e6'}">
                    <el-table-column prop="type" label="类型" width="80">
                        <template slot-scope="scope">
                            <span>{{ scope.row.type }}</span> </template>
                    </el-table-column>
                    <el-table-column prop="name" label="名称">
                    </el-table-column>
                    <el-table-column label="位置" width="120">
                        <template slot-scope="scope">
			<div>
				({{ scope.row.position.x.toFixed(1) }},
                                {{ scope.row.position.y.toFixed(1) }},
                                {{ scope.row.position.z.toFixed(1) }})
			</div>
</template>
                    </el-table-column>
                    <el-table-column label="操作" width="80">
                        <template slot-scope="scope">
                            <el-button type="danger" icon="el-icon-delete" size="mini" circle="" @click="removeObject(scope.$index, scope.row)">
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
		</div>
	</div>
</div>
<script>
        // 使用Element UI
        Vue.use(ELEMENT);
        new Vue({
            el: '#app',
            data() {
                return {
                    // Three.js相关变量
                    scene: null,
                    camera: null,
                    renderer: null,
                    controls: null,
                    // 对话框控制(默认关闭)
                    dialogVisible: false,
                    // 表单数据
                    form: {
                        type: '',
                        name: '',
                        color: '',
                        position: {
                            x: 0,
                            y: 0,
                            z: 0
                        }
                    },
                    // 表单验证规则
                    rules: {
                        type: [
                            { required: true, message: '请选择物体类型', trigger: 'blur' }
                        ],
                        name: [
                            { required: true, message: '请输入物体名称', trigger: 'blur' },
                            { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                        ]
                    },
                    // 物体列表
                    objectList: [],
                }
            },
            mounted() {
                // 组件挂载时初始化场景
                this.initThreeScene();
                // 监听窗口大小变化
                window.addEventListener('resize', this.onWindowResize);
                // 初始化默认表单数据
                this.resetForm();
            },
            beforeDestroy() {
                // 组件销毁前清理资源
                window.removeEventListener('resize', this.onWindowResize);
                if (this.controls) this.controls.dispose();
                if (this.renderer) this.renderer.dispose();
            },
            methods: {
                // 初始化Three.js场景
                initThreeScene() {
                    // 获取canvas容器
                    const container = document.getElementById('three-container');
                    // 创建场景
                    this.scene = new THREE.Scene();
                    // 设置深蓝色背景
                    this.scene.background = new THREE.Color(0x0a0a1a);
                    // 创建透视相机
                    this.camera = new THREE.PerspectiveCamera(
                        75, // 视野角度
                        container.clientWidth / container.clientHeight, // 宽高比
                        0.1, // 近裁剪面
                        1000 // 远裁剪面
                    );
                    this.camera.position.set(5, 5, 10); // 设置相机初始位置
                    // 创建渲染器
                    this.renderer = new THREE.WebGLRenderer({
                        canvas: container,
                        antialias: true
                    });
                    this.renderer.setSize(container.clientWidth, container.clientHeight); // 设置渲染尺寸
                    // 添加轨道控制器
                    this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
                    this.controls.enableDamping = true; // 启用阻尼效果，使操作更平滑
                    this.controls.dampingFactor = 0.05; // 阻尼系数
                    // 创建初始物体
                    this.createInitialObjects();
                    // 创建光源
                    this.createLights();
                    // 启动动画循环
                    this.animate();
                },
                // 创建初始物体
                createInitialObjects() {
                    // 创建立方体
                    const cubeGeometry = new THREE.BoxGeometry(2, 2, 2);
                    // 材质
                    const cubeMaterial = new THREE.MeshPhongMaterial({
                        color: 0x4361ee, // 蓝色
                    });
                    const cube = new THREE.Mesh(cubeGeometry, cubeMaterial); // 创建网格对象
                    cube.position.set(-3, 1, 0); // 设置位置
                    cube.name = "初始立方体"; // 设置物体名称
                    cube.userData.type = 'cube';
                    this.scene.add(cube); // 添加到场景
                    this.addObjectToList(cube);//添加到物体列表
                    // 创建球体
                    const sphereGeometry = new THREE.SphereGeometry(1.5, 32, 32);
                    const sphereMaterial = new THREE.MeshPhongMaterial({
                        color: 0xf72585,
                        shininess: 100
                    });
                    const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
                    sphere.castShadow = true;
                    sphere.position.set(3, 2, 0);
                    sphere.name = "初始球体";
                    sphere.userData.type = 'sphere';
                    this.scene.add(sphere);
                    this.addObjectToList(sphere);//添加到物体列表
                    // 创建平面（地面）
                    const planeGeometry = new THREE.PlaneGeometry(30, 30);
                    const planeMaterial = new THREE.MeshPhongMaterial({
                        color: 0x1e3a5f,
                        side: THREE.DoubleSide
                    });
                    const plane = new THREE.Mesh(planeGeometry, planeMaterial);
                    plane.rotation.x = -Math.PI / 2;
                    plane.name = "地面";
                    plane.userData.type = 'plane';
                    this.scene.add(plane);
                    this.addObjectToList(plane);//添加到物体列表
                },
                // 创建光源
                createLights() {
                    // 环境光
                    const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
                    this.scene.add(ambientLight);
                    // 平行光
                    const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
                    directionalLight.position.set(5, 10, 7);
                    directionalLight.castShadow = true;
                    directionalLight.shadow.mapSize.width = 2048;
                    directionalLight.shadow.mapSize.height = 2048;
                    this.scene.add(directionalLight);
                    // 点光源
                    const pointLight = new THREE.PointLight(0x4cc9f0, 0.8, 10);
                    pointLight.position.set(0, 5, 5);
                    this.scene.add(pointLight);
                },
                // 重置表单
                resetForm() {
                    this.form = {
                        type: '',
                        name: '',
                        color: '',
                        position: {
                            x: 0,
                            y: 0,
                            z: 0
                        }
                    };
                },
                // 添加物体到场景
                addObjectToScene() {
                    this.$refs.form.validate((valid) => {
                        if (valid) {
                            // 创建物体
                            let geometry, mesh;
                            const color = new THREE.Color(this.form.color);
                            switch (this.form.type) {
                                case 'cube':
                                    geometry = new THREE.BoxGeometry(2, 2, 2);
                                    break;
                                case 'sphere':
                                    geometry = new THREE.SphereGeometry(1.5, 32, 32);
                                    break;
                                case 'cylinder':
                                    geometry = new THREE.CylinderGeometry();
                                    break;
                                case 'torus':
                                    geometry = new THREE.TorusGeometry();
                                    break;
                                case 'cone':
                                    geometry = new THREE.ConeGeometry();
                                    break;
                                case 'plane':
                                    geometry = new THREE.PlaneGeometry(30, 30);
                                    break;
                                default:
                                    geometry = new THREE.BoxGeometry(2, 2, 2);
                            }
                            // 创建材质
                            const material = new THREE.MeshPhongMaterial({
                                color: color,
                                shininess: 30
                            });
                            // 创建网格
                            mesh = new THREE.Mesh(geometry, material);
                            mesh.name = this.form.name;
                            mesh.userData.type = this.form.type;
                            mesh.position.set(
                                this.form.position.x,
                                this.form.position.y,
                                this.form.position.z
                            );
                            // 添加到场景
                            this.scene.add(mesh);
                            // 添加到列表
                            this.addObjectToList(mesh);
                            // 关闭对话框
                            this.dialogVisible = false;
                            // 显示成功消息
                            this.$message({
                                message: `恭喜你，添加成功`,
                                type: 'success',
                                duration: 2000
                            });
                        }
                    });
                },
                // 添加物体到列表
                addObjectToList(mesh) {
                    const objectInfo = {
                        name: mesh.name,
                        type: mesh.userData.type,
                        position: {
                            x: mesh.position.x,
                            y: mesh.position.y,
                            z: mesh.position.z
                        },
                        mesh: mesh
                    };
                    this.objectList.push(objectInfo);
                },
                // 删除物体
                removeObject(index, row) {
                    this.$confirm('确定要删除这个物体吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        if (row.mesh) {
                            // 从场景中移除
                            this.scene.remove(row.mesh);
                            // 从列表中移除
                            this.objectList.splice(index, 1);
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                    })
                },
                // 动画循环
                animate() {
                    requestAnimationFrame(this.animate);
                    // 更新控制器
                    this.controls.update();
                    // 渲染场景
                    this.renderer.render(this.scene, this.camera);
                },
                // 窗口大小变化处理
                onWindowResize() {
                    this.camera.aspect = window.innerWidth / window.innerHeight;
                    this.camera.updateProjectionMatrix();
                    this.renderer.setSize(window.innerWidth, window.innerHeight);
                }
            }
        });
    </script>