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)
  })
 },

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

관련 기사:

NodeJS 상위 프로세스 및 하위 프로세스 리소스 공유 원칙 및 구현 방법

vue에서 이미지 및 파일 업로드를 구현하는 샘플 코드

이미지 업로드를 위한 vue axios 양식 제출 인스턴스

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