Java阶段三Day05
ElementUI
Element，一套为开发者、设计师和产品经理准备的桌面端组件库
官方文档
- 基于Vue2.x的Element UI文档：Element - 网站快速成型工具
- 基于Vue3.x的Element UI文档：一个 Vue 3 UI 框架 | Element Plus
组件
开发指南
-
npm安装
推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
npm i element-ui -S -
CDN
-
目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。文章来源：https://www.toymoban.com/news/detail-459954.html
<!-- 引入样式 --> <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>
-
-
Hello world文章来源地址https://www.toymoban.com/news/detail-459954.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <div id="app"> <el-button @click="visible = true">Button</el-button> <el-dialog :visible.sync="visible" title="Hello world"> <p>Try Element</p> </el-dialog> </div> </body> <!-- import Vue before Element --> <script src="https://unpkg.com/vue@2/dist/vue.js"></script> <!-- import JavaScript --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> new Vue({ el: '#app', data: function() { return { visible: false } } }) </script> </html>
布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
<style>
.c1{
border: 1px solid red;
border-radius: 5px;
height: 50px;
}
</style>
</head>
<body>
<div id="app">
<!--总共24分栏, 通过span设置当前列占多少分栏-->
<el-row>
<el-col span="12"><div class="c1">111</div></el-col>
<el-col span="12"><div class="c1">2222</div></el-col>
</el-row>
<el-row>
<el-col span="6"><div class="c1"></div></el-col>
<el-col span="6"><div class="c1"></div></el-col>
<el-col span="6"><div class="c1"></div></el-col>
<el-col span="6"><div class="c1"></div></el-col>
</el-row>
<el-row>
<el-col span="4"><div class="c1"></div></el-col>
<el-col span="4"><div class="c1"></div></el-col>
<el-col span="4"><div class="c1"></div></el-col>
<el-col span="4"><div class="c1"></div></el-col>
<el-col span="4"><div class="c1"></div></el-col>
<el-col span="4"><div class="c1"></div></el-col>
</el-row>
<!--带有居中效果的2:1两部分-->
<div style="width: 1200px;margin: 0 auto">
<el-row gutter="20">
<el-col span="16"><div class="c1"></div></el-col>
<el-col span="8"><div class="c1"></div></el-col>
</el-row>
</div>
<!--练习1: 1:3:1:1 居中,间距为10个像素-->
<div style="width: 1200px;margin: 0 auto">
<el-row gutter="10">
<el-col span="4"><div class="c1"></div></el-col>
<el-col span="12"><div class="c1"></div></el-col>
<el-col span="4"><div class="c1"></div></el-col>
<el-col span="4"><div class="c1"></div></el-col>
</el-row>
</div>
<!--练习2: 1:2:3 居中 间距20-->
<div style="width: 1200px;margin: 0 auto">
<el-row gutter="20">
<el-col span="4"><div class="c1"></div></el-col>
<el-col span="8"><div class="c1"></div></el-col>
<el-col span="12"><div class="c1"></div></el-col>
</el-row>
</div>
<!--练习3: 8等分 居中 间距5 用v-for -->
<div style="width: 1200px;margin: 0 auto">
<el-row gutter="5">
<el-col span="3" v-for="item in 8"><div class="c1">{{item}}</div></el-col>
</el-row>
</div>
<h3>列偏移</h3>
<el-row>
<el-col offset="4" span="20"><div class="c1"></div></el-col>
</el-row>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
let v = new Vue({
el: '#app',
data: function () {
return {
}
},
methods: {
}
})
</script>
</html>
布局容器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
<style>
.el-header{background-color: red;}
.el-footer{background-color: green}
.el-main{height: 300px;background-color: blue;}
</style>
</head>
<body>
<div id="app">
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
<h1>先上下,再左右</h1>
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
<el-row gutter="10">
<el-col span="8" v-for="item in 3">
<el-card><h1>张三</h1></el-card>
</el-col>
</el-row>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
let v = new Vue({
el: '#app',
data: function () {
return {
}
},
methods: {
}
})
</script>
</html>
按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-row>
<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>
<el-row>
<el-button plain>朴素按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" plain>信息按钮</el-button>
<el-button type="warning" plain>警告按钮</el-button>
<el-button type="danger" plain>危险按钮</el-button>
</el-row>
<el-row>
<el-button round>圆角按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
<el-button type="danger" round>危险按钮</el-button>
</el-row>
<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-edit" circle></el-button>
<el-button type="success" icon="el-icon-check" circle></el-button>
<el-button type="info" icon="el-icon-message" circle></el-button>
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
<h3>自己的按钮</h3>
<el-button type="success">成功</el-button>
<el-button type="danger" plain>危险</el-button>
<el-button type="warning" round>警告</el-button>
<el-button type="success" circle icon="el-icon-delete"></el-button>
<h3>不同尺寸按钮</h3>
<el-button type="success">成功</el-button>
<el-button type="success" size="medium">成功</el-button>
<el-button type="success" size="small">成功</el-button>
<el-button type="success" size="mini">成功</el-button>
<h3>字体图标</h3>
<i class="el-icon-edit">编辑</i>
<i class="el-icon-share" style="font-size: 40px"></i>
<i class="el-icon-delete" style="color: red"></i>
<i class="el-icon-chicken"></i>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
let v = new Vue({
el: '#app',
data: function () {
return {
}
},
methods: {
}
})
</script>
</html>
分割线
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
<template>
<div>
<span>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span>
<el-divider></el-divider>
<hr>
<span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>
</div>
</template>
<template>
<div>
<span>头上一片晴天，心中一个想念</span>
<el-divider content-position="left">少年包青天</el-divider>
<span>饿了别叫妈, 叫饿了么</span>
<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
<span>为了无法计算的价值</span>
<el-divider content-position="right">阿里云</el-divider>
</div>
</template>
<template>
<div>
<span>雨纷纷</span>
<el-divider direction="vertical"></el-divider>
<span>旧故里</span>
<el-divider direction="vertical"></el-divider>
<span>草木深</span>
</div>
</template>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
let v = new Vue({
el: '#app',
data: function () {
return {
}
},
methods: {
}
})
</script>
</html>
消息提示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
<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>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
let v = new Vue({
el: '#app',
data: function () {
return {
}
},
methods: {
open1() {
this.$message('这是一条消息提示');
},
open2() {
v.$message.success("成功消息");
},
open3() {
v.$message.warning("警告");
},
open4() {
this.$message.error('错了哦，这是一条错误消息');
}
}
})
</script>
</html>
下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
<style>
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
</head>
<body>
<div id="app">
<h1>{{info}}</h1>
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="黄金糕">黄金糕</el-dropdown-item>
<el-dropdown-item command="狮子头">狮子头</el-dropdown-item>
<el-dropdown-item command="螺蛳粉">螺蛳粉</el-dropdown-item>
<el-dropdown-item disabled>双皮奶</el-dropdown-item>
<el-dropdown-item command="蚵仔煎" divided>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
let v = new Vue({
el: '#app',
data: function () {
return {
info:""
}
},
methods: {
handleCommand(command) {
v.info = command;
this.$message('click on item ' + command);
}
}
})
</script>
</html>
选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
<h3>{{value}}</h3>
<template>
<el-select v-model="value" placeholder="请选择">
<!--label设置显示的内容 value设置选中后得到的值-->
<el-option
v-for="item in options"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<hr>
<h3>您选择的商品价值:{{price}}</h3>
<el-select v-model="price" placeholder="请选择">
<!--label设置显示的内容 value设置选中后得到的值-->
<el-option
v-for="p in arr"
:label="p.title"
:value="p.price">
</el-option>
</el-select>
</template>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
let v = new Vue({
el: '#app',
data: function () {
return {
price:"",
arr:[{title:"麦克风",price:100},
{title:"鼠标",price:30},
{title:"键盘",price:50},
{title:"显示器",price:800}],
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: ''
}
},
methods: {
}
})
</script>
</html>
表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
<template>
<el-table
:data="tableData"
style="width: 100%">
<!--prop=properties 设置这一列显示的数据来自于数组中对象的哪个属性-->
<el-table-column
prop="date"
label="日期"
width="100">
</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>
<hr>
<el-table :data="arr" style="width: 100%">
<!--添加编号列-->
<el-table-column type="index" label="编号"></el-table-column>
<!--prop=properties 设置这一列显示的数据来自于数组中对象的哪个属性-->
<el-table-column prop="name" label="姓名" width="100">
</el-table-column>
<el-table-column prop="salary" label="工资" width="180">
</el-table-column>
<el-table-column prop="job" label="工作">
</el-table-column>
<!--添加自定义列开始-->
<el-table-column label="操作">
<!--scope对象里面装的是当前行所对应的一些信息
scope.$index得到当前行的下标
scope.row得到的是当前行对应的数组里面的对象
-->
<template slot-scope="scope">
<el-button size="mini" type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
<!--添加自定义列结束-->
</el-table>
</template>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
let v = new Vue({
el: '#app',
data: function () {
return {
arr:[{name:"张三",salary:3000,job:"人事"},
{name:"李四",salary:4000,job:"销售"},
{name:"王五",salary:5000,job:"程序员"}],
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 弄'
}]
}
},
methods: {
handleDelete(i,emp){
v.arr.splice(i,1);//从数组中删除数据
v.$message.success("成功删除了"+emp.name);
}
}
})
</script>
</html>
走马灯
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
<style>
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 150px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>
</head>
<body>
<div id="app">
<template>
<div class="block">
<span class="demonstration">默认 Hover 指示器触发</span>
<el-carousel height="150px">
<el-carousel-item v-for="item in 4">
<h3 class="small">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
<div class="block">
<span class="demonstration">Click 指示器触发</span>
<el-carousel trigger="click" height="150px">
<el-carousel-item v-for="item in 4" :key="item">
<h3 class="small">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
</template>
<h3>自己的走马灯</h3>
<div style="width: 400px">
<el-carousel height="150px">
<el-carousel-item>
<img src="b1.jpg" height="100%" width="100%">
</el-carousel-item>
<el-carousel-item>
<img src="b2.jpg" height="100%" width="100%">
</el-carousel-item>
<el-carousel-item>
<img src="b3.jpg" height="100%" width="100%">
</el-carousel-item>
</el-carousel>
<h3>数组走马灯</h3>
<div style="width: 400px">
<el-carousel height="150px">
<el-carousel-item v-for="url in arr">
<img :src="url" width="100%" height="100%">
</el-carousel-item>
</el-carousel>
</div>
</div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
let v = new Vue({
el: '#app',
data: function () {
return {
arr:["b1.jpg","b2.jpg","b3.jpg","b4.jpg"]
}
},
methods: {
}
})
</script>
</html>
导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
<!--default-active设置默认选中的位置
mode="horizontal"用来设置横向显示,去掉mode默认为纵向显示-->
<el-menu :default-active="activeIndex"
class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">处理中心</el-menu-item>
<!--submenu子菜单-->
<el-submenu index="2">
<!--设置子菜单标题-->
<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 index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<!--disabled让当前的菜单项失效-->
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
<div class="line"></div>
<el-menu
:default-active="activeIndex2"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<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 index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
<h3>自己的导航菜单</h3>
<el-menu mode="horizontal">
<el-menu-item v-for="(item,i) in arr" :index="i+1">{{item}}</el-menu-item>
</el-menu>
<h4>侧边导航菜单</h4>
<div style="width: 300px;background-color: #666">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose">
<el-submenu index="1">
<template slot="title">我的工作台</template>
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</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">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
let v = new Vue({
el: '#app',
data: function () {
return {
activeIndex: '3',
activeIndex2: '1',
arr:["首页","直播课","线上课","脱产班","关于我们"]
}
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
},
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
})
</script>
</html>
综合员工列表练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
<input type="text" placeholder="姓名" v-model="emp.name">
<input type="text" placeholder="工资" v-model="emp.salary">
<input type="text" placeholder="工作" v-model="emp.job">
<input type="button" value="添加" @click="add()">
<h3>员工列表</h3>
<el-table :data="arr">
<el-table-column type="index" label="编号"></el-table-column>
<el-table-column prop="name" label="名字"></el-table-column>
<el-table-column prop="salary" label="工资"></el-table-column>
<el-table-column prop="job" label="工作"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" type="danger"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
let v = new Vue({
el: '#app',
data: function () {
return {
emp: {name: "", salary: "", job: ""},
arr: [{name: "张三", salary: 3000, job: "人事"},
{name: "李四", salary: 4000, job: "销售"},
{name: "王五", salary: 5000, job: "程序员"}]
}
},
methods: {
add() {
v.arr.push({name: v.emp.name, salary: v.emp.salary, job: v.emp.job});
},
handleDelete(i, emp) {
v.arr.splice(i, 1);
v.$message.success("成功删除了" + emp.name);
}
}
})
</script>
</html>
到了这里，关于Java阶段三Day05的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
