element前端ui組件挺美觀的，我們也使用了他們的table組件，但是默認沒有提供行編輯功能，我們可以通過將table的每個單元格換成input框來巧妙實現。默認每個單元格就是一個template數據填充，不可編輯；我們可以在template裏面包裹一個input框來實現單元格可編輯；等每一個單元格都可編輯的時候，我們可以在每一行後面加一個按鈕來控制只可編輯當前行。
先來看一下原始不可編輯的寫法：
<el-table width :data="list" element-loading-text="Loading" border fit highlight-current-row>
<el-table-column label="電話" width="260px" align="center">
<template slot-scope="scope">
{{ scope.row.tel }}
</template>
</el-table-column>
</el-table>
再來看一下可編輯的寫法：
<el-table width :data="list" element-loading-text="Loading" border fit highlight-current-row>
<el-table-column label="序號" type="index" width="50"></el-table-column>
<el-table-column label="電話" width="350%" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.tel" :disabled="!scope.row.disabled"></el-input>
</template>
</el-table-column>
<el-table-column label="地址" width="350%" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.address" :disabled="!scope.row.disabled"></el-input>
</template>
</el-table-column>
<!-- 此處省略了一些按鈕代碼，後面會講到-->
.................
</el-table>
注意在每一個template元素裏面我都放了一個input元素，依然使用v-model綁定值，只不過加了一個disable屬性來控制是否可編輯；頁面初始化的時候，默認整個表格不可編輯，只有點擊了某一行後面的編輯按鈕以後，這一行纔可以編輯。
由於在vue的精華與核心就是“數據綁定”，頁面上的幾乎所有屬性都可以通過數據來定義，所以我這裏採用將disable屬性定義在每一行的disable變量裏面，這樣點擊當前行的編輯按鈕時，只會改變當前行的編輯狀態。我們先來看一下上面改進後遺留的按鈕代碼：
<el-table-column align="center" label="操作" width="200%">
<template slot-scope="scope">
<el-button v-if="scope.row.edit" type="success" size="mini"
icon="el-icon-circle-check-outline" @click="confirmEdit(scope.row)">保存
</el-button>
<el-button v-else type="primary" size="mini"
@click="startEdit(scope.row)">編輯
</el-button>
<el-button v-if="scope.row.edit" class="cancel-btn" size="mini" icon="el-icon-refresh"
type="warning" @click="cancelEdit(scope.row)">取消
</el-button>
<!--<el-button type="danger" size="mini" @click="handleConfig(scope.row)">刪除</el-button>-->
</template>
</el-table-column>
我在每一行後面添加了一個“編輯”按鈕，當點擊編輯按鈕時，按鈕欄變爲保存和取消兩個按鈕；他們的狀態更換變量通過edit來定義實現
// 編輯
startEdit(row) {
row.edit = !row.edit;
row.disabled = true;
},
// 保存
confirmEdit(row) {
row.edit = false;
row.originalValue = row.address;
if (row.tel == null || row.address == null) {
this.loadAppConfigs();
return;
}
let name= this.params.name;
const p = {...row, name};
// 調用更新方法
updateXXXXx(p);
this.$message({
message: '已修改!',
type: 'success'
});
row.disabled = false;
if (row.id === undefined) {
// 重新加載該頁面
}
},
// 取消
cancelEdit(row) {
row.address = row.originalValue;
row.edit = false;
row.disabled = false;
this.$message({
message: '已取消修改!',
type: 'warning'
});
if (row.id === undefined) {
// 重新加載該頁面
}
}
}
表格綁定數據源data本身是一個數組，新增一行即是往數組中再添加一個元素，不過如果我們想新增一行時顯示在表格的第一行，那麼就要用到unshift方法，另外需要在新增一行時處於可編輯狀態，還要注意定義一個新行時的狀態變量值，因爲新增的是一個空輸入框，需要我們來輸入值，而不是一個默認值幫我們自動生成：
// 增加行
addRow () {
let newLine = {
tel: this.tel,
address: this.address,
edit: true, // 新增時處於可編輯狀態，所以按鈕是保存和取消
disabled: true // 打開編輯狀態
};
this.list.unshift(newLine); // 移到第一行
},
另外爲input框設置了disable屬性以後，當不可編輯時處於禁用狀態，此時文本字體顏色比較暗淡不清晰，看上去不美觀，我們的目的是不讓他編輯，但是依然需要正常顯示顏色，這種情況只能通過重新定義input的樣式來實現：
<style>
input[disabled], input:disabled, input.disabled {
color: #000000;
-webkit-text-fill-color: #000000;
-webkit-opacity: 1;
opacity: 1;
font-weight: 900;
}
</style>