1、结果图
当没有数据时：
2、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<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">
<el-table
:data="tableData"
style="width: 100%"
@row-dblclick="handleRowDbClick"
@selection-change="handleCulumnSelectionChange"
@row-click="handleRowClick">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="date"
label="日期"
width="180"
isEdit="true"
isRequired="true">
<template slot-scope="{row, $index}" >
<el-input v-model="row.date" v-if="editFlag == row.id" >
</el-input>
<span v-else>{{row.date}}</span>
</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180"
isEdit="true"
isRequired="true">
<template slot-scope="{row, $index}" >
<el-input v-model="row.name"
v-if="editFlag == row.id"
:class="{'pass-rule-input':true,'pass-rule-empty-input':!row.name.trim()}">
</el-input>
<span v-else>{{row.name}}</span>
</template>
</el-table-column>
<el-table-column
prop="address"
label="地址"
isEdit="false"
isRequired="false">
<template slot-scope="{row, $index}" >
<el-input v-model="row.address" v-if="editFlag == row.id" >
</el-input>
<span v-else>{{row.address}}</span>
</template>
</el-table-column>
<el-table-column label="操作" min-width="100" align="center">
<template slot-scope="{row, $index}">
<template v-if="editFlag == row.id" >
<i class="icon el-icon-circle-check success" title="保存" @click="addItem(row)"></i>
<i class="icon el-icon-circle-close warning" title="取消" @click="cancel"></i>
</template>
<template v-else="editFlag != row.id">
<i class="icon el-icon-circle-plus-outline primary" title="新增" @click="handleAdd"></i>
<i class="icon el-icon-delete danger" title="删除" @click="handleDel(row)"></i>
</template>
</template>
</el-table-column>
<!-- !当没有数据时，显示新增按钮 -->
<template slot="empty">
没有数据 <a class="copyBtn" href="javascript:void(0);" @click="handleAdd">新增</a>
</template>
</el-table>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
tableData: [
{
id: 1,
date: '2016-05-02',
name: '王小虎1',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2016-05-04',
name: '王小虎2',
address: '上海市普陀区金沙江路 1517 弄'
}, {
id: 3,
date: '2016-05-01',
name: '王小虎3',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 4,
date: '2016-05-03',
name: '王小虎5',
address: '上海市普陀区金沙江路 1516 弄'
}],
editFlag:""
},
methods:{
handleAdd:function () {
//判断是否有未保存数据，有不可新增，没有可新增
let noSaveItem = this.tableData.some(x=>x.noSave === true)
if( noSaveItem){
alert("有未保存数据，请先保存")
return false;
}
const idVal= Date.now().valueOf()
//flag=new表示是新增加的信息项，还没有保存到库表中
this.tableData.push({id:idVal,name:'',address:'',noSave:true})
this.editFlag = idVal
},
/** 信息项表格双击行事件*/
handleRowDbClick(row, column, event){
this.editFlag = row.id
},
/**复选框选择事件*/
handleCulumnSelectionChange(val){
this.multipleSelection = val;
},
/**目录项行单击事件*/
handleRowClick(row, column, event){
//当点击其他行的时候，编辑输入域消失
// if(row["id"] != this.editFlag){
// this.editFlag = ''
// }
},
addItem(row){
if(!row.name.trim()){
alert("name不能为空")
return false;
}
//假数据情况下：
row.noSave = false
this.editFlag = ''
//实际情况：调用保存接口，数据保存进数据库
// this.editFlag = '' //接口调用成功后
},
cancel(){
//去掉未实际保存进数据库的数据
this.tableData = this.tableData.filter(x=>!x.noSave)
},
handleDel(row){
//假数据情况下
this.tableData = this.tableData.filter(x=>x.id != row.id)
//真实情况，调用删除接口
}
}
})
</script>
</body>
<style>
.copyBtn{
margin: 0 5px;
color: dodgerblue;
text-decoration: none;
padding-bottom: 1px;
border-bottom: 1px solid;
}
.success{
color: #67c23a;
}
.warning{
color: #e6a23c;
}
.primary{
color: #409eff;
}
.danger{
color: #f56c6c;
}
.icon{
margin: 0 3px;
font-size: 18px;
}
.icon:hover{
cursor: pointer;
}
.pass-rule-input:after{
content: "*";
color: #f56c6c;
margin-left: 2px;
}
.pass-rule-input input:first-child{
width: 93%;
}
.pass-rule-empty-input input:first-child{
border-color: #f56c6c;
}
</style>
</html>
