本篇文章記錄el-table增加一行可編輯的數據列，進行增刪改。
1.增加空白行
直接在頁面mounted時對form里面的table列表增加一行數據，直接使用push() 方法增加一列數據這個時候也可以設置一些默認值。比如案例里面的 產品件數 。
mounted() {this.$nextTick(() => {this.addFormData.productList.push({productName: '',//產品名稱price: '',//單價(元/㎡)productCount: '1', //產品件數totalAmount: '', //小計￥元})})},2.產品名稱選中拿到數據展示到列表行
因為當前案例的產品名是下拉選擇的，所以我們要請求接口拿到數據渲染到下拉列表，這里直接使用了假數據。
data() {return {addFormData: {// 產品列表productList: [],},addFormRules: {productName: [{required: true,message: '請選擇產品',trigger: 'blur'}],price: [{required: true,message: '請輸入單價',trigger: 'blur'}],productCount: [{required: true,message: '請輸入產品件數',trigger: 'blur'}]},optionsList: [{id:1,productName:'橘子',price:'10',},{id:2,productName:'蘋果',price:'8',}]}},<el-form ref="addFormRef" :model="addFormData" :rules="addFormRules" size="mini" :inline="true"><el-table tooltip-effect="light" :data="addFormData.productList" ><el-table-column label="產品名稱" prop="productName" min-width="150"><template slot-scope="scope"><el-form-item size="mini" :prop="'productList.' + scope.$index + '.productName'":rules="addFormRules.productName" class="all"><el-select v-model="scope.row.productName" filterable value-key="id" placeholder="請選擇"@change="pestChange($event, scope.$index)"><el-option v-for="item in optionsList" :key="item.id" :label="item.productName":value="item"></el-option></el-select></el-form-item></template></el-table-column><el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"width="150"><template slot-scope="scope"><el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateYes(scope.row)"v-hasPermi="['system:order:edit']">增加</el-button><el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteProduct(scope.row)"v-hasPermi="['system:order:remove']">刪除</el-button></template></el-table-column></el-table><el-form-item size="large"><el-button type="primary" @click="handleSubmitAdd">提交</el-button><el-button @click="handleCancelAdd">取消</el-button></el-form-item></el-form>pestChange(e, index) {//此時的e 就是optionsList中的某一項//讓后解構賦值給我們這一行對應的值 let data = this.addFormData.productList[index]Object.keys(data).forEach(key => {data[key] = e[key]})this.addFormData.productList[index].productCount = 1},3.小計通過(計算屬性計算值)
<el-form ref="addFormRef" :model="addFormData" :rules="addFormRules" size="mini" :inline="true"><el-table tooltip-effect="light" :data="addFormData.productList" ><el-table-column label="小計￥元" prop="totalAmount" width="100"><template slot-scope="scope"><div class="notext">{{ getTotalAmount(scope.row) }}</div></template></el-table-column><el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"width="150"><template slot-scope="scope"><el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateYes(scope.row)"v-hasPermi="['system:order:edit']">增加</el-button><el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteProduct(scope.row)"v-hasPermi="['system:order:remove']">刪除</el-button></template></el-table-column></el-table><el-form-item size="large"><el-button type="primary" @click="handleSubmitAdd">提交</el-button><el-button @click="handleCancelAdd">取消</el-button></el-form-item></el-form> computed: {getTotalAmount(){return (data) => {//先判斷單價和數量必須存在if (data.productCount && data.price) {data.totalAmount = parseInt(data.productCount) * parseInt(parseFloat(data.price))return data.totalAmount} else {return 0.00}}}},4.再增加一行復用上一行的數據
handleUpdateYes(row) {//拿到上一行數據再往數組中push（）新的數據this.addFormData.productList.push({productName: row.productName,//產品名稱price: row.price,//單價(元/㎡)productCount: row.productCount, //產品件數totalAmount: '', //小計￥元})},5.刪除某一行
// 刪除產品handleDeleteProduct(row) {this.$confirm('此操作將永久刪除該產品信息, 是否繼續?', '提示', {confirmButtonText: '確定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.$message({type: 'success',message: '刪除成功!'});this.addFormData.productList.splice(row.index, 1)}).catch(() => {this.$message({type: 'info',message: '已取消刪除'});});},6.點擊提交對表單校驗
// 添加訂單表單提交handleSubmitAdd() {this.$refs.addFormRef.validate(async (valid) => {if (!valid) return//校驗通過 往下執行})},
