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

    <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就是当前行的索引坐标

最后

推荐一些系统学习的途径和方法。

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

HTML 和 CSS：