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;
           }
        }
    }

}

assist.js文件夾
// 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 = {

};

 

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);