element ui+vue实现表格内修改编辑某条数据
方法一:跟后台配合,接收到的数据里有一个字段(istrue)来控制是否显示。方法二:通过element ui的css去控制(highlight-current-row官方示例中,使用它进行某一行选中时的背景高亮)参考地址:https://www.jianshu.com/p/79f39f2c1382注:这个方法有一个缺点就是,只要你点这组数据的某一行,它就变成input框可修改了。修...
·
方法一:跟后台配合,接收到的数据里有一个字段(istrue)来控制是否显示。
方法二:通过element ui的css去控制(highlight-current-row官方示例中,使用它进行某一行选中时的背景高亮)
参考地址:https://www.jianshu.com/p/79f39f2c1382
注:这个方法有一个缺点就是,只要你点这组数据的某一行,它就变成input框可修改了。修改按钮就没有用了,而且,哪怕你点击删除按钮,依然会变成修改状态。
方法三:通过this.$set的方式,加一个属性就可以了。
<template>
<div>
<el-table :data="tableData" tooltip-effect="dark" style="width: 100%" header-align="center">
<el-table-column width="50" header-align="center">
<template slot-scope="{row,$index}">
<span>{{$index + 1}}</span>
</template>
</el-table-column>
<el-table-column label="名称" prop="name" width="300" header-align="center">
<template slot-scope="{row,$index}">
<input class="edit-cell" v-if="isshow[$index]" v-model="row.name">
<span v-if="!isshow[$index]">{{row.name}}</span>
</template>
</el-table-column>
<el-table-column label="日期" prop="date" width="300" header-align="center">
</el-table-column>
<el-table-column label="日期" prop="date" width="300" header-align="center">
</el-table-column>
<el-table-column label="地址" prop="address" width="300" header-align="center">
</el-table-column>
<el-table-column label="地址" prop="address" width="300" header-align="center">
</el-table-column>
<el-table-column fixed="right" label="操作" width="100" header-align="center">
<template slot-scope="{row,$index}">
<el-button type="text" size="small" @click.native="handelCancel($index, row)" v-if="isshow[$index]">确定
</el-button>
<el-button type="text" size="small" @click.native="handleEdit($index, row)" v-if="!isshow[$index]">编辑
</el-button>
<el-button type="text" size="small" @click.native="handleDelete($index, row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
isshow: [],
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
};
},
methods: {
//点击编辑
handleEdit(index, row) {
this.$set(this.isshow, index, true)
},
//取消编辑
handelCancel(index, row) {
this.$set(this.isshow, index, false)
},
//点击更新
handleUpdate(formName) {
},
//点击删除
handleDelete(index, row) {
},
},
mounted() {
}
};
</script>
<style scoped>
</style>
更多推荐
已为社区贡献4条内容
所有评论(0)