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

第一次用iView，记录一下用法，方便日后查找
此篇为基础用法(2020更)

准备

在github上拉取了iView的推荐工程，搭建了一个小项目。
https://github.com/iview/iview-project

基础用法(2020更)

整体展示

<!-- iView Table用法 -->
<i-table border :columns="columns2" :data="data3"></i-table>

转码

对于需要转码的字段，可在render函数中通过switch进行选择。

{
   title: '省份',
   key: 'province',
   width: 100,
   render: (h, params) => {
	switch(params.row.province) {
		case '0':
		      return h('span','北京市');
		      break;
		case '1':
		      return h('span','杭州市');
		      break;
		case '2':
		      return h('span','上海市');
		      break;
		}
	},
   }

筛选

在表头进行筛选。

filters: [{
	    label: '北京',
	    value: '0'
	},
	{
	    label: '杭州',
	    value: '1'
	},
	{
	    label: '上海',
	    value: '2'
	}],
	filterMultiple: false, //是否多选
	filterMethod (value, row) {
		if (value === '0') {
		    return row.province === '0';
		} else if (value === '1') {
		    return row.province === '1';
		}else if (value === '2') {
		    return row.province === '2';
		}
	},

合并显示两个字段

render: (h, params) => {
	return h('span',params.row.city + params.row.detail)
}

文本超出部分…，并用Tooltip显示

render: (h, params) => {
     return h('div',[
           h('Tooltip',{
                 props: {
                       placement: "top",
                       transfer: true,
                 }
           },[
                 params.row.desc.substring(0,12)+"...",
                 h('span',{
                       slot: 'content',
                       style:{
                             width: '200px',
                             overflow: 'hidden',
                             textOverflow: 'ellipsis',
                             whiteSpace: 'normal'
                       }
                 },params.row.desc)
           ])
     ])
}

显示按钮，并定义点击事件

render:(h, params) =>{
     return h('span',[
           h('Button',{
                 props: {
                       type: 'primary',
                       size: 'small'
                 },
                 on: {
                       click: () => {
                             this.$Notice.open({
                                   title: 'render',
                                   desc: 'renderButton'
                             })
                       }
                 }
           },'查看')
     ])
}

对按钮进行样式修改，通过style

h('Button',{
      props: {
            type: 'primary',
            size: 'small'
      },
      attrs: {
            title: '删除'
      },
      style: {
            marginLeft: '2px',
            backgroundColor: 'red',
            borderColor: 'red'
      },
      on: {
            click: () => {
                  this.$Notice.open({
                        title: 'render',
                        desc: 'renderButton'
                  })
            }
      }
},'删除')

对按钮进行样式修改，通过class

.show-button{
    width: 60px;
    height: 40px;
    padding: 10px;
    background-color: aquamarine;
    color:azure
}

return h('div',[
    h('span',{
          class: "show-button",
          on: {
                click: () => {
                      this.$Notice.open({
                            title: 'render',
                            desc: 'renderButton'
                      })
                }
          }
    },'查看')
])

显示switch开关

return h('div',[
	h('i-switch',{
        style: {marginLeft: '20px'},
        props: {
              value: params.row.switch,
              size: 'middle'
        },
        on :{
              'on-change': (val) => {
                    this.$Notice.open({
                          title: 'switch',
                          desc: 'switch'
                    })
              },
        },
        [
	         h('span', {
	               slot: 'open',
	               domProps: {
	                     innerHTML: 'ON'
	               }
	         }),
	         h('span', {
	               slot: 'off',
	               domProps: {
	                     innerHTML: 'OFF'
	               }
	         })
	   ])
  },
])