el-table新增一行可编辑的空行或删除一行数据
el-table新增一行可编辑的空行或删除一行数据
·
效果图:
给el-table增加、删除操作
点击新增,增加一行可编辑的空行:
点击删除,删除一行数据:
实现代码:
<el-form class="base-form" ref="basicForm" :model="basicForm" auto-complete="on">
<el-table ref="table-input" class="table" highlight-current-row
:header-cell-style="{background:'#fff',color:'#00447d',textAlign:'center'}"
:data="basicForm.productTypeList" @row-click="selectProduc">
<el-table-column label="类型名称" >
<template slot-scope="scope">
<el-form-item class="all">
<el-input v-model="scope.row.typeName" placeholder="请输入" @focus="$refs.basicForm.clearValidate(`productTypeList.${scope.$index}.typeName`)"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="销售属性" >
<template slot-scope="scope">
<el-form-item class="all">
<el-input v-model="scope.row.sellType" placeholder="请输入" @focus="$refs.basicForm.clearValidate(`productTypeList.${scope.$index}.sellType`)"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="是否公建" >
<template slot-scope="scope">
<el-form-item class="all">
<el-input v-model="scope.row.ifBuilding" placeholder="请输入" @focus="$refs.basicForm.clearValidate(`productTypeList.${scope.$index}.ifBuilding`)"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="是否车位" >
<template slot-scope="scope">
<el-form-item class="all">
<el-input v-model="scope.row.ifCarPlace" placeholder="请输入" @focus="$refs.basicForm.clearValidate(`productTypeList.${scope.$index}.ifCarPlace`)"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="占地面积(㎡)" >
<template slot-scope="scope">
<el-form-item class="all">
<el-input v-model="scope.row.placeArea" placeholder="请输入" @focus="$refs.basicForm.clearValidate(`productTypeList.${scope.$index}.placeArea`)"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="建筑面积(㎡)" >
<template slot-scope="scope">
<el-form-item class="all">
<el-input v-model="scope.row.buildingArea" placeholder="请输入" @focus="$refs.basicForm.clearValidate(`productTypeList.${scope.$index}.buildingArea`)"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="地上建筑面积(㎡)" >
<template slot-scope="scope">
<el-form-item class="all">
<el-input v-model="scope.row.onBuildingArea" placeholder="请输入" @focus="$refs.basicForm.clearValidate(`productTypeList.${scope.$index}.onBuildingArea`)"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="地下建筑面积(㎡)" >
<template slot-scope="scope">
<el-form-item class="all">
<el-input v-model="scope.row.underBuildingArea" placeholder="请输入" @focus="$refs.basicForm.clearValidate(`productTypeList.${scope.$index}.underBuildingArea`)"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="" label="操作">
<template>
<div class="flex-c-a">
<span @click="addProducLine()" class="add-btn" style="cursor:pointer">增加</span>
<span class="delete-btn" style="cursor:pointer">删除</span>
</div>
</template>
</el-table-column>
</el-table>
</el-form>
// 选中某一行修改或移除
selectItem(row, column, event) {
this.selectedFundRow = row
if (event.target.innerText == "删除") {
this.removeFundBtn(this.selectedFundRow)
}
},
// 删除指定行
removeFundBtn(params) {
this.basicForm.placeInfoList = this.basicForm.placeInfoList.filter((ele) => {
var flag = false
// 如果不一致,则保留该行
for (const key in params) {
if (ele[key] != params[key]) {
flag = true
break
}
}
return flag
})
// 如果全部删除后没有可以点击的一行了,需要加一行空行
if (!this.basicForm.placeInfoList.length) {
this.addFund()
}
},
// 增加一个空行, 用于录入或显示第一行
addLine() {
const newLine = {
name: "",
age: "",
birthday: "",
address: ""
}
this.index++
this.basicForm.placeInfoList.push(newLine)
},
<style lang="scss" scoped>
.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;
}
</style>
更多推荐
已为社区贡献4条内容
所有评论(0)