Vue基於ElementUI可編輯表格

 

• 

  image.png

• 源碼

<template> <div> <el-button size="mini" @click="handleAdd()" type="primary">Add</el-button> <el-table ref="mytable" :data="table_data" style="width: 100%" @selection-change="handleSelectionChange" > <el-table-column v-if="radio" type="index" width="50"></el-table-column> <el-table-column v-if="selection" type="selection" width="55"></el-table-column> <el-table-column align="center" v-for="(item,index,key) in table_columns" :item="item" :key="key" :index="index" :label="item.label" > <template slot-scope="scope"> <el-input v-if=" scope.row.edit" size="small" v-model="scope.row[item.prop]" :placeholder="'請輸入'+item.label" ></el-input> <span v-if=" !scope.row.edit">{{scope.row[item.prop]}}</span> </template> </el-table-column> <el-table-column label="操作" align="center"> <template slot-scope="scope"> <!-- 全局控制的編輯 --> <div v-if="is_edit&&scope.row.add==undefined" style="display: inline-block;"> <!-- 編輯 --> <el-button size="mini" v-if="!scope.row.edit" @click="handleEdit(scope.$index, scope.row)" type="primary" >Edit</el-button> <!-- 保存 --> <el-button size="mini" type="success" :plain="true" v-if="scope.row.edit" @click="handleSave(scope.$index, scope.row)" >Save</el-button> </div> <!-- 添加控制 --> <div v-if="scope.row.add!=undefined&&scope.row.add" style="display: inline-block;"> <!-- 保存 --> <el-button size="mini" type="success" :plain="true" v-if="scope.row.edit" @click="handleSave(scope.$index, scope.row)" >Save</el-button> </div> <!-- 全局控制刪除 --> <el-button size="mini" v-if="is_delete&&scope.row.add==undefined" :plain="true" type="danger" @click="handleDelete(scope.$index, scope.row)" >Delete</el-button> </template> </el-table-column> </el-table> </div> </template> <script> export default { methods: { //隔行變色 tableRowClassName() { //選取DOM節點 var trs = this.$refs.mytable.$el .getElementsByTagName("tbody")[0] .getElementsByTagName("tr"); for (var i in trs) { if (i % 2 == 0) { //當隔行變色未true時改變顏色 if (this.space_color) { trs[i].style.backgroundColor = "#f0f9eb"; } else { trs[i].style.backgroundColor = ""; } } } }, //多選框 handleSelectionChange(val) { this.multipleSelection = val; console.log("selection:", this.multipleSelection); }, //編輯 handleEdit(index, row) { console.log(index, row); row.edit = true; }, //刪除 handleDelete(index, row) { console.log(index, row); this.table_data.splice(index, 1); this.$message({ message: "刪除成功！", type: "success" }); }, //保存 handleSave(index, row) { console.log(index, row); row.edit = false; delete this.table_data[index].add; this.$message({ message: "保存成功！", type: "success" }); }, handleAdd() { var addDataJson = {}; for (var key in this.new_date_json) { if (key === "edit") { delete addDataJson[key]; } else if (key === "add") { delete addDataJson[key]; } else { addDataJson[key] = ""; } } addDataJson.edit = true; addDataJson.add = true; this.table_data.push(addDataJson); }, //初始化編輯屬性 initEditAttribute() { var self = this; var edit = self.edit; var dataArray = [ { date: "2016-05-03", name: "王小虎", province: "上海", city: "普陀區", address: "上海市普陀區金沙江路 1518 弄", zip: 200333, sex: 18 }, { date: "2016-05-02", sex: 18, name: "王小虎", province: "上海", city: "普陀區", address: "上海市普陀區金沙江路 1518 弄", zip: 200333 }, { date: "2016-05-04", name: "王小虎", sex: 18, province: "上海", city: "普陀區", address: "上海市普陀區金沙江路 1518 弄", zip: 200333 } ]; if (dataArray.length > 0) { //添加編輯事件 for (var index in dataArray) { dataArray[index]["edit"] = false; this.table_data.push(dataArray[index]); } if (Object.keys(this.new_date_json).length === 0) { //新增時，初始化數據結構 this.initAddDataJson(dataArray[0]); } } console.log("this.tableData:", this.table_data); }, initAddDataJson(dataArray) { //新增時，初始化數據結構 var dataJson = dataArray; var newDateJson = {}; for (var key in dataJson) { if (key === "edit") { newDateJson[key] = "true"; } else { newDateJson[key] = ""; } } newDateJson["add"] = true; this.new_date_json = newDateJson; } }, mounted: function() { this.initEditAttribute(); //確保方法在頁面渲染后調用 this.$nextTick(function() { /////方法 this.tableRowClassName(); }); }, watch: { space_color: function() { //監聽數據變化 this.$nextTick(function() { /////方法 this.tableRowClassName(); }); }, table_data: function() { //監聽數據變化f this.$nextTick(function() { /////方法 this.tableRowClassName(); }); } }, data() { return { new_date_json: {}, //數據結構 multipleSelection: [], //復選框，數據 is_edit: true, //是否可編輯 is_delete: true, //是否可刪除 selection: true, //是否需要復選框 radio: false, //單選變色 space_color: true, //隔行變色 //表頭信息 table_columns: [ { prop: "date", label: "日期", width: "150" }, { prop: "name", label: "姓名", width: "150" }, { prop: "sex", label: "年齡", width: "150" }, { prop: "province", label: "省份", width: "" }, { prop: "city", label: "城市", width: "150" }, { prop: "address", label: "地址", width: "150" } ], //表格數據 table_data: [ // { // date: "2016-05-03", // name: "王小虎", // province: "上海", // city: "普陀區", // address: "上海市普陀區金沙江路 1518 弄", // zip: 200333, // sex: 18 // }, // { // date: "2016-05-02", // sex: 18, // name: "王小虎", // province: "上海", // city: "普陀區", // address: "上海市普陀區金沙江路 1518 弄", // zip: 200333 // }, // { // date: "2016-05-04", // name: "王小虎", // sex: 18, // province: "上海", // city: "普陀區", // address: "上海市普陀區金沙江路 1518 弄", // zip: 200333 // } ] }; } }; </script> <style scoped> </style>