vxe-table使用记录

最近项目在用vxe-table作为表格的开发插件。所以在这里记录下踩过的坑，算是加深下自己的记忆。

可编辑表格中如果最后一行为合计，则最后一行的可编辑单元格为不可编辑状态。

vxe-table中一个属性是edit-config的activeMethod。如果最后一行的rowType为‘1’，则返回false,否则返回true

<vxe-grid
  border
  ref="xTable"
  :height="tableHeight"
  :loading="loading"
  class="mytable-scrollbar"
  :columns="tableColumn"
  :data="tableData"
  :edit-config="{trigger:'click',mode:'cell',showIcon:false,activeMethod:activeCellMethod}" //即这里的activeMethod方法
  @edit-closed="editClosedEvent"
  :row-style="rowStyle"
  >
</vxe-grid>

/**
 * 该方法的返回值用来决定该单元格是否允许编辑
*/
activeCellMethod({row}){
  if(row.rowType==='1'){  //rowType是后端返回的表明这一行是合计的唯一标识
    return false;
  }else{
    return true;
  }
},

vxe-table列属性type="html"可在表格中插入html

即值可以是html标签,对于有需要添加自定图标可写html标签很有帮助。这个是调整后与调整前的值做对比，如果相等则显示对勾，否则显示错号

let columns = [{field:'field01',title:'可编辑单元格',editRender: {name: "input", attrs: {type: "text"}}}]
if(item.billStatus ==='0'){
   item.billStatus = '<i class="icon-close" style="color:#ff1c1c"></i>'
 }else if(item.billStatus ==='1'){
   item.billStatus = '<i class="icon-check" style="color:#00a854"></i>'
 }

表格中判断某列的值与另一列的值相等

思路：

1. 最后一行合计不需要对比，取表格数据时把最后一条数据去除（Array.slice(0,tableData.length-1)）

2. 找到所有调整后的列属性集合。

3. 双循环，外围是tableData的循环（即行的循环），内循环是找到的所有调整后的列属性的循环。在这一步需借助一个数组，只要这一行数据有一个比对不成功，则往数组中推入1，最后判断这个数组中是不是有1，若有一个1，则比对不成功，显示叉号。

具体代码：

getBillStatus(){
  let tableData = this.$refs.xTable.getTableData().tableData;
  //最后的合计行不需要将调整后的金额和总会计的相比较
  let tableDataExceptLast = tableData.slice(0,tableData.length-1);
  let columns = this.$refs.xTable.getColumns();

  //所有调整后的列属性集合
  let amtArr = []
  columns.forEach(item=>{
    if(item.title === '调整后'){
      let amtObj = {};
      amtObj.property = item.property.substring(1,item.property.length);
      amtArr.push(amtObj);
    }
  });
  let isErrorArr = [];
  tableDataExceptLast.forEach(item=>{
    amtArr.forEach(it=>{
      if(revertNumMoney(item[it.property]) !==revertNumMoney(item[`h${it.property}`])){
        //有一项不相等，则向isErrorArr 添加一项数字1
        isErrorArr.push(1)
      }
    });
    //isErrorArr数组中只要有一个调整后的金额与总会计金额不相等，则显示错号，否则显示对勾
    if(isErrorArr.findIndex(b=>b===1)>-1){
      item.billStatus = '<i class="icon-close" style="color:#ff1c1c"></i>';
    }else{
      item.billStatus = '<i class="icon-check" style="color:#00a854"></i>'
    }
  });

}