Table中的Render用法——iView(二)

iView，记录一下用法，方便日后查找

Table表内编辑

整体展示

<!-- iView Table用法 -->
<Table height="300" ref="editTable" border :columns="columns3" :data="goodsList"></Table>

下拉选择

选择前

选择后

render: (h, params) => {
    let _this = this;
    // 在新增一行时，Select组件会重新渲染，导致原有数据丢失，需保存当前选中值，并将Select组件转换成普通文字表示。
    // nameEdit表示当前是否为Select组件形式
    if (!params.row.nameEdit) {
      return h('span',{
        style: { 
          color: "#2d8cf0",
          cursor: "pointer"
        },
        on: {
          click: () => {
            params.row.nameEdit = true;
            // 需要将整行数据重新赋值，单个赋值在新增一行时，会被初始化数据覆盖
            _this.goodsList[params.row._index] = params.row;
          },
        },
      },params.row.name)
    } else {
      return h('Select', {        //创建一个select下拉框
        props:{                   //定义select的属性
          placeholder:'',
          value: _this.goodsList[params.row._index].name,      //初始化给下拉框赋值
          filterable: true,
          size: "small"
        },
        on: {                     //给select添加事件
            'on-change':(event) => {
                let text = event.split(",");
                params.row.name = text[1];
                params.row.nameEdit = false;
                _this.goodsList[params.row._index] = params.row;
            }
        },
      },
      // gNList为下拉数据
      _this.gNList.map((type)=>{          //循环展示下拉框数据   
          return h('Option', {
              props:{
                  value:type.gID + "," + type.gNm,
                  label:type.gNm,
              }
          }, type);
      })
      )
    }
  }

input输入

return h('input', {
	style: {
		width: '70px'
	},
	props: {
		//初始化赋值
		value: params.row.price,
		autofocus: true
	},
	on: {
		'change': (e)=>{
			if (e.target.value) {
				params.row.price = e.target.value;
				_this.goodsList[params.row._index] = params.row;
			} else {
				_this.goodsList[params.row._index] = params.row;
			}
		}
	}
});

DatePicker日期选择

return h('DatePicker', {
     props: {
         clearable: false,
         placeholder: '日期',
         value: params.row.time,
         type: 'date',
         format: 'yyyy-MM-dd',
         size: 'small'
     },
     on: {
         'on-change': (val)=>{
             params.row.time = val;
             _this.goodsList[params.row._index] = params.row;
         }
     }
 })

导出

导出数据中，部分内容会因太长而显示成##，例如

download() {
   let _this = this;
   let List = JSON.parse(JSON.stringify(_this.goodsList));
   this.$refs.editTable.exportCsv({
     filename: 'editTable' + new Date().getTime(),
     // 把操作栏去掉
     columns: _this.columns3.filter((col,index) => index != 6),
     data: List.map((k, index) => {
     	//在长度较长的字段前加上= 
       k.time = '="' + moment(k.time).format("YYYY-MM-DD") + '"';
       return k;
     })
   });
 }

Table改变行内颜色

根据条件变色

<Table id="colorRender" ref="colorTable" height="300" border :columns="columns4" :data="data4"
      :row-class-name="rowClassName" @on-row-click="rowClick"></Table>

rowClassName(row,index) {
   //row.done为每行数据的done参数，根据done参数进行渲染
   if (row.done) {
     return 'ivu-table-row-highlight';
   }
   return 'table-select-row-normal';
 }

// 使用id选择器，防止其他页面样式修改
#colorRender .ivu-table-row-highlight td{
  background-color: #eaf1beb0 !important;
}
#colorRender .table-select-row-normal td{
  background-color: #ffffff !important;
}

按CTRL键选中变色

let _this = this;
// 监听Control键的放开与按下，判断Control键是否被按住
window.addEventListener("keyup", code => {
  if (code.key === 'Control' && !code.ctrlKey) {
    _this.isCtrl = false;
  }
})
window.addEventListener("keydown", code => {
  if (code.key === 'Control' && code.ctrlKey) {
    _this.isCtrl = true;
  }
})

// rowClick():Table点击行方法
rowClick(row, index) {
  if (this.isCtrl) {
  	//保存选中数据
    this.$refs.colorTable.toggleSelect(index);
  }
},
rowClassName(row,index) {
  if (this.$refs.colorTable) {
  	//获取Table的选中行，若当前当为选中行，则改变样式
    let rows = this.$refs.colorTable.getSelection();
    for (let i = 0; i < rows.length; i++) {
      if (row.key == rows[i].key) {
      //将选中行的样式改为table-select-row
        return 'table-select-row';
      }
    }
  }
  if (row.done) {
    return 'ivu-table-row-highlight';
  }
  return 'table-select-row-normal';
}

#colorRender .table-select-row td{
  background-color: #d1f2eab0 !important;
}
#colorRender .ivu-table-row-highlight td{
  background-color: #eaf1beb0 !important;
}
#colorRender .table-select-row-normal td{
  background-color: #ffffff !important;
}