如何在iview的table單元格里實現(xiàn)點擊事件？

需求是這樣的，我需要做一個表格，表頭和內(nèi)容全都是動態(tài)的。

從服務(wù)器端獲取到數(shù)據(jù)后，最后拼裝成一個二維數(shù)組slotTableData，里面的內(nèi)容是自 iview 2.3 支持的 html。這樣就可以在界面上顯示出二維數(shù)組了。

現(xiàn)在突然多了個需求，要求每個單元格可以點擊或者鼠標懸浮提示。iview 原生不支持單元格點擊事件（有pull request但是半年沒通過。開發(fā)時間不足也沒時間換elementui了），本來是拼的html的div，想在里面直接使用iview的組件也不可能。

找了不少文檔都說能做，但都是寫在columns中的，渲染個固定內(nèi)容按鈕的事件倒還容易，但是我每個單元格的內(nèi)容都是不同的，而且都有自己的樣式，完全不知道在columns里如何讀到應(yīng)該是data中的數(shù)據(jù)。iview 和 vue 的文檔看了好多遍 render 也沒搞清楚該怎么做。

表頭代碼

drawColumns(maximumSlot) {
    console.log('called drawColumns');
    let slotTableColumns = [{
            title: 'ID',
            key: 'nodeId',
            type: 'html',
            width: '55px',
            align: 'center',
        }];
    for (let i = 1; i <= maximumSlot; i++) {
        let slotTableColumnsBlock = {
                title: i,
                key: i,
                type: 'html',
                align: 'center',
            };
        slotTableColumns.push(slotTableColumnsBlock);
    }
    this.slotTableColumns = slotTableColumns;
},

數(shù)據(jù)代碼（片段）

get() {
    this.$http({
        url: '/api/get',
        method: 'get'
    }).then(res => {
        let slotTableData = [];
        let getData = res.data;
        for (let nodeId in res.data) {
            let slotData = {};
            slotData.nodeId = nodeId;
            let i = 1;
            for (let value of getData[nodeId]) {
                slotData[i] = this.drawBlock(value);
                i++;
            }
            slotTableData.push(slotData);
        }
        this.slotTableData = slotTableData;
    }).catch(err => {
        console.log(err);
    });
},


drawBlock(value) {
    let css = somefunction1(value)//這兩個是用來根據(jù)value來判斷class和顯示文字的外部函數(shù)，返回的都是純文本。
    let content = somefunction2(value)//
    let rst = '<div class="' + css + '"><span>' + content + '</span></div>';

    return rst;
},

原本需求比較簡單，只要搞定每個單元格的css和content就搞定了，但是如果加事件，完全不知道從何下手。

回答

編輯回答

假灑脫

可以寫render 函數(shù)，參數(shù)里有行，列就可以知道你是在哪個位置了
render: (h, params) => {

return h('div', [
    h('Button', {
        props: {
            type: 'primary',
            size: 'small'
        },
        style: {
            marginRight: '5px'
        },
        on: {
            click: () => {
                console.log(params)
            }
        }
    }, 'View')
]);

}

2017年7月17日 10:14

編輯回答

陌上花

用iview 提供的render 函數(shù)h

數(shù)據(jù)里加個狀態(tài)，通過

if(status){//如果當(dāng)前是編輯狀態(tài)的話
    h('Input',{
        props:{
            value:"點擊后出現(xiàn)的我，可以回車返回"
        },
        on:{
            'on-enter':()=>{
                params.row.status = !params.row.status;
            }
        }
    })
}else{
    h('a'，{
        on:{
            'click':()=>{
                   params.row.status = ! params.row.status;
            }
        }
    },'擦我')
}

2017年4月30日 12:31