赞
踩
需求:点击新增按钮实现下列弹窗的效果,点击添加行新增一行,点击删除进行删除行,点击提交将数据传递到后端进行保存。
目录
实现效果
- <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(){
- return{
- //录入数据字典资产信息
- dataId: 1,
- //数据字典资产信息的集合
- tableData: [],
- //数据字典资产信息录入
- openDataDictionary: false,
- //数据字典资产信息录入弹出框标题
- titleDataDictionary: "",
- }
- }
- 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;
- });
- },

Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。