Vue组件库 (一)：Element常用组件

最新推荐文章于 2024-03-17 09:30:00 发布

大块奶酪----

最新推荐文章于 2024-03-17 09:30:00 发布

阅读量604

点赞数

分类专栏：前端开发文章标签： vue.js 前端 javascript 前端框架

本文链接：https://blog.csdn.net/m0_61598337/article/details/132311846

版权

前端开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Element基于Vue2.0的桌面端组件库

组件：组成网页的部件。例如超链接、图片、按钮等。

一、环境配置

1、下载element

在vscode工程终端下下载。一定要注意：是在工程下安装！

npm install element -ui@2.15.3

出现以下问题：

经判断可能为npm版本(9.6.7)太高原因，使用如下命令即可解决

npm install --legacy-peer-deps element-ui --save

在 node_modules文件下会增加element-ui文件，此时安装成功

2、引入ElementUI组件库

在入口文件中引用 main.js中

import Element form 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3、访问官网、复制组件代码，调整

在main.js入口文件引用完成后，在views文件夹下创建文件element用来存放element组件，其中App.vue为根组件。在element文件夹下新建ElementView.vue文件。

在前端服务开启后，默认的展示根组件的内容即App.vue。

在App.vue根组件下引用ElementView.vue文件如下操作：

直接下App.vue根组件下输入<element-view></element-view>，vscode将自动导入elementview.vue的组件

以下组件的测试均在ElementView.vue中进行

二、Table组件

直接复制element官网上代码即可

<template>
  <div>
    <!-- button按钮 -->
    <el-row>
      <el-button el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>

    <br><br>
    <!-- table表格 -->
    <!-- shift alt f整理代码 -->
    <!-- prop要展示的数据 -->
    <el-table :data="tableData" border 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>
  </div>
</template>


<script>
export default {
  data() {
    return {
      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 弄",
        },
      ],
    };
  },
};
</script>

<style>
</style>

三、分页组件

Pagination分页：当数据量过多时，使用分页分解数据。

<!-- pagination分页组件 -->
    <el-pagination background layout="prev, pager, next" :total="1000">
    </el-pagination>

layout组件布局，子组件名用逗号分隔
background 是否为分页按钮添加背景色

layout可选值：'prev, pager, next, jumper, sizes, total'

在标签中添加该两个事件：

size-change事件函数名为handleSizeChange

current-change事件函数名为handleCurrentChange

  <el-pagination background layout="sizes, prev, pager, next,jumper,total" 
     @size-change="handleSizeChange"
     @current-change="handleCurrentChange"
    :total="1000">   
   
    </el-pagination>

在vue中添加事件：

两个函数之间要用“,”隔开，参数为val，即修改后的值

 methods: {
    handleSizeChange:function(val){
        alert("每页记录数变化"+val);
    },

    handleCurrentChange:function(val){
        alert("页码数变化"+val);

    }   
  }

改变每页记录10--->20

改变页码数

四、对话框组件

保留当前页面信息，弹出一个对话框。

<!-- Dialog对话框 -->
    <!-- Table -->
    <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>

js部分

<script>
export default {
  data() {
    return {
      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,
            },
        };
},
};
</script>

在html中：:data="gridData"定义了数据的来源，即来自于vue对象的数据模型，名称为gridData。

visible.sync="dialogTableVisible"，visible.sync该属性用来控制是否对表格展示，其属性值为

dialogTableVisible，当dialogTableVisible = true时显示，否则隐藏。

在vue对象中dialogTableVisible的值默认为隐藏(false)，当被点击后，值变为true。即如下代码：；

 <el-button type="text" @click="dialogTableVisible = true"
      >打开嵌套表格的 Dialog</el-button
    >

五、表单组件

Form表单：由输入框、选择器、单选框、多选框等控件组成，用于收集、校验、提交数据。

使用对话框形式弹出form表单

1、创建form表单的对话框

默认不显示form表单，只有在点击后才会显示

  <!-- Dialog对话框 展示表单 -->
    <el-button type="text" @click="dialogFormVisible = true"
      >打开Form的 Dialog</el-button>

    <el-dialog title="Form表单" :visible.sync="dialogFormVisible"></el-dialog>

2、创建form表单

 <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-form-item创建表单项目，并且属性使用v-model绑定数据--->vue->data->form

3、创建form表单的数据模型，并添加onSumbit方法

<script>
export default {
  data() {
    return {
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
           },
          };
        },
   methods: {
   onSubmit:function(){
        alert(JSON.stringify(this.form));
   }
 },
} ;
</script>

当提交表单后，显示输入的内容，注意：此时不能直接打印this.form因为它只是个对象，需将其转换为字符串再输出，即使用JSON.stringify方法。