前の記事の例に従って、
考え方を変更しましょう
。1.クリックイベントを[追加]ボタンにバインドし、クリックして入力可能な空の行を追加します
。2. [削除]をクリックする場合は、@row-を使用します。削除するにはクリックしてイベントをクリックし、データの行を削除します
効果：
1。[削除]ボタンをクリックして現在のデータ行を削除します
2. [追加]ボタンをクリックして新しい行を追加します。ここではプッシュが使用されるため、最後に空白行が追加され
ます3.データを入力します。各フィールドに入力検証に合格すると（コンソールは記録されませんが、印刷されます）
コード：
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: {
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" }
],
}
}
方法：
// 选中某一行修改或移除
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：
.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;
}
終了
さらに：
1。「追加」ボタンは均一に前に出してel-formの前面に配置できます。これは、各追加ボタンの効果が同じで、空白行を追加するだけで、追加は独立してイベントにバインドされるためです。したがって、機能には影響しません
。2.マウスを日付ピッカーの上に置くと、黒いダイアログボックスのようなものが表示されます。この効果が不要な場合は、el-form-itemのフローティング表示効果をshow-overflow-tooltip削除してください。ピッカーがあります。
コードのスクリーンショットは次のとおりです。
日付列のフローティング表示効果を削除する前に：
ページ効果を削除した後：
