Following the example in the previous article
, let's change the idea:
1. Bind the click event to the "Add" button, and click to add an empty row that can be entered
2. If you click "Delete", use @row-click and event to delete delete the row of data
Effects:
1. Click the "Delete" button to delete the current row of data
2. Click the "Add" button to add a new row, use push here, so add a blank row at the end
3. Enter data, enter each field When the verification is passed (the console is not recorded, it is still printed)
code:
html:
<div id="app">
<el-form class="base-form" ref="baseForm" :model="baseForm" :rules="rules" auto-complete="on">
<el-table ref="table-input" class="table" highlight-current-row :data="baseForm.demoList" @row-click="selectItem">
<el-table-column label="姓名" show-overflow-tooltip>
<template slot-scope="scope">
<el-form-item :prop="'demoList.'+scope.$index+'.name'" :rules="rules.name" class="all">
<el-input v-model="scope.row.name" placeholder="请输入" clearable @focus="$refs.baseForm.clearValidate(`demoList.${scope.$index}.name`)"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="年龄" show-overflow-tooltip>
<template slot-scope="scope">
<el-form-item :prop="'demoList.'+scope.$index+'.age'" :rules="rules.age" class="all">
<el-input v-model="scope.row.age" placeholder="请输入" clearable @focus="$refs.baseForm.clearValidate(`demoList.${scope.$index}.age`)"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="出生日期" show-overflow-tooltip>
<template slot-scope="scope">
<el-form-item :prop="'demoList.'+scope.$index+'.birthday'" :rules="rules.birthday" class="all">
<el-date-picker placeholder="请选择" v-model="scope.row.birthday" format="yyyy-MM-dd" clearable @focus="$refs.baseForm.clearValidate(`demoList.${scope.$index}.birthday`)"></el-date-picker>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="详细地址" show-overflow-tooltip>
<template slot-scope="scope">
<el-form-item :prop="'demoList.'+scope.$index+'.address'" :rules="rules.address" class="all">
<el-input v-model="scope.row.address" placeholder="请输入" clearable @focus="$refs.baseForm.clearValidate(`demoList.${scope.$index}.address`)"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="" label="操作">
<template>
<div class="flex-c-a">
<span @click="addLine()" class="add-btn">增加</span>
<span class="delete-btn">删除</span>
</div>
</template>
</el-table-column>
</el-table>
</el-form>
<div class="flex-c-a margin-top-10">
<el-button @click="submit">提交</el-button>
</div>
</div>
data：
data: {
baseForm: {
demoList: [
{
birthday: '2010-05-02',
name: '王小一',
age: 13,
address: '上海市普陀区金沙江路 1518 弄'
}, {
birthday: '2011-05-04',
name: '王小二',
age: 12,
address: '上海市普陀区金沙江路 1517 弄'
}, {
birthday: '2012-05-01',
name: '王小五',
age: 11,
address: '上海市普陀区金沙江路 1519 弄'
}, {
birthday: '2013-05-03',
age: 10,
name: '王小六',
address: '上海市普陀区金沙江路 1516 弄'
}
]
},
index: 0,
rules: {
name: [
{
required: true,
message: "请输入姓名",
trigger: "blur"
}
],
age: [
{
required: true, message: "请输入年龄", trigger: "blur" }
],
birthday: [
{
required: true, message: "请选择出生日期", trigger: "change" }
],
address: [
{
required: true, message: "请输入详细地址", trigger: "blur" }
],
}
}
method：
// 选中某一行修改或移除
selectItem(row, column, event) {
this.selectedFundRow = row
if (event.target.innerText == "删除") {
this.removeFundBtn(this.selectedFundRow)
}
},
// 删除指定行
removeFundBtn(params) {
this.baseForm.demoList = this.baseForm.demoList.filter((ele) => {
var flag = false
// 如果不一致，则保留该行
for (const key in params) {
if (ele[key] != params[key]) {
flag = true
break
}
}
return flag
})
// 如果全部删除后没有可以点击的一行了，需要加一行空行
if (!this.baseForm.demoList.length) {
this.addFund()
}
},
// 增加一个空行, 用于录入或显示第一行
addLine() {
const newLine = {
name: "",
age: "",
birthday: "",
address: ""
}
this.index++
this.baseForm.demoList.push(newLine)
},
// 提交
submit() {
this.$refs.baseForm.validate((valid) => {
if (valid) {
this.$confirm("您确定【提交】？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
console.log("校验通过")
})
}
})
}
CSS used:
.all {
width: 100%;
}
.flex-c-a {
display: flex;
align-items: center;
justify-content: space-around;
}
.margin-top-10 {
margin-top: 10px;
}
.base-form.el-form-item__content {
margin-left: 0;
}
.add-btn {
color: #4077F4;
}
.delete-btn {
color: #f56c6c;
}
Finish
In addition:
1. The "Add" button can be put forward uniformly and placed at the front of the el-form, because the effect of each add button is the same, just add a blank line, and add is independently bound to an event, So it will not affect the function
2. When the mouse hovers over the date picker, there will be something like a black dialog box. If this effect is not needed, show-overflow-tooltipremove the floating display effect of the el-form-item where the time picker is located. Just
The screenshot of the code is as follows:
Before removing the floating display effect of the date column:
After removing the page effect:
