vue+element實現(xiàn)表格新增、編輯、刪除功能-創(chuàng)新互聯(lián)

需要做一個需求：新增一個xml文件時，添加數(shù)量不確定、屬性相同的xml標簽，想了想可以用表格做啊，屬性相同，使用統(tǒng)一的表頭，下面的屬性值只是進行增刪改不就行了，就類似于mysql給表里填數(shù)據(jù)一樣。

成都創(chuàng)新互聯(lián)公司長期為上1000家客戶提供的網站建設服務，團隊從業(yè)經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網生態(tài)環(huán)境。為文昌企業(yè)提供專業(yè)的成都網站設計、成都做網站，文昌網站改版等技術服務。擁有10余年豐富建站經驗和眾多成功案例,為您定制開發(fā)。

可是目前似乎還沒有表格的直接增刪改一行的操作，那要怎么實現(xiàn)呢？于是，通過上網以及自己的思考，終于實現(xiàn)了，代碼、思路以及效果圖如下：

1 html部分：

<el-button type="success" @click="addRow(tableData)">新增</el-button>
<template>
 <el-table
 :data="tableData"
 
 max-height="250"
 @cell-dblclick="tableDbEdit">
 <el-table-column
 prop="name"
 label="name"
 width="150">
 </el-table-column>
 <el-table-column
 prop="xpath"
 label="xpath"
 width="120">
 </el-table-column>
 <el-table-column
 prop="desc"
 label="desc"
 width="120">
 </el-table-column>
 <el-table-column
 prop="value"
 label="value"
 width="120">
 </el-table-column>
 <el-table-column
 prop="defVal"
 label="defVal"
 width="300">
 </el-table-column>
 <el-table-column
 fixed="right"
 label="操作"
 width="120">
 <template slot-scope="scope">
 <el-button
 @click.native.prevent="deleteRow(scope.$index, tableData)"
 type="text"
 size="small">
 移除
 </el-button>
 </template>
 </el-table-column>
 </el-table>
</template>

文章標題：vue+element實現(xiàn)表格新增、編輯、刪除功能-創(chuàng)新互聯(lián)
URL分享：http://muchs.cn/article12/cecjdc.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站排名、虛擬主機、面包屑導航、企業(yè)建站、標簽優(yōu)化、云服務器

廣告

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