demo01_elementui模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 先导入vue.js -->
<script src="js/vue.js"></script>
<!-- 在导入在线的elementui的js和css -->
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<div class="demo-image">
<div class="block" v-for="fit in fits" :key="fit">
<span class="demonstration">{{ fit }}</span>
<el-image
style="width: 100px; height: 100px"
:src="url"
:fit="fit"></el-image>
</div>
</div>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data() {
return {
fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
}
}
})
</script>demo02_布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 先导入vue.js -->
<script src="js/vue.js"></script>
<!-- 引入本地的elementui -->
<link rel="stylesheet" href="element-ui-2.13.0/element-ui-2.13.0/lib/theme-chalk/index.css">
<script src="element-ui-2.13.0/element-ui-2.13.0/lib/index.js"></script>
<style>
.el-row {
margin-bottom: 20px;
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
.box {
border: 1px solid red;
height: 200px;
}
</style>
</head>
<body>
<div id="app">
<el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row>
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col :span="5"><div class="box"></div></el-col>
<el-col :span="10"><div class="box"></div></el-col>
<el-col :span="3"><div class="box"></div></el-col>
<el-col :span="6"><div class="box"></div></el-col>
</el-row>
</div>
</body>
</html>
<script>
new Vue({
el:"#app",
data:{
}
})
</script>demo03_分栏间隔
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 先导入vue.js -->
<script src="js/vue.js"></script>
<!-- 引入本地的elementui -->
<link rel="stylesheet" href="element-ui-2.13.0/element-ui-2.13.0/lib/theme-chalk/index.css">
<script src="element-ui-2.13.0/element-ui-2.13.0/lib/index.js"></script>
<style>
.el-row {
margin-bottom: 20px;
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
.box {
border: 1px solid red;
height: 200px;
}
</style>
</head>
<body>
<div id="app">
<el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row>
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col :span="5"><div class="box"></div></el-col>
<el-col :span="10"><div class="box"></div></el-col>
<el-col :span="3"><div class="box"></div></el-col>
<el-col :span="6"><div class="box"></div></el-col>
</el-row>
</div>
</body>
</html>
<script>
new Vue({
el:"#app",
data:{
}
})
</script>demo04_响应式布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 先导入vue.js -->
<script src="js/vue.js"></script>
<!-- 引入本地的elementui -->
<link rel="stylesheet" href="element-ui-2.13.0/element-ui-2.13.0/lib/theme-chalk/index.css">
<script src="element-ui-2.13.0/element-ui-2.13.0/lib/index.js"></script>
<style>
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
</style>
</head>
<body>
<div id="app">
<!-- :gutter="10" 设置距离 -->
<el-row :gutter="10">
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
</div>
</body>
</html>
<script>
new Vue({
el:"#app",
data:{
}
})
</script>demo05_布局容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 先导入vue.js -->
<script src="js/vue.js"></script>
<!-- 引入本地的elementui -->
<link rel="stylesheet" href="element-ui-2.13.0/element-ui-2.13.0/lib/theme-chalk/index.css">
<script src="element-ui-2.13.0/element-ui-2.13.0/lib/index.js"></script>
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 200px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
body > .el-container {
margin-bottom: 40px;
}
</style>
</head>
<body>
<div id="app">
<el-container>
<el-header style="height:200px;">
<marquee>欢迎来到elementui</marquee>
</el-header>
<el-container>
<el-aside width="400px" style="height: 400px;">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
</div>
</body>
</html>
<script>
new Vue({
el:"#app",
data:{
}
})
</script>demo06_布局容器实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 先导入vue.js -->
<script src="js/vue.js"></script>
<!-- 引入本地的elementui -->
<link rel="stylesheet" href="element-ui-2.13.0/element-ui-2.13.0/lib/theme-chalk/index.css">
<script src="element-ui-2.13.0/element-ui-2.13.0/lib/index.js"></script>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
</head>
<body>
<div id="app">
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<!-- :default-openeds默认打开 -->
<el-menu :default-openeds="['1']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>导航一</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="2-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item >查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>王小虎</span>
</el-header>
<el-main>
<!-- :data 绑定 数据 tableData -->
<el-table :data="tableData">
<!-- label 设置表头
width="240" 设置该列的宽度
prop 绑定对象的属性
-->
<el-table-column prop="date" label="生日" width="240">
</el-table-column>
<el-table-column prop="name" label="账号" width="120">
</el-table-column>
<el-table-column prop="address" label="loc">
</el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
</div>
</body>
</html>
<script>
new Vue({
el:"#app",
data() {
const item = {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
};
return {
tableData: Array(20).fill(item)
}
}
})
</script>demo07_按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 先导入vue.js -->
<script src="js/vue.js"></script>
<!-- 引入本地的elementui -->
<link rel="stylesheet" href="element-ui-2.13.0/element-ui-2.13.0/lib/theme-chalk/index.css">
<script src="element-ui-2.13.0/element-ui-2.13.0/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success" @click="fun1()">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
<template>
<el-button :plain="true" @click="open2">成功</el-button>
<el-button :plain="true" @click="open3">警告</el-button>
<el-button :plain="true" @click="open1">消息</el-button>
<el-button :plain="true" @click="open4">错误</el-button>
</template>
</div>
</body>
</html>
<script>
new Vue({
el: "#app",
data: {
},
// alt + shift + f 格式化代码
methods: {
open1() {
this.$message('这是一条消息提示');
},
open2() {
this.$message({
message: '恭喜你，这是一条成功消息',
type: 'success'
});
},
open3() {
this.$message({
message: '警告哦，这是一条警告消息',
type: 'warning'
});
},
open4() {
this.$message.error('错了哦，这是一条错误消息');
}
}
})
</script>demo07_按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 先导入vue.js -->
<script src="js/vue.js"></script>
<!-- 引入本地的elementui -->
<link rel="stylesheet" href="element-ui-2.13.0/element-ui-2.13.0/lib/theme-chalk/index.css">
<script src="element-ui-2.13.0/element-ui-2.13.0/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success" @click="fun1()">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
<template>
<el-button :plain="true" @click="open2">成功</el-button>
<el-button :plain="true" @click="open3">警告</el-button>
<el-button :plain="true" @click="open1">消息</el-button>
<el-button :plain="true" @click="open4">错误</el-button>
</template>
</div>
</body>
</html>
<script>
new Vue({
el: "#app",
data: {
},
// alt + shift + f 格式化代码
methods: {
open1() {
this.$message('这是一条消息提示');
},
open2() {
this.$message({
message: '恭喜你，这是一条成功消息',
type: 'success'
});
},
open3() {
this.$message({
message: '警告哦，这是一条警告消息',
type: 'warning'
});
},
open4() {
this.$message.error('错了哦，这是一条错误消息');
}
}
})
</script>demo08_对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 先导入vue.js -->
<script src="js/vue.js"></script>
<!-- 引入本地的elementui -->
<link rel="stylesheet" href="element-ui-2.13.0/element-ui-2.13.0/lib/theme-chalk/index.css">
<script src="element-ui-2.13.0/element-ui-2.13.0/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
<!-- title 标题
:visible.sync="dialogVisible" 控制对话框的显示和隐藏
width="60%" 设置宽度
:before-close="handleClose" 关闭之前执行的钩子函数 handleClose
-->
<el-dialog title="警告" :visible.sync="dialogVisible" width="60%" :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>
</body>
</html>
<script>
new Vue({
el: "#app",
data() {
return {
//该属性控制对话框的显示和隐藏
//true 显示
//false 隐藏
dialogVisible: true
};
},
methods: {
handleClose(done) {
//确认框
this.$confirm('确认关闭？')
.then(_ => {
console.log("确定关闭");
//让对话框隐藏
this.dialogVisible = true;
})
.catch(_ => { });
}
}
})
</script>demo09_确认框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 先导入vue.js -->
<script src="js/vue.js"></script>
<!-- 引入本地的elementui -->
<link rel="stylesheet" href="element-ui-2.13.0/element-ui-2.13.0/lib/theme-chalk/index.css">
<script src="element-ui-2.13.0/element-ui-2.13.0/lib/index.js"></script>
</head>
<body>
<div id="app">
<template>
<el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>
</div>
</body>
</html>
<script>
new Vue({
el: "#app",
data: {
},
methods: {
open() {
//确认框 点击确定走.then 点击取消走.catch
this.$confirm('此操作将永久删除该文件, 是否继续?').then(() => {
// 成功的消息提示
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
//消息提示
this.$message({
type: 'warning',
message: '已取消删除'
});
});
}
}
})
</script>demo09_确认框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 先导入vue.js -->
<script src="js/vue.js"></script>
<!-- 引入本地的elementui -->
<link rel="stylesheet" href="element-ui-2.13.0/element-ui-2.13.0/lib/theme-chalk/index.css">
<script src="element-ui-2.13.0/element-ui-2.13.0/lib/index.js"></script>
</head>
<body>
<div id="app">
<template>
<el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>
</div>
</body>
</html>
<script>
new Vue({
el: "#app",
data: {
},
methods: {
open() {
//确认框 点击确定走.then 点击取消走.catch
this.$confirm('此操作将永久删除该文件, 是否继续?').then(() => {
// 成功的消息提示
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
//消息提示
this.$message({
type: 'warning',
message: '已取消删除'
});
});
}
}
})
</script>demo10_表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 先导入vue.js -->
<script src="js/vue.js"></script>
<!-- 引入本地的elementui -->
<link rel="stylesheet" href="element-ui-2.13.0/element-ui-2.13.0/lib/theme-chalk/index.css">
<script src="element-ui-2.13.0/element-ui-2.13.0/lib/index.js"></script>
</head>
<body>
<div id="app">
<template>
<!-- :data 绑定的数据 -->
<el-table :data="userList" style="width: 60%">
<!-- label代表列的标题
width代表该列的宽度
prop 绑定的是对象的属性
-->
<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>
</template>
</div>
</body>
</html>
<script>
new Vue({
el: "#app",
data() {
return {
userList: [{
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>demo10_表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 先导入vue.js -->
<script src="js/vue.js"></script>
<!-- 引入本地的elementui -->
<link rel="stylesheet" href="element-ui-2.13.0/element-ui-2.13.0/lib/theme-chalk/index.css">
<script src="element-ui-2.13.0/element-ui-2.13.0/lib/index.js"></script>
</head>
<body>
<div id="app">
<template>
<!-- :data 绑定的数据 -->
<el-table :data="userList" style="width: 60%">
<!-- label代表列的标题
width代表该列的宽度
prop 绑定的是对象的属性
-->
<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>
</template>
</div>
</body>
</html>
<script>
new Vue({
el: "#app",
data() {
return {
userList: [{
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>demo11_表格1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 先导入vue.js -->
<script src="js/vue.js"></script>
<!-- 引入本地的elementui -->
<link rel="stylesheet" href="element-ui-2.13.0/element-ui-2.13.0/lib/theme-chalk/index.css">
<script src="element-ui-2.13.0/element-ui-2.13.0/lib/index.js"></script>
</head>
<body>
<div id="app">
<template>
<!--:data="tableData" 代表绑定的数据 -->
<el-table :data="tableData" border style="width: 100%">
<!-- prop 绑定对象的属性
label 列的标题
width 该列的宽度
-->
<el-table-column fixed prop="date" label="日期" width="100">
</el-table-column>
<el-table-column prop="name" label="姓名" width="110">
</el-table-column>
<el-table-column prop="province" label="省份" width="120">
</el-table-column>
<el-table-column prop="city" label="市区" width="120">
</el-table-column>
<el-table-column prop="address" label="地址" width="300">
</el-table-column>
<el-table-column prop="zip" label="邮编" width="120">
</el-table-column>
<el-table-column label="操作" width="200">
<!--slot-scope="scope" 作用域插槽 代表的就是 :data绑定的数据 -->
<template slot-scope="scope">
<!-- 点击查看触发点击事件 scope.row 代表当前行的数据 -->
<el-button @click="handleClick(scope.row)" type="success" size="small">查看</el-button>
<el-button type="primary" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
</template>
<!-- 对话框
dialogVisible 控制对话框的显示和隐藏 默认是隐藏 false
-->
<el-dialog title="显示" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
<!-- 文本内容 -->
<span>
<!-- 显示user中的属性地址 -->
{{ user.address }} <br>
{{ user }}
</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>
</body>
</html>
<script>
new Vue({
el: "#app",
methods: {
//点击查看触发的函数
handleClick(row) {
this.dialogVisible = true;
this.user = row;
//row代表当前行的数据
console.log(row);
}
},
data() {
return {
//准备对象
user:"",
//控制对话框显示和隐藏
dialogVisible:false,
tableData: [{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333
}, {
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333
}]
}
}
})
</script>demo12_分页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 先导入vue.js -->
<script src="js/vue.js"></script>
<!-- 引入本地的elementui -->
<link rel="stylesheet" href="element-ui-2.13.0/element-ui-2.13.0/lib/theme-chalk/index.css">
<script src="element-ui-2.13.0/element-ui-2.13.0/lib/index.js"></script>
</head>
<body>
<div id="app">
<template>
<div class="block">
<span class="demonstration">完整功能</span>
<!--
@size-change="handleSizeChange" 条数改变触发的钩子函数
@current-change="handleCurrentChange" 当前页改变触发的函数
:current-page="currentPage4" 默认显示 第几页 currentPage4 = 4 默认显示第4页
:page-sizes="[100, 200, 300, 400]" 每页显示的条数改变范围 整形数组
:page-size="100" 默认每页显示多少条数据
layout="total, sizes, prev, pager, next, jumper" 别动
:total="1000" 总条数
-->
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="currentPage4" :page-sizes="[10, 20, 30, 40]" :page-size="40"
layout="total, sizes, prev, pager, next, jumper" :total="1000">
</el-pagination>
</div>
</template>
</div>
</body>
</html>
<script>
new Vue({
el: "#app",
methods: {
//条数改变触发的函数 val 代表改变之后的条数
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
//当前页改变触发的函数 val 代表改变的当前页
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
},
data() {
return {
currentPage4: 1
};
}
})
</script>demo13_分页查询
239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
