快捷導(dǎo)航

vue3+element Plus實現(xiàn)在table中增加一條表單數(shù)據(jù)的示例代碼

更新時間：2024年01月19日 11:07:13 作者：清茶煮酒xin

這篇文章主要介紹了vue3+element Plus實現(xiàn)在table中增加一條表單數(shù)據(jù)的操作,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧

1. 先上效果圖

在這里插入圖片描述

2. 代碼實現(xiàn)

<el-table v-loading="loading" :data="tableData" row-key="id">
      <el-table-column property="id" label="序號"></el-table-column>
      <el-table-column property="name" label="姓名">
        <template #default="scope">
          <el-input v-if="!scope.row.id" v-model="scope.row.name"></el-input>
          <span v-else>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column property="number" label="年齡">
        <template #default="scope">
          <el-input v-if="!scope.row.id" v-model="scope.row.number"></el-input>
          <span v-else>{{ scope.row.number }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="200">
        <template #default="scope">
          <el-button type="primary" size="small" v-if="!scope.row.id"  @click.stop="handleSave(scope.row)">保存</el-button>
          <el-button type="danger" size="small" v-if="scope.row.id" @click.stop="handleDelete(scope.row.id)">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom-btn">
      <el-button type="success" @click="addLineData()">添加一行</el-button>
    </div>

ts 實現(xiàn)

/**添加一行數(shù)據(jù) */
function addLineData() {
  const newData = {
    name: '',
    number: '',
  };
  tableData.value.push(newData);
}
/** */
function handleDelete() {
  ElMessageBox.confirm("確認(rèn)刪除該條數(shù)據(jù)?", "警告", {
    confirmButtonText: "確定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    //調(diào)用自己的接口啦！
    // 當(dāng)然啦，如果全都是自己增加的未提交的數(shù)據(jù)，可以使用splice 方法來處理哦！
  });
}

當(dāng)前情況呢是適用于單條數(shù)據(jù)新增，并且直接操作數(shù)據(jù)庫的

到此這篇關(guān)于vue3+element Plus實現(xiàn)在table中增加一條表單數(shù)據(jù)的文章就介紹到這了,更多相關(guān)vue3 element Plus增加表單數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: