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>