iView表格(table)渲染(render)

零、render

1、语法

以下分别定义了：标签名称，（样式，事件等综合内容），显示内容

render: (h, params) => {
    return h('span', {
                style: {
                    color: '#FF7D41'
                },
                on: {
                    click: () => {
                        console.log(params)
                    }
                }
            }, '点击');
}

2、简单例子

render: (h, params) => {
    return h('span', 'hello');
}

3、同时显示多个内容

render: (h, params) => {
    return h('div', [
        h('span', params.row.name),
        h('span', ' ('+params.row.age+')')
    ]);
}

4、对数据进行处理

在数据返回之前可以进行任何数据处理

1>时间格式转换

render: (h, params) => {
    let time = this.$moment(params.row.time).format('YYYY-MM-DD HH:mm:ss')
    return h('span', time);
}

2>数据处理：数组拼接字符串等

render: (h, params) => {
    let str = ''
    for (let i = 0, len = params.row.arr.length; i < len; i++) {
        str += `${params.row.arr[i].name}-${params.row.arr[i].age} | `
    }
    return h('span', str);
}

3>多情况判断

render: (h, params) => {
    if (params.row.age > 18) {
        return h('span', '未成年');
    }else {
        return h('span', '成年');
    }
}

render: (h, params) => {
    switch (params.row.num) {
        case 1:
            return h('span', '你');
            break;
        case 2:
            return h('span', '好');
            break;
        case 3:
            return h('span', '啊');
            break;
    }
}

4>点击事件

render: (h, params) => {
    return h('span', {               
                on: {
                    click: () => {
                        // 这里通常做路由跳转，弹窗显示，发送请求等
                    }
                }
            }, '点击');
}

5>样式处理：文本溢出以省略号显示

render: (h, params) => {
    return h('span', {
                style: {
                    display: 'inline-block',
                    width: params.column._width*0.9+'px',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap',
                }
            }, params.row.name);
}

6>悬浮以气泡显示内容

render: (h, params) => {
    return h('div', [
        h('Tooltip', {
                props: {
                    placement: 'top',
                }        
            }, [
                params.row.content, // 表格显示文字
                h('div', {
                        slot: 'content',
                        style: {
                            whiteSpace: 'normal'
                        }
                    }, params.row.content // 气泡内的文字
                )
            ])
    ]);
}

7>悬浮以气泡显示内容并添加表格显示图片

render: (h, params) => {
    return h('div', [
        h('Tooltip', {
                props: {
                    placement: 'top',
                }        
            }, [
                h('div',[
                    h('span', params.row.content),
                    h('img', {
                        attrs: {
                            // 图片需放在static文件夹下
                            src: '../../../static/img/calibration-tip.svg'
                        },
                        style: {
                            marginBottom: '3px'
                        }
                    })
                ]), // 表格列显示文字和图片
                h('div', {
                        slot: 'content',
                        style: {
                            whiteSpace: 'normal'
                        }
                    }, params.row.content // 气泡内的文字
                )
            ])
    ]);
}

8>显示图片

render: (h, params) => {
  return h('div', [
    h('img', {
      domProps: {
        'src': params.row.img
      },
      style: {
        display: 'block',
        width: '30px',
        height: '30px',
        borderRadius: '3px',
        // margin: '0 auto'
      },
    })
  ])
}

一、特定样式

给某行，某列添加不同的背景色

行

通过属性 row-class-name 可以绑定一个方法，参数为row和index，row会返回每一行的数据，可以通过判断每行的某个属性是否为自己想要的值来为这一行添加一个类名，再通过这个类名来添加样式。index会返回每行的索引，添加样式同理。

<Table :row-class-name="rowClassName" :columns="columnsRow" :data="dataRow"></Table>

.ivu-table .demo-table-row td{
    background-color: #2db7f5;
    color: #fff;
}

data () {
    return {
        columnsRow: [
            {
                title: 'Name',
                key: 'name'
            },
            {
                title: 'Age',
                key: 'age'
            }
        ],
        dataRow: [
            {
                name: 'lee',
                age: 18
            },
            {
                name: 'hello',
                age: 21
            }
        ],
    }   
},
methods:{
    rowClassName (row, index) {
        if (index === 1) {
            return 'demo-table-row';
        }
        if (row.age === 18) {
            return 'demo-table-row';
        }
        return '';
    }
}

列

通过给列 columns 设置字段 className 可以给某一列指定一个样式。

<Table :columns="columnsCol" :data="dataCol"></Table>

.ivu-table td.demo-table-column{
    background-color: #2db7f5;
    color: #fff;
}

data () {
    return {
        columnsCol: [
            {
                title: 'Name',
                key: 'name'
            },
            {
                title: 'Age',
                key: 'age',
                className: 'demo-table-column'
            }
        ],
        dataCol: [
            {
                name: 'lee',
                age: 18
            },
            {
                name: 'hello',
                age: 21
            }
        ],
    }    
},

二、滚动条

纵向滚动条

<Table height="200" :columns="columns" :data="data"></Table>

横向滚动条

当所有列的宽度超出table父元素或本身定义的宽度时出现

<Table width="800" border :columns="columns" :data="data"></Table>

columns: [
    {
        title: 'Name',
        key: 'name',
        width: 400,
    },
    {
        title: 'Age',
        key: 'age',
        minWidth: 500
    }
],

三、固定列

columns: [
    {
        title: 'Name',
        key: 'name',
        width: 100,
        fixed: 'left'
    },
    {
        title: 'Age',
        key: 'age',
        width: 100,
        fixed: 'right',
    }
],

四、多选

@on-selection-change，只要选中项发生变化时就会触发，返回值为 selection，已选项。

<Table @on-selection-change="getSelection" :columns="columns" :data="data"></Table>

columns: [
    {
        type: 'selection',
        width: 60,
        align: 'center'
    },     
    {
        title: 'Name',
        key: 'name',
    },
    {
        title: 'Age',
        key: 'age',
    }
],

methods:{
    getSelection (selection) {
        // 通过返回的已选择数组的长度来进行一些判断
        // 处理已选择数组，将已选项中的某些值拼接成字符串，发送给后台
    }
}

样式统一调整

1、内容居中

.ivu-table th, .ivu-table td {
    text-align: center;
}

2、内容单元格高度

.ivu-table td {
    height: 37px;
}

3、背景色

.ivu-table-row-highlight td, .ivu-table-stripe .ivu-table-body tr.ivu-table-row-highlight:nth-child(2n) td, .ivu-table-stripe .ivu-table-fixed-body tr.ivu-table-row-highlight:nth-child(2n) td, tr.ivu-table-row-highlight.ivu-table-row-hover td{
  background-color:#FFF3F3;
}

4、右侧固定列样式

.ivu-table-fixed-right{
  box-shadow: -2px 2px 6px -2px rgba(0, 0, 0, 0.2);
  tr td, th {
    text-align: center;
  }
}