效果图
点击添加:列表增加一行,
点击删除:列表行若勾选上则删除勾选的行
代码:
html:
<div style="display: flex; width: 400px; margin-bottom: 10px">
<el-button
type="primary"
icon="el-icon-plus"
@click="addSupplier"
style="width: 150px; border-radius: 4px; height: 40px"
>添加</el-button
>
<el-button
plain
icon="el-icon-delete"
@click="deleteSupplier"
style="width: 100px; border-radius: 4px; height: 40px"
>删除</el-button
>
</div>
<div
style="
display: flex;
flex-direction: column;
width: 100%;
margin-left: 32px;
"
>
<el-table
ref="multipleTable"
:data="form.dynamicItem"
tooltip-effect="dark"
:row-class-name="tableRowClassName"
border
:header-cell-style="{
background: '#F2F3F5',
padding: '5px 0',
color: '#333',
fontSize: '14px',
height: '50px',
}"
:cell-style="{
padding: '5px 0',
fontSize: '14px',
}"
style="margin-left:80px ;"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column type="index" width="50" label="序号">
</el-table-column>
<el-table-column prop="purchasePrice" label="收款人姓名" width="200">
<template slot-scope="scope">
<el-input
v-model="form.dynamicItem[scope.$index].bankAcc"
placeholder="请输入收款人姓名"
type="text"
/>
</template>
</el-table-column>
<el-table-column prop="purchasePrice" label="收款人账号" width="200">
<template slot-scope="scope">
<el-input
v-model="form.dynamicItem[scope.$index].bankNo"
placeholder="请输入收款人账号"
type="text"
/>
</template>
</el-table-column>
<el-table-column prop="name" label="银行" width="200">
<template slot-scope="scope">
<el-select
placeholder="请选择"
v-model="form.dynamicItem[scope.$index].bankName"
filterable
style="width: 100%"
clearable
>
<el-option
v-for="item in Banks"
:key="item.value"
:label="item.label"
:value="item.label"
>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="purchasePrice" label="银行支行" width="200">
<template slot-scope="scope">
<el-input
v-model="form.dynamicItem[scope.$index].bankBranch"
placeholder="请输入银行支行"
type="text"
/>
</template>
</el-table-column>
</el-table>
</div>
data:
dynamicItem: [
{
bankAcc: "",
bankNo: "",
bankName: "中国农业银行",
bankBranch: "",
},
],
methods:
//获取勾选上的行rowIndex下标
tableRowClassName({ row, rowIndex }) {
row.row_index = rowIndex;
},
//增加行功能
addSupplier() {
if (this.form.dynamicItem.length >= 10) {
this.$message({
type: "warning",
message: "最多可新增10条!",
});
} else {
this.form.dynamicItem.push({
bankName: "中国农业银行",
bankAcc: "",
bankNo: "",
bankBranch: "",
});
}
},
//删除选中行功能
deleteSupplier() {
var d = this.form.dynamicItem;
if (d.length <= 1) {
return this.$message.error("最后一条不允许删除");
}
this.$refs.multipleTable.selection.forEach((Ele, index) => {
for (var i = 0; i < d.length; i++) {
var t = d[i].row_index;
if (t == Ele.row_index) {
d.splice(i, 1);
}
}
});
},