> 文章列表 > element-ui实现表格内容修改

element-ui实现表格内容修改

element-ui实现表格内容修改

<template><el-table:row-class-name="tableRowClassName"border:data="tableData"@cell-dblclick="doubleClickCell"style="width: 100%"><el-table-columnprop="description"label="项目"align="center"></el-table-column><el-table-columnprop="unit"label="单位"align="center"></el-table-column><el-table-columnalign="center"prop="levelOne"label="一级"><template slot-scope="scope"><span v-if=" !scope.row.edit">{{scope.row.levelOne}}</span><el-input v-else="scope.row.edit" v-model="scope.row.levelOne"@blur="levelChange(scope.row)">{{scope.row.levelOne}}</el-input></template></el-table-column><el-table-columnalign="center"prop="levelTwo"label="二级"><template slot-scope="scope"><span v-if=" !scope.row.edit">{{scope.row.levelTwo}}</span><el-input v-else="scope.row.edit" v-model="scope.row.levelTwo"@blur="levelChange(scope.row)">{{scope.row.levelTwo}}</el-input></template></el-table-column><el-table-columnalign="center"prop="levelThree"label="三级"><template slot-scope="scope"><span v-if=" !scope.row.edit">{{scope.row.levelThree}}</span><el-input v-else="scope.row.edit" v-model="scope.row.levelThree"@blur="levelChange(scope.row)">{{scope.row.levelThree}}</el-input></template></el-table-column></el-table>
</template>

===================================

<script>new Vue({el: '#order-app',data() {return {tableData: [{}],form: {},dialogVisible: false}},computed: {},created() {this.init();},mounted() {// this.loading = false},methods: {async init() {await getParament().then(res => {if (String(res.code) === '1') {this.tableData = res.data || []}}).catch(err => {this.$message.error('请求出错了:' + err)})},onSubmit() {addCategory({'name': classData.name, 'type': this.type, sort: classData.sort}).then(res => {console.log(res)if (res.code === 1) {this.$message.success('分类添加成功!')if (!st) {this.classData.dialogVisible = false} else {this.classData.name = ''this.classData.sort = ''}this.handleQuery()} else {this.$message.error(res.msg || '操作失败')}}).catch(err => {this.$message.error('请求出错了:' + err)})},doubleClickCell(row, column, cell, event) {this.$set(row, "edit", true);},levelChange(row) {this.$set(row, "edit", false);//业务处理}}})
</script>