vue中用table_vue+elementUI table篇

1.table内容展示

style="width: 100%;" @selection-change="selectionChange">

{{scope.row.type === 1 ? '时效卡' : '次卡'}}

{{ scope.row.type===1 ? scope.row.times + '天' : scope.row.times + '次'}}

{{scope.row.price}}

{{scope.row.floor_price}}

{{scope.row.app_status === 1? '下架':'上架'}}

{{scope.row.saas_status === 1? '下架' : '上架'}}

{{scope.row.created_at}}

@click="handleEdit(scope.$index, scope.row)">编辑

删除

确定

取消

2.编辑

handleEdit(index, row) {this.subStatus = 'edit_' +indexthis.formData =Object.assign({}, row)this.DialogVisible = true

this.add_edit = true

this.$nextTick(() =>{this.$refs.imgbox.setImg(row.photo)

})

},

editsubmit() {

let self= this

this.$refs.formbox.validate(valid =>{if(valid) {

self.loading= trueeditVipCard(self.formData).then(response=>{

self.loading= falseself.DialogVisible= falselet index= self.subStatus.split('_')[1]

self.$set(self.tableList, index, response.data)//this.getList()

})

}else{

console.log('error submit!!')return false}

})

},

3.删除

handleDelete(index, rows) {

deleteVipCard(rows[index].id).then(res=>{

rows.splice(index,1)

}).catch(() =>{this.common.Message('error', '删除失败！')

})

}

4.table中使用checkbox，判断选中状态

在table中加入@selection-change="selectionChange"

//点击checkbox获得对应id

selectionChange(selection) {this.groupOprate.ids =[]for (let i = 0; i < selection.length; i++) {this.groupOprate.ids.push(selection[i].id)

}

console.log(this.groupOprate.ids)

},