iview table render集成switch开关的实例

iview table render集成switch开关的实例

今天想要分享的是iview table render集成switch开关修改table表格的值，看文档记得看2.0的，不注意打开就成1.0然后用上了一直没有效果又没有找出原因。给出的只是一种写法思路，具体自己集成。

一、效果如下

即是打开处理switch开关，对应修改为已处理状态，关闭switch开关，修改为未处理状态。

二、template html写法

三、data写法，table render函数写法，

columns1: [{

fixed: 'right',

title: 'Action',

key: 'action',

width: 250,

align: 'center',

render:(h, params) => {

return h('div', [

h('Button', {

props: {

type: 'primary',

sihttp://ze: 'small'

},

style: {

marginRight: '20px'

},

on: {

click: () => {

this.show(params.index)

}

}

}, '阅览'),

h('strong', {

style: {

marginRight: '5px'

},

}, '处理'),

h('i-switch', { //数据库1是已处理，0是未处理

props: {

type: 'primary',

value: params.row.treatment === 1 //控制开关的打开或关闭状态，官网文档属性是value

},

style: {

marginRight: '5px'

},

on: {

'on-change': (value) => {//触发事件是on-change,用双引号括起来，

//参数value是回调值，并没有使用到

this.switch(params.index) //params.index是拿到table的行序列，可以取到对应的表格值

}

}

}, )

]);

}

}]

四、methods方法

//通过开关状态判断值然后传值进行更新

switch(index) {

//打开是true,已经处理1

if (this.data1[indexhttp://].treatment == 1) {

this.data1[index].treatment = 0

this.updateFeedbackMessage(this.data1[index].id, 'treatment', this.data1[index].treatment)

} else {

this.updateFeedbackMessage(this.data1[index].id, 'treahttp://tment', 1)

}

},

//更新反馈信息某一字段

updateFeedbackMessage(id, key, value) {

var vm = this

var data = {

id: id

}

data[key] = value

vm.$http.put('/v1/suggestion', data).then(function (response) {

if (response.data.code == '000000') {

vm.$Message.info('更新成功');

vm.getFeedbackMessages()//获取table数据信息，这里调用是因为修改值之后马上可以更新table值

}

}).catch((error) => {

console.log(error)

})

},

//获取所有反馈信息列表

getFeedbackMessages() {

var vm = this

var url = '/v1/suggestions?'

url = url + "pageNum=" + this.pageNum + '&pageSize=' + this.pageSize

if (this.createByValue != '') {

url = url + '&createBy=' + this.createByValue

}

if (this.dealModelValue != '') {

url = url + '&treatment=' + this.dealModelValue

}

this.$http.get(url).then(response => {

if (response.data.code == '000000') {

vm.data1 = response.data.data

vm.pageTotal = parseInt(response.data.message)

}

}).catch(error => {

console.log(error)

})

},

注重思路，有问题一起交流

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。