动态添加删除可编辑表格

最新推荐文章于 2024-08-26 10:27:22 发布

一只前端小菜鸡.

最新推荐文章于 2024-08-26 10:27:22 发布

阅读量213

点赞数

文章标签： html5 css3 vue.js html Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_49826079/article/details/129046497

版权

这篇文章展示了如何在Vue.js应用中使用el-table组件来创建一个表格，允许用户删除当前行信息和新增参数行进行编辑。表格的每一列都包含可编辑的输入框，通过v-model进行数据绑定。删除行的功能通过splice方法实现，而新增行则通过向tableData数组添加新对象完成。

摘要由CSDN通过智能技术生成

根据需求点击删除按钮，删除当前行所有信息，点击新增参数，多加一行可以在里面进行编辑

代码片段：

  <div class="elTable">
              <el-table
                :data="tableData"
                style="width: 100%"
              >
                <el-table-column prop="param_name" label="参数名" align="center">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.param_name" placeholder="请输入参数名" />
                  </template>
                </el-table-column>
                <el-table-column prop="variable_name" label="参数对应变量名" align="center">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.variable_name" placeholder="请输入变量名" />
                  </template>
                </el-table-column>

                <el-table-column prop="param_description" label="参数说明" align="center">
                  <!-- <i class="el-icon-warning" title="i 参数字段说明：参数说明建议输入该参数的使用说明，默认或推荐值，以及可用取值范围，较难理解的参数推荐适当举例" /> -->
                  <span slot="label">
                    <span class="span-box">
                      <!-- <i class="el-icon-warning" title="i 参数字段说明：参数说明建议输入该参数的使用说明，默认或推荐值，以及可用取值范围，较难理解的参数推荐适当举例" /> -->
                      <span>参数说明 : </span>
                    </span>
                  </span>
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.param_description" placeholder="请输入参数说明" />
                  </template>
                </el-table-column>
                <el-table-column prop="variable_value" label="参数默认值" align="center">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.variable_value" placeholder="请输入参数默认值" />
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="60px">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      size="small"
                      @click.native.prevent="deleteRow(scope.$index, tableData)"
                    >
                      <i class="el-icon-delete" />
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-button class="addline" size="small" @click="addLine"><i class="el-icon-plus el-icon--lift" />新增参数</el-button>
            </div>

js代码片段：

   tableData: [{
        param_name: '',
        param_description: '',
        variable_name: '',
        variable_value: ''
      }],

删除行：

  deleteRow(index, rows) { // 移除一行
      rows.splice(index, 1)// 删掉该行
    },

添加行：

   addLineParams() {
      var newValue = {
        estimators: '',
        max_samples: '',
        max_feature: '',
        contamination: '',
        n_jobs: ''
      }
      // 添加新的行数
      this.tableDataParams.push(newValue)
    },