标签： vue

我在使用element-ui的table的控件的时候，对其中的template很好奇，使用slot-scope字段可以透传 当前row的相关信息，在react.js做列表控件的时候，就想着也实现一个类似的。

我没有仔细研究element-ui的代码是如何实现的，不过 javascript有一个Function函数，正好也在 做这个相关的功能，所以就用这个函数弄了一个类似的。

function rend_scope(t, key, slot) {
    if(!t.props['slot-scope']) {
        return (<Fragment key={key}>{React.createElement(
            t.type,
            t.props,
        )}</Fragment>);
    }
    let scope = t.props['slot-scope'];
    if(!scope.startsWith('{')) {
        let newprops = {...t.props};
        newprops[scope] = slot;
        return (<Fragment key={index2}>{React.createElement(
            t.type,
            newprops,
        )}</Fragment>);
    } else {
        let result = null;
        let looseJsonParse = (obj)=>{
            return Function('"use strict";return (' + obj + ')')()(slot);
        };
        let s = `function(${scope}=slot){return ${scope};}`;
        result = looseJsonParse(s);
        return (<Fragment key={index2}>{React.createElement(
            t.type,
            {...t.props, ...result},
        )}</Fragment>);
    }
};

上面的代码首先判断是否存在slot-scope， 不存在的话，则动态创建。

如果存在的话，则判断是否是'{‘开头的，如果不是，则是将slot的作为props指定字段的值插入，然后动态创建。

如果是'{‘开头的话，表示要提取slot中的某部分字段的内容，这些字段作为props中指定的字段和值插入，然后动态创建。 这里使用了Function的功能，首先将slot-scope中的字符串拼接为一个简单的字段提取的函数， 上面变量s中字符串 函数的功能就是提取object中指定字段的功能，虽然通过分割slot-scope中的字符串，然后对object通过 数组方式读取也可以，我还是喜欢通过Function的功能，这样如果某个字段填写有问题的话，执行到会直接报错的，报错后 位置也好找。looseJsonParse里面的功能就是生成新的js的函数并且执行，因为动态生成函数后，执行的参数是slot， 而之前s的函数就变成了是返回slot中某些字段的内容并组成新的object了，最后将这部分和老的props合并并动态生成。

第2部分的判断如果用第3部分来做的话，则是将slot的整体与老的props合并，与我想要的结果并不同。