iView表格(table)渲染(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'
      },
    })
  ])
}

bug
注意：尽量不要在render和return之间做赋值操作，赋值操作及数据改变（i++）会触发iView的render的刷新机制，会不断刷新直到报错。
如果有点击事件，将这些操作都放在事件中进行处理。

一、特定样式

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

行

通过属性 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) {
        // 通过返回的已选择数组的长度来进行一些判断
        // 处理已选择数组，将已选项中的某些值拼接成字符串，发送给后台
    }
}

五、单选

<Table border highlight-row :columns="columns" :data="list" @on-current-change="selectSingleArticle"></Table>

methods:{
    selectSingleArticle (currentRow, oldCurrentRow) {
        // 当前行的数据和上一次选择的数据
    }
}

设置默认值

// 后台返回的标志为true， 则为默认值，设置选项的_highlight 为true即为默认值
res.data.forEach((item, index) => {
    if (item.flag === 'true') {        
        item._highlight = true
    }
})
this.list = res.data || []   

六、将多选变为单选

tableData：表格数据

选择

{
    title: '选中',
    align:'center',
    key: 'checkBox',
    render:(h,params)=>{
        return h('div',[
            h('Checkbox',{
                props:{
                    value:params.row.checkBox
                },
                on:{
                    'on-change':(e)=>{
                        this.tableData.forEach((items)=>{      //先取消所有对象的勾选，checkBox设置为false
                            this.$set(items,'checkBox',false)
                        });
                        this.tableData[params.index].checkBox = e;  //再将勾选的对象的checkBox设置为true
                    }
                }
            })
        ])
    }
},

获取

let id = this.tableData.filter( (item) => {
  return item.checkBox === true
})[0].id 

回显

for (let i = 0, len = this.tableData.length; i < len; i++) {
  if (this.tableData[i].flag === true) {
    this.tableData[i].checkBox = true;
    break;
  }                
}

样式统一调整

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;
  }
}

网站导航

网站导航

作者：lesdom
链接：https://www.jianshu.com/p/4c8028a198d6
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。