美文网首页前端的零零碎碎
关于Element UI Table 的 slot-scope

关于Element UI Table 的 slot-scope

作者: 一个儿子叫Python的前端 | 来源:发表于2020-06-11 11:22 被阅读0次

    在element的table组件中经常使用slot-scope(作用域插槽)来实现数据传递的需求,究竟什么是slot-scope?

    个人认为可以把它看作是传递数据的对象。

    实际上vue原生slot-scope 的值将被用作一个临时变量名,可以接收父组件传过来的值,而在element中的table对slot-scope的值封装成了一个大的对象,对象里面有属性row(行),column(列),$index(索引),store,所以我们可以通过scope.row拿到对应的值。

    <el-table :data="addPlanRoute" border style="width:100%" @cell-dblclick="tableDbEdit">
       <el-table-column property="order1" label="顺序"></el-table-column>
       <el-table-column property="order2" label="装车点">
           <template slot-scope="scope">
               <el-input v-model="scope.row.order2" placeholder="请输入内容"></el-input>
           </template>
       </el-table-column>
    </el-table>
    

    具体 scope 的数值也可以打印出来看看

    <el-table :data="addPlanRoute" border style="width:100%" @cell-dblclick="tableDbEdit">
           <el-table-column property="order1" label="顺序"></el-table-column>
           <el-table-column property="order2" label="装车点">
               <template slot-scope="scope">
                   <el-button size="mini" type="primary" @click="add(scope1)">添加</el-button>
               </template>
           </el-table-column>
    </el-table>
    <script>
    methods:{
        add(scope1){
          console.log(scope1)
        },
    }
    </script>
    

    相关文章

      网友评论

        本文标题:关于Element UI Table 的 slot-scope

        本文链接:https://www.haomeiwen.com/subject/zuzvtktx.html