<el-input class="edit-input" size="small" v-model="scope.row.citySubsidy"></el-input>
</template>
<span v-else>{{ scope.row.citySubsidy }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="Actions" width="200">
<template slot-scope="scope">
<el-button v-if="scope.row.edit" type="success" @click="confirmEdit(scope.row)" size="small"
icon="el-icon-circle-check-outline">Ok
</el-button>
<el-button v-if="scope.row.edit" class='cancel-btn' size="small" icon="el-icon-refresh" type="warning"
@click="cancelEdit(scope.row)">cancel
</el-button>
<el-button v-else type="primary" @click='scope.row.edit=!scope.row.edit' size="small" icon="el-icon-edit">
Edit
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: "city",
data() {
return {
tableData: [], //table的数据
originalData: [],//table数据备份
provinceArr: [], //省份要合并数组 [2,0,1,3,0,0] 代表第一二行合并,第三行不变,第四五六行合并,0代表原本的那一行被合并,因此这个列被消除
provincePos: 0, //省份要合并数组内容的序号
cityArr: [], //同上 市
cityPos: [],
zoneArr: [],//同上 区
zonePos: [],
formInline: { //form表单
search: ''
},
loading: false
}
},
created() {
this.init()
},
methods: {
init() {
this.loading = true;
axios.get('./static/table.json')
.then(res => {
this.loading = false;
this.tableData = res.data.map((v, index) => {
this.$set(v, 'edit', false) //增加一个新的属性
//可以修改的属性值,进行添加一个对应的原本值
v.originalRemake = v.remake;
v.originalPublicS = v.publicSubsidy;
v.originalProvinceS = v.provinceSubsidy;
v.originalCityS = v.citySubsidy;
return v
})
this.originalData = this.tableData;
this.merage() //合并的方法
})
.catch(e => {
console.log(e)
})
},
cancelEdit(row) {
//取消编辑,把原本值进行覆盖回来
row.remake = row.originalRemake
row.publicSubsidy = row.originalPublicS
row.provinceSubsidy = row.originalProvinceS
row.citySubsidy = row.originalCityS
row.edit = false
this.$message({
message: 'The title has been restored to the original value',
type: 'warning'
})
},
confirmEdit(row) {
row.edit = false
