element动态增加表格的列

hbw0226

已于 2023-06-27 15:08:31 修改

阅读量1.6k

点赞数 11

分类专栏： vue 文章标签： html java javascript

于 2023-04-06 10:54:39 首次发布

本文链接：https://blog.csdn.net/hbw0226/article/details/129984417

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这篇文章展示了如何在Vue.js应用中使用ElementUI库创建一个表格，通过点击‘添加’按钮动态增加行，并在每一行中添加删除功能。数据绑定到inputForm.databaseInfoList，包含起始和结束IP地址字段。当点击‘删除’按钮时，对应行的数据将从列表中移除。

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

1.添加按钮用来控制行的增加

      <el-button
        type="primary"
        size="mini"
        style= "margin-bottom: 10px"
        @click="addDataBase"
        >添加</el-button
      >

2.与之对应的方法

    addDataBase() {
      this.inputForm.databaseInfoList.push({
       startip:'',
       endip:''
      });
    },
    delDataBase(scope) {
        this.inputForm.databaseInfoList.splice(scope.$index, 1);
    },

3.对应的数据源

    data () {
      return {
       inputForm: {
        databaseInfoList:[{
            startip:'',
            endip:''
          }], 
          }      
      }
    }

4.对应的表格

     <el-table
        :data="inputForm.databaseInfoList"
        v-loading="loading"
        :class="method === 'view' ? 'readonly' : ''"
        :disabled="method != 'add'"
        style="margin: 0 auto; width: 100%"
        :highlight-current-row="true"
      >
        <el-table-column  
          prop=""
          label=""
          width="110"
          align="center"
          type="index"
          :index="indexMethod"
        >
        </el-table-column>
        <el-table-column prop="startip" label="起始IP地址" width="400" align="center">
          <!-- <el-form-item :prop="'inputForm.databaseInfoList'+scope.$index+'.ipInfo'" :rules="rules.ipInfo"> -->
          <template slot-scope="scope" >
            <el-input
              v-model="scope.row.startip"
              placeholder="请填写起始IP地址"
              clearable
            ></el-input>
          </template>
          <!-- </el-form-item> -->
        </el-table-column>
        <el-table-column prop="endip" label="结束IP地址" width="400" align="center" >
          <template slot-scope="scope">
            <div style="display: flex" >
            <el-input            
              v-model="scope.row.endip"
              placeholder="请填写结束IP地址"
              clearable
            ></el-input>
              <el-button
                type="text"
                @click="delDataBase(scope)"
                style="margin-left: 10px"
                >删除</el-button
              >            
            </div>
          </template>
        </el-table-column>        
      </el-table>