需求:点击新增按钮实现下列弹窗的效果,点击添加行新增一行,点击删除进行删除行,点击提交将数据传递到后端进行保存。
目录
代码
data
methods文章来源:https://www.toymoban.com/news/detail-742069.html
实现效果文章来源地址https://www.toymoban.com/news/detail-742069.html
代码
<el-dialog :title="titleDataDictionary" :visible.sync="openDataDictionary" width="1300px" append-to-body>
<el-button type="primary" class="add-btn" @click="addDemo">添加行</el-button>
<el-table
:data="tableData"
size="mini"
stripe
highlight-current-row
border
style="width: 97.3%"
class="el-tb-edit"
:header-cell-style="{
background: '#2a87ed',
color: '#fff',
fontSize: ' 1.2rem',
fontWeight: 'normal',
height: '2.88rem',
}"
ref="demoTable"
>
<el-table-column prop="index" label="序号" width="120">
<template slot-scope="scope">
<el-input v-model="scope.row.index"></el-input>
<!-- <span>{{ scope.row.index }}</span> 显示在输入框的下面-->
</template>
</el-table-column>
<el-table-column prop="assetNo" label="资产编号" width="120">
<template slot-scope="scope">
<el-input v-model="scope.row.assetNo"></el-input>
</template>
</el-table-column>
<!-- <el-table-column type="index" width="50">序号</el-table-column> -->
<el-table-column prop="riskSourceName" label="表中文名" width="120">
<template slot-scope="scope">
<el-input v-model="scope.row.riskSourceName"></el-input>
</template>
</el-table-column>
<el-table-column prop="riskPointName" label="表英文名" width="120">
<template slot-scope="scope">
<el-input v-model="scope.row.riskPointName"></el-input>
<!-- <span>{{ scope.row.riskPointName }}</span>-->
</template>
</el-table-column>
<el-table-column prop="riskLevel" label="字段中文名" width="120">
<template slot-scope="scope">
<el-input v-model="scope.row.riskLevel"></el-input>
<!-- <span>{{ scope.row.riskLevel }}</span>-->
</template>
</el-table-column>
<el-table-column prop="hiddenDanger" label="字段类型" width="120">
<template slot-scope="scope">
<el-input v-model="scope.row.hiddenDanger"></el-input>
<!-- <span>{{ scope.row.hiddenDanger }}</span>-->
</template>
</el-table-column>
<el-table-column prop="type" label="字段长度" width="120">
<template slot-scope="scope">
<el-input v-model="scope.row.type"></el-input>
<!-- <span>{{ scope.row.type }}</span>-->
</template>
</el-table-column>
<el-table-column prop="accident" label="取值范围" width="120">
<template slot-scope="scope">
<el-input v-model="scope.row.accident"></el-input>
<!-- <span>{{ scope.row.accident }}</span>-->
</template>
</el-table-column>
<el-table-column prop="remark" label="备注" width="120">
<template slot-scope="scope">
<el-input v-model="scope.row.remark"></el-input>
<!-- <span>{{ scope.row.remark }}</span>-->
</template>
</el-table-column>
<el-table-column prop="accident" label="操作" width="120">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDeleteDataDictionary(scope.$index,tableData)"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-button type="primary" class="add-btn" @click="handleDataDictionaryAssetInfo">提交</el-button>
</el-dialog>
data
data(){
return{
//录入数据字典资产信息
dataId: 1,
//数据字典资产信息的集合
tableData: [],
//数据字典资产信息录入
openDataDictionary: false,
//数据字典资产信息录入弹出框标题
titleDataDictionary: "",
}
}
methods
methods: {
/** 删除按钮操作 */
handleDeleteDataDictionary(index, rows) {
alert("index" + index);//这个index就是当前行的索引坐标
this.$modal.confirm('是否删除当前行?').then(function () {
rows.splice(index, 1); //对tableData中的数据删除一行
}).then(() => {
this.$modal.msgSuccess("删除成功");
}).catch(() => {
});
},
// 添加行
addDemo() {
var d = {
index: this.dataId++,
assetNo: "", //资产编号实时回显
riskSourceName: "",
riskLevel: "",
riskPointName: "",
type: "",
hiddenDanger: "",
dangerLevel: "",
accident: "",
remark: ""
};
this.tableData.push(d);
setTimeout(() => {
this.$refs.demoTable.setCurrentRow(d);
}, 10);
},
/**
* 数据字典资产信息录入点击提交执行的方法
* */
handleDataDictionaryAssetInfo() {
addDataDictionaryAssetInfo(this.tableData).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
});
},
到了这里,关于【前端】vue采用el-table 添加行手动填写数据和删除行及提交的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!