sliver/admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Pull requests Activity

add(inlineEditable): add the calcel btn to restore the title

Browse source
This commit is contained in:
Pan 2017-12-08 11:07:20 +08:00
parent a9d2978c31
commit ebc2ac08b7
1 changed files with 36 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/views/example/table/inlineEditTable.vue
View file

@ -35,14 +35,18 @@
<el-table-column min-width="300px" label="标题"> <el-table-column min-width="300px" label="标题">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input v-show="scope.row.edit" size="small" v-model="scope.row.title"></el-input> <template v-if="scope.row.edit">
<span v-show="!scope.row.edit">{{ scope.row.title }}</span> <el-input class="edit-input" size="small" v-model="scope.row.title"></el-input>
<el-button class='cancel-btn' size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">cancel</el-button>
</template>
<span v-else>{{ scope.row.title }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="编辑" width="120"> <el-table-column align="center" label="编辑" width="120">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button :type="scope.row.edit?'success':'primary'" @click='scope.row.edit=!scope.row.edit' size="small" icon="edit">{{scope.row.edit?'完成':'编辑'}}</el-button> <el-button v-if="scope.row.edit" type="success" @click="confirmEdit(scope.row)" size="small" icon="el-icon-circle-check-outline">完成</el-button>
<el-button v-else type="primary" @click='scope.row.edit=!scope.row.edit' size="small" icon="el-icon-edit">编辑</el-button>
</template> </template>
</el-table-column> </el-table-column>
@ -84,12 +88,40 @@ export default {
fetchList(this.listQuery).then(response => { fetchList(this.listQuery).then(response => {
const items = response.data.items const items = response.data.items
this.list = items.map(v => { this.list = items.map(v => {
this.$set(v, 'edit', false) this.$set(v, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html
v.originalTitle = v.title // will be used when user click the cancel botton
return v return v
}) })
this.listLoading = false this.listLoading = false
}) })
},
cancelEdit(row) {
row.title = row.originalTitle
row.edit = false
this.$message({
message: 'The title has been restored to the original value',
type: 'warning'
})
},
confirmEdit(row) {
row.edit = false
row.originalTitle = row.title
this.$message({
message: 'The title has been edited',
type: 'success'
})
} }
} }
} }
</script> </script>
<style scoped>
.edit-input {
padding-right: 100px;
}
.cancel-btn {
position: absolute;
right: 15px;
top: 13px;
}
</style>