如何在iview的table单元格里实现点击事件？

Question

需求是这样的，我需要做一个表格，表头和内容全都是动态的。

从服务器端获取到数据后，最后拼装成一个二维数组slotTableData，里面的内容是自 iview 2.3 支持的 html。这样就可以在界面上显示出二维数组了。

现在突然多了个需求，要求每个单元格可以点击或者鼠标悬浮提示。iview 原生不支持单元格点击事件（有pull request但是半年没通过。开发时间不足也没时间换elementui了），本来是拼的html的div，想在里面直接使用iview的组件也不可能。

找了不少文档都说能做，但都是写在columns中的，渲染个固定内容按钮的事件倒还容易，但是我每个单元格的内容都是不同的，而且都有自己的样式，完全不知道在columns里如何读到应该是data中的数据。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;
},

数据代码（片段）

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)//这两个是用来根据value来判断class和显示文字的外部函数，返回的都是纯文本。
    let content = somefunction2(value)//
    let rst = '<div class="' + css + '"><span>' + content + '</span></div>';

    return rst;
},

原本需求比较简单，只要搞定每个单元格的css和content就搞定了，但是如果加事件，完全不知道从何下手。

Answer 1

可以写render 函数，参数里有行，列 就可以知道你是在哪个位置了
render: (h, params) => {

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

}

Answer 2

用iview 提供的render 函数h

数据里加个状态，通过

if(status){//如果当前是编辑状态的话
    h('Input',{
        props:{
            value:"点击后出现的我，可以回车返回"
        },
        on:{
            'on-enter':()=>{
                params.row.status = !params.row.status;
            }
        }
    })
}else{
    h('a'，{
        on:{
            'click':()=>{
                   params.row.status = ! params.row.status;
            }
        }
    },'擦我')
}