iview 테이블 렌더 통합 스위치 스위치 소개

다음은 iview 테이블 렌더 통합 스위치의 예시입니다. 참고할만한 가치가 있으며 모든 분들께 도움이 되길 바랍니다.

오늘 공유하고 싶은 것은 iview table render에 스위치 스위치를 통합하여 테이블 테이블의 값을 수정한다는 점입니다. 문서를 읽을 때 2.0을 읽어보고 실수로 열면 1.0이 되지만 사용하면 됩니다. 아무런 효과가 없으며 이유도 발견되지 않았습니다. 주어진 것은 단지 글쓰기 아이디어일 뿐이며, 직접 통합할 수 있습니다.

1. 효과는 다음과 같습니다

처리 스위치를 켜서 처리된 상태로 변경하고, 스위치 스위치를 닫아 처리되지 않은 상태로 변경하는 것입니다.

2. 템플릿 html 작성 방법

<span style="font-size:14px;"><Table highlight-row border :columns="columns1" :data="data1" ref="table" :height="tableHeight"></Table></span>

3. 데이터 작성 방법, 테이블 렌더링 기능 작성 방법,

columns1: [{
 fixed: 'right',
 title: 'Action',
 key: 'action',
 width: 250,
 align: 'center',
 render:(h, params) => {
   return h('p', [
    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的行序列，可以取到对应的表格值
     }
    }
    }, )
   ]);
   }
}]

4. 방법

//通过开关状态判断值然后传值进行更新
 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)
  })
 },

아이디어에 관심을 갖고 문의사항이 있으면 연락주세요

위 내용은 모두의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트!

관련 권장 사항:

스크롤 위치를 기록하기 위한 vue-scroller의 코드 소개에 대해

Vue의 .sync 수정자 사용을 이해하는 방법

Vue는 요청 인터셉터 및 vue-resource 인터셉터를 추가합니다.

을 사용하세요.

위 내용은 iview 테이블 렌더 통합 스위치 스위치 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!