iview table 多选 、全选 、反选+选中行可编辑

 

 

     
 <Table max-height="400"  ref="tbUsers"   :data='usersData' :columns="usersColumns" @on-select='tableSelect' @on-select-cancel='tableSelectCancel' @on-select-all='tableSelectAll'  @on-select-all-cancel='tableSelectAllCancel'></Table>
   

import { deepCopy } from '@/libs/assist';

 

  usersData: [],
  usersDataTemp:[],//中间变量很关键
  usersColumns: [
        {
          type: 'selection',
          //maxWidth: 50,
          width:50,
          align: 'center'
        },
 
        {
          key: 'ContractorName',
          width:130,
          title: '承包户名称',
          //minWidth: 80
        },
        {
          type: 'WinPrice',
          title: '中标价格(元)',
          width:160,
          //minWidth: 90,
          render: (h, {row, index}) => {
            let edit;
           
           if (this.usersDataTemp[index].ShowEdit ==true) {
              edit = [h('InputNumber', {
                props: {
                  value: row.WinPrice,
                 
                },
                style:{
                    width:'140px'
                },
                on: {
                  input: (val) => {
                   this.usersDataTemp[index].WinPrice =  val;
                  }
                }
              })];
           }else{
               edit=row.WinPrice;
           }
            
            return h('div', [edit]);
          }
        },
        {
          type: 'Comment',
          title: '备注',
           //width:285,
          //maxWidth: 285,
          render: (h, {row, index}) => {
            let edit;
          
            if (this.usersDataTemp[index].ShowEdit==true) {
              edit = [h('Input', {
                props: {
                  value: row.Comment,
                  maxlength:200,
                },
                on: {
                  input: (val) => {
                   
                     this.usersDataTemp[index].Comment =  val;
                  }
                }
              })];
            }else{
              edit=row.Comment;
            }
            return h('div', [edit]);
          }
        },

      
      ],

  methods: {

    getUserData（）{
       异步请求获取数据data
       this.usersData=data;
       this.usersDataTemp= deepCopy(data);

     }，

    tableSelectAll(selection){
       //console.log('tableSelect',selection);
       for(let j=0;j<this.usersDataTemp.length;j++){
              this.usersDataTemp[j].ShowEdit=true;
        }
    },
    tableSelectAllCancel(selection){
      //console.log('tableSelectCancel',selection);
       for(let j=0;j<this.usersDataTemp.length;j++){
              this.usersDataTemp[j].ShowEdit=false;
        }
    },
    tableSelectCancel(selection,row){//已选项数据，取消选择的一项数据
       //console.log('tableSelectCancel',selection,row);
         for(let j=0;j<this.usersDataTemp.length;j++){
           if(this.usersDataTemp[j].UserID==row.UserID){
              this.usersDataTemp[j].ShowEdit=false;
           }
        }
        

    },
    tableSelect(selection,row){
       //console.log('tableSelect',selection,row);//已选项数据，刚选择的一项数据
        for(let j=0;j<this.usersDataTemp.length;j++){
           if(this.usersDataTemp[j].UserID==row.UserID){
              this.usersDataTemp[j].ShowEdit=true;
           }
        }
    }

}

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

assist.js文件夹<br>// deepCopy function deepCopy (data) {   const t = typeOf(data);   let o;     if (t === 'array') {     o = [];   } else if (t === 'object') {     o = {};   } else {     return data;   }     if (t === 'array') {     for (let i = 0; i < data.length; i++) {       o.push(deepCopy(data[i]));     }   } else if (t === 'object') {     for (let i in data) {       o[i] = deepCopy(data[i]);     }   }   return o; }   export {deepCopy};

也可以

 

let util = {

};

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

util.deepCopy=function (data) {   const t = typeOf(data);   let o;     if (t === 'array') {     o = [];   } else if (t === 'object') {     o = {};   } else {     return data;   }     if (t === 'array') {     for (let i = 0; i < data.length; i++) {       o.push(deepCopy(data[i]));     }   } else if (t === 'object') {     for (let i in data) {       o[i] = util.deepCopy(data[i]); //util递归没测试过     }   }   return o; }

export default util;

 

引用：

import util from '@/libs/util';

调用

util.deepCopy(data);