iview table render集成switch开关

曾经终败给现在 2022-06-02 03:50 394阅读 0赞

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

一、效果如下

![Center][]

即是打开处理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',
                      size: '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[index].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, 'treatment', 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)
          })
        },

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

[Center]: /images/20220602/cb2839ec979d49d58651a75190c972b9.png