vue 动态表单的问题

Question

1,自己基于vuejs+element实现了一个动态表单，但现在遇到了一个问题，先贴代码
2，部分重要代码

<el-table
        :data="data"
        border
        style="width:100%"
        @select="select"
        @select-all="select"
        @sort-change="sortChange"
>

    <el-table-column
            v-if="option.isCheckable"
            type="selection"
    >
    </el-table-column>
    <el-table-column type="expand"
                     v-if="option.isExpand">
  
    </el-table-column>

    <el-table-column
            v-for='col in dataCol'
            v-if='col.isShow'
            :label="col.name"
            :key='col.id'
            :sortable="col.isSortable?'custom':false"
    >
    </el-table-column>

   
</el-table>
<script>
dataCol:[
        {
            id:'name',
            name:'名称',
            isShow:true,
            isSearch:true,
            placeholder:'请输入名称',
            type:'text',
            value:''
        },
        {
            id:'ip',
            name:'ip',
            isShow:true,
            isSearch:true,
            placeholder:'请输入ip',
            type:'text',
            value:''
        },
        {
            id:'port',
            name:'端口',
            isShow:true,
            isSearch:true,
            placeholder:'请输入端口',
            type:'text',
            value:''
        },
        {
            id:'codec',
            name:'编码',
            isShow:true,
            isSearch:true,
            placeholder:'请输入编码',
            type:'text',
            value:''
        },
        {
            id:'remarks',
            name:'备注',
            isShow:true,
            isSearch:true,
            placeholder:'请输入备注',
            type:'textarea',
            value:''
        },
        {
            id:'enable',
            name:'状态',
            isShow:true,
            isSearch:true,
            placeholder:'请选择状态',
            type:'select',
            select:{
                "1":'启用',
                "0":'禁用'
            },
            value:''
        },
    ]
data:[
    {
        "id":"4",
        "remarks":"",
        "createDate":"2017-09-28 11:29:36",
        "updateDate":"2017-09-28 11:29:37",
        "name":"test",
        "ip":"127.0.0.1",
        "port":"5081",
        "codec":"g729,silk",
        "enable":"1",
        "company":{
            "id":"1",
            "name":"山东省总公司",
            "sort":30,
            "type":"2",
            "parentId":"0"
        }
    },
    {
        "id":"3",
        "createDate":"2017-09-21 16:20:37",
        "updateDate":"2017-09-21 16:20:37",
        "name":"test",
        "ip":"127.0.0.1",
        "port":"5080",
        "codec":"g729,silk",
        "acct":"",
        "pwd":"",
        "regAble":"0",
        "enable":"1",
        "company":{
            "id":"1",
            "name":"山东省总公司",
            "sort":30,
            "type":"2",
            "parentId":"0"
        }
    }
]
</script>

问题一：,上面的代码对于正常的文本数据能够很好的处理，但是如果服务端返回的数据是一个key值如何在表格中转换成对应的value，比如data中行数据的enable值为1，但我真正需要显示的是datacol配置的

select:{
            "1":'启用',
            "0":'禁用'
       }

并且datacol中的select也可能是异步获取的。
问题二：
有一个展开table行的功能，并且展开行中的数据是根据datacol来动态生成的，但根据el-table-column在渲染的时候是在它的插槽作用域中，数据作用域获取不到datacol

Answer 1

方法一：查看element-ui中的el-table源码发现了props可以传入context，并且el-table-column的作用域插槽传回了一个vue的table对象，使用 props.store.table.context获取
因此部分代码如下

<el-table 
    :context='dataCol'
>
     <el-table-column type="expand"
                     label='详情'
                     v-if="option.isExpand">
        <template scope="props">
            <el-form label-position="left"
                     inline
                     class="demo-table-expand">

                <el-form-item v-for='col in props.store.table.context'
                              :label="col.name">
                    <span>{{ props.row[col.id] }}</span>
                </el-form-item>
            </el-form>
        </template>
    </el-table-column>
</el-table>

方法二：
在vue中作用域插槽内部，可以直接访问上级节点的局部变量，（权威性待确认，尝试出来的）
下面代码直接访问了col这个局部变量。

<el-table-column
        v-for='col in dataCol'
        v-if='col.isShow'
        :label="col.name"
        :key='col.id'
        :sortable="col.isSortable?'custom':false"
>
    <template scope="scope">

        <div v-if='"object" === col.type'>
            {{scope.row[col.id][col.id2]}}
        </div>
        <div v-else-if='"select" === col.type'>
            {{col.select[scope.row[col.id]]}}
        </div>
        <div v-else>
            {{scope.row[col.id]}}
        </div>

    </template>
</el-table-column>