【Vue基础】element组件

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

一、需求描述

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

二、代码分享

ElementView.vue文件中代码如下

83a9b930cb9e45d1ac2a7b1db751ea74.png

  1. <template>
  2.     <div>
  3.         <!--按钮-->
  4.     <el-row>
  5.         <el-button round>圆角按钮</el-button>
  6.         <el-button type="primary" round>主要按钮</el-button>
  7.         <el-button type="success" round>成功按钮</el-button>
  8.     <el-button type="info" round>信息按钮</el-button>
  9.         <el-button type="warning" round>警告按钮</el-button>
  10.         <el-button type="danger" round>危险按钮</el-button>
  11.     </el-row>
  12.     <br>
  14.     <!--表格-->
  15.     <el-table
  16.         :data="tableData"
  17.         stripe
  18.         style="width: 100%">
  19.     <el-table-column
  20.         prop="date"
  21.         label="日期"
  22.         width="180">
  23.     </el-table-column>
  24.     <el-table-column
  25.         prop="name"
  26.         label="姓名"
  27.         width="180">
  28.     </el-table-column>
  29.     <el-table-column
  30.         prop="address"
  31.         label="地址">
  32.     </el-table-column>
  33.     </el-table>
  34.     <br>
  36.     <!--页码-->
  37.     <el-pagination background  layout="total, sizes, prev, pager, next"
  38.         @size-change="handleSizeChange"
  39.         @current-change="handleCurrentChange"
  40.         :total="1000">
  41.     </el-pagination>
  43.     <!--嵌套表格-->
  44.     <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
  45.     <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
  46.     <el-table :data="gridData">
  47.         <el-table-column property="date" label="日期" width="150"></el-table-column>
  48.         <el-table-column property="name" label="姓名" width="200"></el-table-column>
  49.         <el-table-column property="address" label="地址"></el-table-column>
  50.     </el-table>
  51.     </el-dialog>
  53.     <!--嵌套表单-->
  54.     <br>
  55.     <el-button type="text" @click="dialogFormVisible = true">打开嵌套Form的 Dialog</el-button>
  56.     <el-dialog title="Form表单" :visible.sync="dialogFormVisible">  
  57.     <el-form ref="form" :model="form" label-width="80px">
  58.     <el-form-item label="活动名称">
  59.        <el-input v-model="form.name"></el-input>
  60.     </el-form-item>
  61.     <el-form-item label="活动区域">
  62.         <el-select v-model="form.region" placeholder="请选择活动区域">
  63.         <el-option label="区域一" value="shanghai"></el-option>
  64.         <el-option label="区域二" value="beijing"></el-option>
  65.         </el-select>
  66.     </el-form-item>
  67.     <el-form-item label="活动时间">
  68.         <el-col :span="11">
  69.         <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
  70.         </el-col>
  71.         <el-col class="line" :span="2">-</el-col>
  72.         <el-col :span="11">
  73.         <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
  74.         </el-col>
  75.     </el-form-item>
  76.     <el-form-item>
  77.         <el-button type="primary" @click="onSubmit">提交</el-button>
  78.         <el-button>取消</el-button>
  79.     </el-form-item>
  80.     </el-form>
  81.     </el-dialog>
  83. </div>
  85. </template>
  87. <script>
  88. export default {
  89.     data() {
  90.       return {
  91.         form: {
  92.           name: '',
  93.           region: '',
  94.           date1: '',
  95.           date2: ''
  96.         },
  98.         tableData: [{
  99.           date: '2016-05-02',
  100.           name: '王小虎',
  101.           address: '上海市普陀区金沙江路 1518 弄'
  102.         }, {
  103.           date: '2016-05-04',
  104.           name: '王小虎',
  105.           address: '上海市普陀区金沙江路 1517 弄'
  106.         }, {
  107.           date: '2016-05-01',
  108.           name: '王小虎',
  109.           address: '上海市普陀区金沙江路 1519 弄'
  110.         }, {
  111.           date: '2016-05-03',
  112.           name: '王小虎',
  113.           address: '上海市普陀区金沙江路 1516 弄'
  114.         }],
  116.         gridData: [{
  117.           date: '2016-05-02',
  118.           name: '王小虎',
  119.           address: '上海市普陀区金沙江路 1518 弄'
  120.         }, {
  121.           date: '2016-05-04',
  122.           name: '王小虎',
  123.           address: '上海市普陀区金沙江路 1518 弄'
  124.         }, {
  125.           date: '2016-05-01',
  126.           name: '王小虎',
  127.           address: '上海市普陀区金沙江路 1518 弄'
  128.         }, {
  129.           date: '2016-05-03',
  130.           name: '王小虎',
  131.           address: '上海市普陀区金沙江路 1518 弄'
  132.         }],
  134.         dialogTableVisible: false,
  135.         dialogFormVisible: false
  137.     }
  138.     },
  139.     methods: {
  140.       onSubmit:function(){
  141.         alert(JSON.stringify(this.form));
  142.       },
  143.       handleSizeChange:function(val) {
  144.         console.log(`每页 ${val} 条`);
  145.         alert("每页记录数变化"+val)
  146.       },
  147.       handleCurrentChange:function(val) {
  148.         console.log(`当前页: ${val}`);
  149.         alert("页码变化"+val)
  150.       }
  151.     }
  152. }
  153. </script>
  155. <style >
  157. </style>

三、知识点整理

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

90f05b7900484be0aebb42ae189dc2cb.png

需要将对象转为字符串：

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

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=42&vd_source=841fee104972680a6cac4dbdbf144b50

发表评论

表情：
评论列表 （有 0 条评论，146人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue 组件基础

    组件是vue中堪称最为强大的功能之一，这个概念的核心目标就是为了可重用性高，减少重复性的开发。我们可以把组件代码按照template、style、script的拆分方式，放置在

    小鱼儿小鱼儿/ 0 赞/ 383 阅读

    相关 Vue组件基础

    组件基础 基本示例 组件的复用 组件的组织 通过prop向子组件传递数据 单个根元素 监听子组件事件 使用事件抛出一个值

    悠悠悠悠/ 0 赞/ 504 阅读

    相关 Vue组件基础

            本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：[《Vue官方文档》][Vue]。相关学习笔

    我就是我我就是我/ 0 赞/ 579 阅读