1、表格內部顯示和編輯切換

成都創(chuàng)新互聯公司專注于企業(yè)成都營銷網站建設、網站重做改版、托克遜網站定制設計、自適應品牌網站建設、H5高端網站建設、商城網站定制開發(fā)、集團公司官網建設、成都外貿網站建設、高端網站制作、響應式網頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為托克遜等各大城市提供網站開發(fā)制作服務。

這種方式就是利用兩個標簽顯示隱藏來實現，我們這里用input和span，正常用span將數據顯示，點擊編輯時，將span隱藏，顯示input進行編輯。選中當前行我們可以通過slot-scope中的index去實現，在控制顯示隱藏的屬性上綁定index就可以選中當前行了，如showEdit[index]。

頁面結構代碼：

<el-table
 :data="tableData"
 tooltip-effect="dark"
 
 header-align="center">
 <el-table-column width="50" header-align="center">
  <template slot-scope="{row,$index}">
   <span>{{$index + 1}}</span>
  </template>
 </el-table-column>
 <el-table-column label="名稱" prop="Name" width="300" header-align="center">
  <template slot-scope="{row,$index}">
   <input class="edit-cell" v-if="showEdit[$index]" v-model="row.Name">
   <span v-if="!showEdit[$index]">{{row.Name}}</span>
  </template>
 </el-table-column>
 <el-table-column
  fixed="right"
  label="操作"
  width="100"
  header-align="center">
  <template slot-scope="{row,$index}">
   <el-button type="text" size="small"  @click.native="handleUpdate($index, row)"  v-if="showBtn[$index]">更新</el-button>
   <el-button type="text" size="small"  @click.native="handleCancel($index, row)"  v-if="showBtn[$index]">取消</el-button>

   <el-button type="text" size="small"  @click.native="handleEdit($index, row)"  v-if="!showBtn[$index]">編輯</el-button>
   <el-button type="text" size="small"  @click.native="handleDelete($index, row)"  v-if="!showBtn[$index]">刪除</el-button>
  </template>
 </el-table-column>
</el-table>

另外有需要云服務器可以了解下創(chuàng)新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

新聞標題：vue+element-ui實現表格編輯的三種實現方式-創(chuàng)新互聯
文章網址：http://www.aaarwkj.com/article42/ccdcec.html

成都網站建設公司_創(chuàng)新互聯，為您提供標簽優(yōu)化、定制開發(fā)、用戶體驗、App設計、營銷型網站建設、品牌網站設計

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯