-
效果
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節(jié)點
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: "普陀區(qū)",
address: "上海市普陀區(qū)金沙江路 1518 弄",
zip: 200333,
sex: 18
},
{
date: "2016-05-02",
sex: 18,
name: "王小虎",
province: "上海",
city: "普陀區(qū)",
address: "上海市普陀區(qū)金沙江路 1518 弄",
zip: 200333
},
{
date: "2016-05-04",
name: "王小虎",
sex: 18,
province: "上海",
city: "普陀區(qū)",
address: "上海市普陀區(qū)金沙江路 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) {
//新增時，初始化數(shù)據(jù)結(jié)構(gòu)
this.initAddDataJson(dataArray[0]);
}
}
console.log("this.tableData:", this.table_data);
},
initAddDataJson(dataArray) {
//新增時，初始化數(shù)據(jù)結(jié)構(gòu)
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();
//確保方法在頁面渲染后調(diào)用
this.$nextTick(function() {
/////方法
this.tableRowClassName();
});
},
watch: {
space_color: function() {
//監(jiān)聽數(shù)據(jù)變化
this.$nextTick(function() {
/////方法
this.tableRowClassName();
});
},
table_data: function() {
//監(jiān)聽數(shù)據(jù)變化f
this.$nextTick(function() {
/////方法
this.tableRowClassName();
});
}
},
data() {
return {
new_date_json: {}, //數(shù)據(jù)結(jié)構(gòu)
multipleSelection: [], //復(fù)選框，數(shù)據(jù)
is_edit: true, //是否可編輯
is_delete: true, //是否可刪除
selection: true, //是否需要復(fù)選框
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"
}
],
//表格數(shù)據(jù)
table_data: [
// {
// date: "2016-05-03",
// name: "王小虎",
// province: "上海",
// city: "普陀區(qū)",
// address: "上海市普陀區(qū)金沙江路 1518 弄",
// zip: 200333,
// sex: 18
// },
// {
// date: "2016-05-02",
// sex: 18,
// name: "王小虎",
// province: "上海",
// city: "普陀區(qū)",
// address: "上海市普陀區(qū)金沙江路 1518 弄",
// zip: 200333
// },
// {
// date: "2016-05-04",
// name: "王小虎",
// sex: 18,
// province: "上海",
// city: "普陀區(qū)",
// address: "上海市普陀區(qū)金沙江路 1518 弄",
// zip: 200333
// }
]
};
}
};
</script>
<style scoped>
</style>
