+Vue+slot のバックアップ(No.2)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
+Vue+slot へ行く。
- 1 (2022-05-12 (木) 19:44:20)
- 2 (2022-05-12 (木) 19:54:16)

※前提条件：本文基于 Vue 2.0 创作

slot-scope

slot-scope †[edit]

在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。

取得作用域插槽:data绑定的数据，scope可以随便替换其他名称，只是定义对象来代表取得的data数据，用于使用而已。

slot-scope="scope"

总的来说就是 scope-slot就是可以用子组件里面的数据, 可以操作子组件里面的数据.

而scope-slot后面接的内容就是个别名, 或者说变量也行, 是指向子组件里data():function里面的数据.

scope.row相当于一个{},{}里边都是数据；按理说，列表里的数据是要供给表单展示，列表中的每个{}都是结构一样的，或者理解为包含的数据项相同。

<el-table :data="tableData"
  ... 省略 ...>
  <el-table-column prop="del_flg" label="标识">
    <template slot-scope="scope">
      {{ scope.row.end_flg == '1' ? 'Yes' : 'No' }}
    </template>
  </el-table-column>

... 省略 ...

data() {
   return {
     tableData: [{
       date: '2020-08-09',
       name: '张三',
       del_flg: 1
     },{
       date: '2021-06-07',
       name: '赵四',
       del_flg: 0
     },]

コメント：