如何改裝element-ui表格，使之擁有增加和刪除功能成為動態表格
阿新 • • 發佈：2019-01-13
最近專案需要使用一個動態表格，使之擁有增加刪除以及大表單的儲存功能，介面框架定的是element-ui，仔細找了找，並沒有現成的動態表格可以使用，沒辦法，只能開啟改裝之路。我的思路是這樣的，就是在拿到後臺資料時，在末尾在加上一個標記空陣列，使之成為增加框，就可以了。這樣就需要一個初始化的標記空陣列，在沒有資料的時候也會出現增加框。通過v-if以及v-else就可以實現基本的判斷，具體程式碼如下
<el-table-column :formatter="row => row.xxx" label="xxx" width="300"> <template slot-scope="scope" > <input size="mini" type="number" v-if="scope.row.add" v-model="scope.row.xxx"></input> <div v-else>{{scope.row.xxx}}</div> </template> </el-table-column>
然後在拿資料的時候加個判斷，如果有資料就接受資料，並在資料最後加上一樣的空陣列，但是還要加個add屬性，如下：
const initData = {
add: true,
xxx: 'xxx'
}刪除功能的話，相對簡單，表格會有自帶的通過傳入Index進行刪除，具體看element-ui的表格文件，自己也可以用一些處理工具如：lodash等進行處理，在刪除請求成功時進行呼叫就可以了。