zoukankan      html  css  js  c++  java
  • 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, 50, align: 'center' }, { key: 'ContractorName', 130, title: '承包户名称', //minWidth: 80 }, { type: 'WinPrice', title: '中标价格(元)', 160, //minWidth: 90, render: (h, {row, index}) => { let edit; if (this.usersDataTemp[index].ShowEdit ==true) { edit = [h('InputNumber', { props: { value: row.WinPrice, }, style:{ '140px' }, on: { input: (val) => { this.usersDataTemp[index].WinPrice = val; } } })]; }else{ edit=row.WinPrice; } return h('div', [edit]); } }, { type: 'Comment', title: '备注', //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);
    树立目标,保持活力,gogogo!
  • 相关阅读:
    php 下设置cookie问题
    js 页面无滚动条添加滚轮事件
    Python中关于字符串的问题
    Python 字符串相加问题
    ajax 同步和异步
    重叠div鼠标经过事件
    Myeclipse中将项目上传到码云
    eclipse debug的时候提示debug Edit Source Lookup path
    阿里云+wordpress搭建个人博客网站
    centos7 安装mysql
  • 原文地址:https://www.cnblogs.com/hao-1234-1234/p/14341481.html
Copyright © 2011-2022 走看看