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'
      },
    })
  ])
}

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

 

 

 

 

轉載鏈接：https://www.jianshu.com/p/4c8028a198d6