在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>