html代码
<div class="addLine" id="app">
<div>
<template>
<el-table :data="tableData" border stripe style="width: 500px">
<el-table-column fixed prop="" label="操作" width="80%">
<template slot-scope="scope">
<div class="addLine-change-icon">
<div class="addLine-change-icon-left">
<a href="javascript:;" onclick="showPop('#editPop')"
@click="editData(scope.row,scope.$index)">
<i class="layui-icon show-icon"></i></a>
</div>
<div class="addLine-change-icon-left">
<a href="javascript:;" @click="open(scope.$index,tableData)">
<i class=" layui-icon show-icon"></i>
</a>
</div>
</div>
</template>
</el-table-column>
<el-table-column prop="userInfo_1" label="题目1" width="200%"></el-table-column>
<el-table-column prop="userInfo_2" label="题目2" width="200%"></el-table-column>
<el-table-column prop="userInfo_2" label="题目3" width="200%"></el-table-column>
</el-table>
</template>
<button type="button" class="layui-btn addLine-btn" onclick="showPop('#searchPop')"><i
class="layui-icon"></i>添加</button>
<div><input type="text" class="layui-input" class="layui-input" v-model="listJson"></div>
<template>
<el-table :data="arr2" border stripe style="width: 500px">
<el-table-column fixed prop="" label="操作" width="80%">
<template slot-scope="scope">
<div class="addLine-change-icon">
<div class="addLine-change-icon-left">
<a href="javascript:;" onclick="showPop('#editPop2')"
@click="editData(scope.row,scope.$index)">
<i class="layui-icon show-icon"></i></a>
</div>
<div class="addLine-change-icon-left">
<a href="javascript:;" @click="open(scope.$index,arr2)">
<i class=" layui-icon show-icon"></i>
</a>
</div>
</div>
</template>
</el-table-column>
<el-table-column prop="userInfo_1" label="题目1" width="200%"></el-table-column>
<el-table-column prop="userInfo_2" label="题目2" width="200%"></el-table-column>
<el-table-column prop="userInfo_2" label="题目3" width="200%"></el-table-column>
</el-table>
</template>
<button type="button" class="layui-btn addLine-btn" onclick="showPop('#searchPop2')"><i
class="layui-icon"></i>添加</button>
<div><input type="text" class="layui-input" class="layui-input" v-model="listJson2"></div>
</div>
<!--添加弹框-->
<div class="add-box " id="searchPop" style="display: none;">
<div class="add-con">
<div class="page-body">
<div lay-filter="breadcrumb" class="layui-breadcrumb content-breadcrumb"
style="visibility: visible;"><a><cite>添加一行</cite></a></div>
<div class="addUp-close"><a href="javascript:void(0)" class="addUp-close-btn"
onclick="hidePop('#searchPop')"><i aria-hidden="true" class="fa fa-times"></i></a></div>
</div>
<form class="add-form">
<div class="addUp-item">
<div class="addUp-item-title">题目1</div>
<div><input type="text" class="layui-input" v-model="userInfo_1"></div>
</div>
<div class="addUp-item">
<div class="addUp-item-title">题目2</div>
<div><input type="text" class="layui-input" v-model="userInfo_2"></div>
</div>
<div class="addUp-item">
<div class="addUp-item-title">题目3</div>
<div><input type="text" class="layui-input" v-model="userInfo_3"></div>
</div>
</form>
<div class="addUp-bottom-btn">
<button type="button" class="layui-btn" onclick="hidePop('#searchPop')" @click="addData">确定</button>
<button type="button" class="layui-btn layui-btn-primary"
onclick="hidePop('#searchPop')">取消</button>
</div>
</div>
</div>
<div class="add-box " id="searchPop2" style="display: none;">
<div class="add-con">
<div class="page-body">
<div lay-filter="breadcrumb" class="layui-breadcrumb content-breadcrumb"
style="visibility: visible;"><a><cite>添加一行</cite></a></div>
<div class="addUp-close"><a href="javascript:void(0)" class="addUp-close-btn"
onclick="hidePop('#searchPop')"><i aria-hidden="true" class="fa fa-times"></i></a></div>
</div>
<form class="add-form">
<div class="addUp-item">
<div class="addUp-item-title">题目1</div>
<div><input type="text" class="layui-input" v-model="userInfo_1"></div>
</div>
<div class="addUp-item">
<div class="addUp-item-title">题目2</div>
<div><input type="text" class="layui-input" v-model="userInfo_2"></div>
</div>
<div class="addUp-item">
<div class="addUp-item-title">题目3</div>
<div><input type="text" class="layui-input" v-model="userInfo_3"></div>
</div>
</form>
<div class="addUp-bottom-btn">
<button type="button" class="layui-btn" onclick="hidePop('#searchPop2')"
@click="addData2">确定</button>
<button type="button" class="layui-btn layui-btn-primary"
onclick="hidePop('#searchPop2')">取消</button>
</div>
</div>
</div>
<!--编辑弹框-->
<div class="add-box " id="editPop" style="display: none;">
<div class="add-con">
<div class="page-body">
<div lay-filter="breadcrumb" class="layui-breadcrumb content-breadcrumb"
style="visibility: visible;"><a><cite>编辑信息</cite></a></div>
<div class="addUp-close"><a href="javascript:void(0)" class="addUp-close-btn"
onclick="hidePop('#editPop')"><i aria-hidden="true" class="fa fa-times"></i></a></div>
</div>
<form class="add-form">
<div class="addUp-item">
<div class="addUp-item-title">题目1</div>
<div><input type="text" class="layui-input" v-model="editForm.userInfo_1"></div>
</div>
<div class="addUp-item">
<div class="addUp-item-title">题目2</div>
<div><input type="text" class="layui-input" v-model="editForm.userInfo_2"></div>
</div>
<div class="addUp-item">
<div class="addUp-item-title">题目3</div>
<div><input type="text" class="layui-input" v-model="editForm.userInfo_3"></div>
</div>
</form>
<div class="addUp-bottom-btn">
<button type="button" class="layui-btn" onclick="hidePop('#editPop')" @click="confirm">确定</button>
<button type="button" class="layui-btn layui-btn-primary" onclick="hidePop('#editPop')">取消</button>
</div>
</div>
</div>
<div class="add-box " id="editPop2" style="display: none;">
<div class="add-con">
<div class="page-body">
<div lay-filter="breadcrumb" class="layui-breadcrumb content-breadcrumb"
style="visibility: visible;"><a><cite>编辑信息</cite></a></div>
<div class="addUp-close"><a href="javascript:void(0)" class="addUp-close-btn"
onclick="hidePop('#editPop2')"><i aria-hidden="true" class="fa fa-times"></i></a></div>
</div>
<form class="add-form">
<div class="addUp-item">
<div class="addUp-item-title">题目1</div>
<div><input type="text" class="layui-input" v-model="editForm.userInfo_1"></div>
</div>
<div class="addUp-item">
<div class="addUp-item-title">题目2</div>
<div><input type="text" class="layui-input" v-model="editForm.userInfo_2"></div>
</div>
<div class="addUp-item">
<div class="addUp-item-title">题目3</div>
<div><input type="text" class="layui-input" v-model="editForm.userInfo_3"></div>
</div>
</form>
<div class="addUp-bottom-btn">
<button type="button" class="layui-btn" onclick="hidePop('#editPop2')" @click="confirm2">确定</button>
<button type="button" class="layui-btn layui-btn-primary" onclick="hidePop('#editPop2')">取消</button>
</div>
</div>
</div>
</div>
js代码
function showPop(id) {
$(id).addClass('show');
}
function hidePop(id) {
$(id).removeClass('show');
}
var vm = new Vue({
el: '#app',
data() {
return {
tableData: [{
'userInfo_1': '11',
'userInfo_2': '11',
'userInfo_3': '11',
},
{
'userInfo_1': '11',
'userInfo_2': '11',
'userInfo_3': '11',
},
],
arr2: [{
'userInfo_1': '11',
'userInfo_2': '11',
'userInfo_3': '11',
}, ],
userInfo_1: '',
userInfo_2: '',
userInfo_3: '',
editForm: {
'userInfo_1': '11',
'userInfo_2': '11',
'userInfo_3': '11',
},
editIndex: '',
listJson: '',
listJson2: '',
}
},
methods: {
open(index, rows) {
this.$confirm('确认删除？', '确认信息', {
distinguishCancelAndClose: true,
showClose: false,
confirmButtonText: '确定',
cancelButtonText: '取消'
})
.then(() => {
rows.splice(index, 1);
})
.catch(action => {
});
},
addData: function () {
var str = {
userInfo_1: this.userInfo_1,
userInfo_2: this.userInfo_2,
userInfo_3: this.userInfo_3
};
this.tableData.push(str);
this.userInfo_1 = '';
this.userInfo_2 = '',
this.userInfo_3 = ''
this.listJson = JSON.stringify(this.tableData);
},
addData2: function () {
var str = {
userInfo_1: this.userInfo_1,
userInfo_2: this.userInfo_2,
userInfo_3: this.userInfo_3
};
this.arr2.push(str);
this.userInfo_1 = '';
this.userInfo_2 = '',
this.userInfo_3 = ''
this.listJson2 = JSON.stringify(this.arr2);
},
//编辑
editData: function (item, index) {
this.editIndex = index;
this.editForm = {
userInfo_1: item.userInfo_1,
userInfo_2: item.userInfo_2,
userInfo_3: item.userInfo_3
};
},
//编辑提交
confirm() {
Vue.set(this.tableData, this.editIndex, this.editForm);
JSON.stringify(this.tableData);
},
confirm2() {
Vue.set(this.arr2, this.editIndex, this.editForm);
JSON.stringify(this.arr2);
},
}
});
项目心得：vue的this指向，表格头部固定，elementUI的部件使用
