2020-04-02 TableInputer可输入表格单元组件总结

用途

点击表格单元,可直接输入数值修改数据

位置

jiaqiCrp/src/page/productManagement/planInventory/liner/basic/subs/bus/comps/TableInputer/TableInputer.js

收获

1. 通过props给子组件传值,值可以由方法返回,而且,scope-slot可以作为这个方法的参数

<template slot-scope="scope">
    <TableInputer
      :options="priceOptions(scope.row, scope.$index)"
    </TableInputer>
</template>
///
priceOptions:(row, index) => { 
    return {
        placeholder: row.name,
    }
},

2. jsx和render函数混写

render: function(h){
    const show= this.inEdit?
    <div>
        <el-button size="mini" onClick={ this.close }></el-button>
        {
            h('el-input', ...)
        }
        <el-button size="mini" onClick={ this.close }></el-button>
    </div>
    :
    <span></span>
    return show;
}