快捷導(dǎo)航

vue使用el-table 添加行手動(dòng)填寫(xiě)數(shù)據(jù)和刪除行及提交保存功能

更新時(shí)間：2023年12月21日 14:16:19 作者：MXin5

遇到這樣的需求點(diǎn)擊新增按鈕實(shí)現(xiàn)下列彈窗的效果,點(diǎn)擊添加行新增一行,點(diǎn)擊刪除進(jìn)行刪除行,點(diǎn)擊提交將數(shù)據(jù)傳遞到后端進(jìn)行保存,怎么實(shí)現(xiàn)的呢,下面通過(guò)實(shí)例代碼給大家詳細(xì)講解,感興趣的朋友一起看看吧

需求：點(diǎn)擊新增按鈕實(shí)現(xiàn)下列彈窗的效果，點(diǎn)擊添加行新增一行，點(diǎn)擊刪除進(jìn)行刪除行，點(diǎn)擊提交將數(shù)據(jù)傳遞到后端進(jìn)行保存。

代碼

      <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="序號(hào)" 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="資產(chǎn)編號(hào)" 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">序號(hào)</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="字段類(lèi)型" 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="字段長(zhǎng)度" 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{
          //錄入數(shù)據(jù)字典資產(chǎn)信息
          dataId: 1,
          //數(shù)據(jù)字典資產(chǎn)信息的集合
          tableData: [],
          //數(shù)據(jù)字典資產(chǎn)信息錄入
          openDataDictionary: false,
          //數(shù)據(jù)字典資產(chǎn)信息錄入彈出框標(biāo)題
          titleDataDictionary: "",
        }
      }

methods

methods: {
    /** 刪除按鈕操作 */
    handleDeleteDataDictionary(index, rows) {
      alert("index" + index);//這個(gè)index就是當(dāng)前行的索引坐標(biāo)
      this.$modal.confirm('是否刪除當(dāng)前行？').then(function () {
        rows.splice(index, 1); //對(duì)tableData中的數(shù)據(jù)刪除一行
      }).then(() => {
        this.$modal.msgSuccess("刪除成功");
      }).catch(() => {
      });
    },
    //   添加行
    addDemo() {
      var d = {
        index: this.dataId++,
        assetNo: "", //資產(chǎn)編號(hào)實(shí)時(shí)回顯
        riskSourceName: "",
        riskLevel: "",
        riskPointName: "",
        type: "",
        hiddenDanger: "",
        dangerLevel: "",
        accident: "",
        remark: ""
      };
      this.tableData.push(d);
      setTimeout(() => {
        this.$refs.demoTable.setCurrentRow(d);
      }, 10);
    },
    /**
     * 數(shù)據(jù)字典資產(chǎn)信息錄入點(diǎn)擊提交執(zhí)行的方法
     * */
    handleDataDictionaryAssetInfo() {
      addDataDictionaryAssetInfo(this.tableData).then(response => {
        this.$modal.msgSuccess("新增成功");
        this.open = false;
      });
    },

到此這篇關(guān)于vue采用el-table 添加行手動(dòng)填寫(xiě)數(shù)據(jù)和刪除行及提交的文章就介紹到這了,更多相關(guān)vue el-table 添加行刪除行內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: