<template>
|
<!--表格树内容栏-->
|
<div style="width: 100%">
|
<div
|
style="text-align: right; border-top: 1px solid #ebeef5; padding: 10px"
|
>
|
<el-button @click="startEditData" size="small"
|
><i class="el-icon-edit"></i>
|
</el-button>
|
<el-button @click="saveEditData" size="small"
|
><i class="el-icon-check"></i>
|
</el-button>
|
</div>
|
<div style="border-top: 1px solid #ebeef5">
|
<el-table
|
stripe
|
size="mini"
|
style="width: 100%"
|
rowKey="propertyid"
|
:data="data"
|
><el-table-column type="selection" width="55"> </el-table-column>
|
<el-table-column
|
prop="propertyid"
|
header-align="center"
|
align="center"
|
width="55"
|
label="序号"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="propertyname"
|
header-align="center"
|
align="center"
|
label="属性项"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="propertyvalue"
|
header-align="center"
|
align="center"
|
label="属性值"
|
>
|
<template slot-scope="scope">
|
<el-input
|
size="small"
|
v-if="isedit"
|
:ref="scope.column.property"
|
v-model="scope.row.propertyvalue"
|
@blur="alterData(scope.row, scope.column)"
|
>
|
></el-input
|
>
|
<span v-else>{{ scope.row.propertyvalue }}</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</template>
|
<script>
|
export default {
|
props: ["data", "owerid"],
|
data() {
|
return {
|
isedit: false,
|
editedData: [],
|
};
|
},
|
methods: {
|
startEditData() {
|
this.editedData = [];
|
this.isedit = true;
|
},
|
saveEditData() {
|
this.isedit = false;
|
console.log(this.editedData);
|
//提交保存
|
//this.$axios();
|
},
|
alterData(row, column) {
|
let oldrows = this.data.find((item) => {
|
return item.propertyid === row.propertyid;
|
});
|
let val = row[column.property];
|
if (oldrows[column.property] !== val) {
|
let d = {};
|
d[row.propertyid] = val;
|
this.editedData.push(d);
|
}
|
},
|
},
|
computed: {
|
// 子组件computed中定义内容
|
tabledata() {
|
console.log(this.data);
|
return this.data;
|
},
|
},
|
};
|
</script>
|
