当前位置:   article > 正文

【前端】vue采用el-table 添加行手动填写数据和删除行及提交_前端点击按钮增加一行表格

前端点击按钮增加一行表格

        需求:点击新增按钮实现下列弹窗的效果,点击添加行新增一行,点击删除进行删除行,点击提交将数据传递到后端进行保存。

目录

代码

data

methods


实现效果

代码

  1. <el-dialog :title="titleDataDictionary" :visible.sync="openDataDictionary" width="1300px" append-to-body>
  2. <el-button type="primary" class="add-btn" @click="addDemo">添加行</el-button>
  3. <el-table
  4. :data="tableData"
  5. size="mini"
  6. stripe
  7. highlight-current-row
  8. border
  9. style="width: 97.3%"
  10. class="el-tb-edit"
  11. :header-cell-style="{
  12. background: '#2a87ed',
  13. color: '#fff',
  14. fontSize: ' 1.2rem',
  15. fontWeight: 'normal',
  16. height: '2.88rem',
  17. }"
  18. ref="demoTable"
  19. >
  20. <el-table-column prop="index" label="序号" width="120">
  21. <template slot-scope="scope">
  22. <el-input v-model="scope.row.index"></el-input>
  23. <!-- <span>{{ scope.row.index }}</span> 显示在输入框的下面-->
  24. </template>
  25. </el-table-column>
  26. <el-table-column prop="assetNo" label="资产编号" width="120">
  27. <template slot-scope="scope">
  28. <el-input v-model="scope.row.assetNo"></el-input>
  29. </template>
  30. </el-table-column>
  31. <!-- <el-table-column type="index" width="50">序号</el-table-column> -->
  32. <el-table-column prop="riskSourceName" label="表中文名" width="120">
  33. <template slot-scope="scope">
  34. <el-input v-model="scope.row.riskSourceName"></el-input>
  35. </template>
  36. </el-table-column>
  37. <el-table-column prop="riskPointName" label="表英文名" width="120">
  38. <template slot-scope="scope">
  39. <el-input v-model="scope.row.riskPointName"></el-input>
  40. <!-- <span>{{ scope.row.riskPointName }}</span>-->
  41. </template>
  42. </el-table-column>
  43. <el-table-column prop="riskLevel" label="字段中文名" width="120">
  44. <template slot-scope="scope">
  45. <el-input v-model="scope.row.riskLevel"></el-input>
  46. <!-- <span>{{ scope.row.riskLevel }}</span>-->
  47. </template>
  48. </el-table-column>
  49. <el-table-column prop="hiddenDanger" label="字段类型" width="120">
  50. <template slot-scope="scope">
  51. <el-input v-model="scope.row.hiddenDanger"></el-input>
  52. <!-- <span>{{ scope.row.hiddenDanger }}</span>-->
  53. </template>
  54. </el-table-column>
  55. <el-table-column prop="type" label="字段长度" width="120">
  56. <template slot-scope="scope">
  57. <el-input v-model="scope.row.type"></el-input>
  58. <!-- <span>{{ scope.row.type }}</span>-->
  59. </template>
  60. </el-table-column>
  61. <el-table-column prop="accident" label="取值范围" width="120">
  62. <template slot-scope="scope">
  63. <el-input v-model="scope.row.accident"></el-input>
  64. <!-- <span>{{ scope.row.accident }}</span>-->
  65. </template>
  66. </el-table-column>
  67. <el-table-column prop="remark" label="备注" width="120">
  68. <template slot-scope="scope">
  69. <el-input v-model="scope.row.remark"></el-input>
  70. <!-- <span>{{ scope.row.remark }}</span>-->
  71. </template>
  72. </el-table-column>
  73. <el-table-column prop="accident" label="操作" width="120">
  74. <template slot-scope="scope">
  75. <el-button
  76. size="mini"
  77. type="text"
  78. icon="el-icon-delete"
  79. @click="handleDeleteDataDictionary(scope.$index,tableData)"
  80. >删除
  81. </el-button>
  82. </template>
  83. </el-table-column>
  84. </el-table>
  85. <el-button type="primary" class="add-btn" @click="handleDataDictionaryAssetInfo">提交</el-button>
  86. </el-dialog>

data

  1. data(){
  2. return{
  3. //录入数据字典资产信息
  4. dataId: 1,
  5. //数据字典资产信息的集合
  6. tableData: [],
  7. //数据字典资产信息录入
  8. openDataDictionary: false,
  9. //数据字典资产信息录入弹出框标题
  10. titleDataDictionary: "",
  11. }
  12. }

methods

  1. methods: {
  2. /** 删除按钮操作 */
  3. handleDeleteDataDictionary(index, rows) {
  4. alert("index" + index);//这个index就是当前行的索引坐标
  5. this.$modal.confirm('是否删除当前行?').then(function () {
  6. rows.splice(index, 1); //对tableData中的数据删除一行
  7. }).then(() => {
  8. this.$modal.msgSuccess("删除成功");
  9. }).catch(() => {
  10. });
  11. },
  12. // 添加行
  13. addDemo() {
  14. var d = {
  15. index: this.dataId++,
  16. assetNo: "", //资产编号实时回显
  17. riskSourceName: "",
  18. riskLevel: "",
  19. riskPointName: "",
  20. type: "",
  21. hiddenDanger: "",
  22. dangerLevel: "",
  23. accident: "",
  24. remark: ""
  25. };
  26. this.tableData.push(d);
  27. setTimeout(() => {
  28. this.$refs.demoTable.setCurrentRow(d);
  29. }, 10);
  30. },
  31. /**
  32. * 数据字典资产信息录入点击提交执行的方法
  33. * */
  34. handleDataDictionaryAssetInfo() {
  35. addDataDictionaryAssetInfo(this.tableData).then(response => {
  36. this.$modal.msgSuccess("新增成功");
  37. this.open = false;
  38. });
  39. },

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小蓝xlanll/article/detail/486179
推荐阅读
相关标签
  

闽ICP备14008679号