【Vue基础】element组件

谁借莪１个温暖的怀抱￠ 2023-10-11 21:38 9阅读 0赞

**一、需求描述**

有按钮、表格、页码、嵌套的表格，选择页码或每页记录数时会出现监听效果，点击嵌套的表格会弹出表格内容。

**二、代码分享**

ElementView.vue文件中代码如下

![83a9b930cb9e45d1ac2a7b1db751ea74.png][]

<template>
        <div>
            
        <el-row>
            <el-button round>圆角按钮</el-button>
            <el-button type="primary" round>主要按钮</el-button>
            <el-button type="success" round>成功按钮</el-button>
        <el-button type="info" round>信息按钮</el-button>
            <el-button type="warning" round>警告按钮</el-button>
            <el-button type="danger" round>危险按钮</el-button>
        </el-row>
        <br>
    
        
        <el-table
            :data="tableData"
            stripe
            style="width: 100%">
        <el-table-column
            prop="date"
            label="日期"
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址">
        </el-table-column>
        </el-table>
        <br>
    
        
        <el-pagination background  layout="total, sizes, prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="1000">
        </el-pagination>
    
        
        <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
        <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
        <el-table :data="gridData">
            <el-table-column property="date" label="日期" width="150"></el-table-column>
            <el-table-column property="name" label="姓名" width="200"></el-table-column>
            <el-table-column property="address" label="地址"></el-table-column>
        </el-table>
        </el-dialog>
    
        
        <br>
        <el-button type="text" @click="dialogFormVisible = true">打开嵌套Form的 Dialog</el-button>
        <el-dialog title="Form表单" :visible.sync="dialogFormVisible">  
        <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称">
           <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
            <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="活动时间">
            <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
            <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
            </el-col>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button>取消</el-button>
        </el-form-item>
        </el-form>
        </el-dialog>
    
    </div>
    
    </template>
    
    <script>
    export default {
        data() {
          return {
            form: {
              name: '',
              region: '',
              date1: '',
              date2: ''
            },
            
            tableData: [{
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1517 弄'
            }, {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              date: '2016-05-03',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1516 弄'
            }],
    
            gridData: [{
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-03',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }],
    
            dialogTableVisible: false,
            dialogFormVisible: false
            
        }
        },
        methods: {
          onSubmit:function(){
            alert(JSON.stringify(this.form));
          },
          handleSizeChange:function(val) {
            console.log(`每页 ${val} 条`);
            alert("每页记录数变化"+val)
          },
          handleCurrentChange:function(val) {
            console.log(`当前页: ${val}`);
            alert("页码变化"+val)
          }
        }
    }
    </script>
    
    <style >
    
    </style>

**三、知识点整理**

onSubmit:function(){
            alert(this.form);
          },

![90f05b7900484be0aebb42ae189dc2cb.png][]

需要将对象转为字符串：

onSubmit:function(){
            alert(JSON.stringify(this.form));
          },

![1f658881c129469ba57c25b5dfc78ab0.png][]

**四、教程链接**

1、element组件教程

[https://www.bilibili.com/video/BV1m84y1w7Tb?p=44&spm\_id\_from=pageDriver&vd\_source=841fee104972680a6cac4dbdbf144b50][https_www.bilibili.com_video_BV1m84y1w7Tb_p_44_spm_id_from_pageDriver_vd_source_841fee104972680a6cac4dbdbf144b50]

[https://www.bilibili.com/video/BV1m84y1w7Tb?p=42&vd\_source=841fee104972680a6cac4dbdbf144b50][https_www.bilibili.com_video_BV1m84y1w7Tb_p_42_vd_source_841fee104972680a6cac4dbdbf144b50]

[83a9b930cb9e45d1ac2a7b1db751ea74.png]: https://img-blog.csdnimg.cn/83a9b930cb9e45d1ac2a7b1db751ea74.png
[90f05b7900484be0aebb42ae189dc2cb.png]: https://img-blog.csdnimg.cn/90f05b7900484be0aebb42ae189dc2cb.png
[1f658881c129469ba57c25b5dfc78ab0.png]: https://img-blog.csdnimg.cn/1f658881c129469ba57c25b5dfc78ab0.png
[https_www.bilibili.com_video_BV1m84y1w7Tb_p_44_spm_id_from_pageDriver_vd_source_841fee104972680a6cac4dbdbf144b50]: https://www.bilibili.com/video/BV1m84y1w7Tb?p=44&spm_id_from=pageDriver&vd_source=841fee104972680a6cac4dbdbf144b50
[https_www.bilibili.com_video_BV1m84y1w7Tb_p_42_vd_source_841fee104972680a6cac4dbdbf144b50]: https://www.bilibili.com/video/BV1m84y1w7Tb?p=42&vd_source=841fee104972680a6cac4dbdbf144b50