vue+element-ui实现demo

63 阅读 0 评论 42 点赞

我是靠谱客的博主默默草莓，最近开发中收集的这篇文章主要介绍vue+element-ui实现demo，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、什么是element-ui

element-ui是由饿了么前端团队推出的一套为开发者、设计师和产品经理准备的基于Vue.js 2.0的桌面组件库，而手机端有对应框架是 Mint UI 。整个ui风格简约，很实用，同时也极大的提高了开发者的效率，是一个非常受欢迎的组件库。
在这里插入图片描述

2、使用前的准备

1、安装webpack         　 命令：cnpm install webpack -g

2、安装vue/vue-cli 		命令cnpm install vue vue-cli -g

3、初始化vue		　命令vue init webpack + 项目名称


4、安装项目依赖      命令npm install

4、在项目目录文件夹下运行 cnpm run dev ，如果没有问题，就可以进行安装ElementUI

上述步骤都完成之后便可开始安装并使用element-ui了

3、安装element-ui

1.cd:进入创建好的项目名称
2.运行安装命令：npm i element-ui -S
（注意 i 是install的简写如运作报错可尝试使用npm install element-ui -S）
3.导入相关依赖

// 导入组件库
import ElementUI from "element-ui"
// 导入样式
import "element-ui/lib/theme-chalk/index.css"
// 注册为全局组件
Vue.use(ElementUI)

4、使用 element-ui 提供的组件

上述步骤完成后可直接去element-ui官网复制想要使用的组件代码

5、实现demo

1.在src.components文件夹下创建Pop.vue文件
在element-ui官网中找到弹出组件的代码复制粘贴：

<template>
  <div>
      <!-- 
        常用弹出组件：
            el-dialog
            el-popover
        sync修饰符在作用,sync:其实是一种语法塘：
            示例：ElementUI中的el-dialog
            第一种写法：<el-dialog：visible.sync="dialogVisible"
                这种写法是:关闭或是点击空白处无需特别处理，el-dialog组件内部会修改当前值状态，通过.sync修饰符传递给父组件；

            第二种写法：<el-dialog:visible="dialogVisible" :before-close="beforeClose"
                这种写法需要再beforeClose方法内手动处理：this.dialogVisible = false
          
      两种：第一种绑定属性。v-bind:title="doc.title" 
        第二种：它监听了一个跟新事件：v-on:update:title="doc.title=Sevent"
        我们知道propo当中的数据一般都是单向绑定的，也就是说父组件传给子组件的数据，父组件可以随便更改，子组件不能更改父组件当中的数据
      -->
    <h1>this is Pop</h1>
    <el-button type="text" @click="dialogVisible = true"
      >点击打开 Dialog</el-button>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
    data() {
      return {
        dialogVisible: false
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
};
</script>

<style scoped>
</style>

2.在src.components文件夹下创建Table.vue文件

<!--
element常用组件之表组件介绍：
基础表格
基础表格常用属性介绍
属性名                  作用
height          给表格设置高度，同时固定表头
show-header     设置是否显示表头
row-class-name  设置一个函数或者固定的名字作为行的类名
border          是否显示表格竖直方向的边框，设置后可通过改变边框设置列宽
-->
<template>
  <div>
    <h2>this is Table</h2>
    <!-- 基本表格 -->
    <!-- <el-table :data="tableData" style="width: 100%" height="200px" border>
      <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="地址"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table> -->
    <el-table :data="tableData">
        <el-table-column v-for="(val,key) in tableLabel" :key="key" :prop="key" :lable="val" width=300% ></el-table-column>
        <el-table-column label="操作" v-if="isShowOperate">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    
  </div>
</template>

<script>
export default {
    props:{
        isShowOperate:{
            type:Boolean,
            default:true
        }
    },
  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 弄",
        }],
        tableLabel:{
            date:"日期",
            name:"姓名",
            address:"地址"
        }
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
      this.$emit('edit','row')
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
  },
};
</script>

<style scoped>
</style>