Vue 插槽 slot-scope="scope"

 

===============================

===============================

默认插槽

模板Vue中，只有一个slot

 模板Vue中，slot提供默认值

 

 

 

具名插槽

当有多个slot时，每个slot有名字的插槽（name）

 

 只有template才能用 v-slot 【这个是新设计的技术 Vue2.6以后用的】

 

作用域插槽

反向传数据

 

App.vue中，必须用 template

数据从Category.vue 反向传给了App.vue的atguigu

一般是从 App.vue 给 Category.vue 传值。

 

 

 

 

 

===============================

Vue  slot-scope="scope"

 

 

status状态值为0就是代办，为1就是处置，为2就是完成

此外这里每行还有编辑，删除等功能，事件处理函数中的参数，scope.$index就是该行的下标，scope.row就是该行的数据所有消息对象，有了这两个参数我们就可以实现编辑（分配，转派，完工），删除功能，所以这个 slot-scope="scope"是非常重要的

slot-scope="scope"本质上就是一个插槽，scope的row属性有着表格一整行的数据。
它还有其他有用的属性，比如$index

作用域插槽实际上是带有数据的插槽，可以获取到父组件传递的参数，将这些参数使用到子组件插槽里

scope相当于一行的数据， scope.row相当于当前行的数据对象。
这里就是用插槽 拿到当前行 row是个内置的属性 ，vue slot的scope传递值是父作用域中的源数据改变，值会同步改变。且{{scope.$index}}可以获取当前行的index。

现在vue提供了scope 以及 scope.row 可以让我们更方便地操作数据

• slot-scope='scope' 作用域插槽中定义一个对象(这里对象被定义为scope)来存储插槽上绑定的数据的用法
• scope.row 使用ElementUI表格模板渲染数据时使用

当前行数据的获取也会用到插槽,scope相当于一行的数据， scope.row相当于当前行的数据对象

 

 

REF

https://www.cnblogs.com/sunny3158/p/17306490.html

===========================================

 

<el-table :data="form.test_conditions">
    <el-table-column label="Condition name" prop="name">
        <template slot-scope="scope">
            <el-input v-model="form.test_conditions[scope.$index].name" size="mini" placeholder="Please input condition name"></el-input>
        </template>
    </el-table-column>    
    <el-table-column>
        <template slot="header">
            <el-button size="mini" @click="addTestCondition">Add</el-button>
        </template>
        <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="deleteTestCondition(scope.$index)">delete</el-button>
        </template>
    </el-table-column>
</el-table>

 

 

============================================