Siguiendo el ejemplo del artículo anterior
, cambiemos la idea:
1. Vincule el evento de clic al botón "Agregar" y haga clic para agregar una fila vacía que se pueda ingresar
2. Si hace clic en "Eliminar", use @row- clic y evento para eliminar eliminar la fila de datos
Efectos:
1. Haga clic en el botón "Eliminar" para eliminar la fila actual de datos
2. Haga clic en el botón "Agregar" para agregar una nueva fila, aquí se usa empujar, por lo que la fila en blanco se agrega al final
3. Datos de entrada, ingrese cada campo Cuando se pasa la verificación (la consola no se registra, todavía se imprime)
código:
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>
datos:
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" }
],
}
}
método:
// 选中某一行修改或移除
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 utilizado:
.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;
}
Finalizar
Además:
1. El botón "Agregar" se puede presentar de manera uniforme y colocarse al frente del formulario electrónico, ya que cada botón de agregar tiene el mismo efecto, solo agregue una línea en blanco y agregar se vincula de forma independiente a un evento. Por lo tanto, no afectará la función
2. Cuando el mouse se desplace sobre el selector de fecha, aparecerá algo así como un cuadro de diálogo negro. Si este efecto no es necesario, show-overflow-tooltipelimine el efecto de visualización flotante del elemento de formulario electrónico donde se muestra la hora se encuentra el selector .
La captura de pantalla del código es la siguiente:
Antes de eliminar el efecto de visualización flotante de la columna de fecha:
Después de eliminar el efecto de página:
