Vue学习笔记之scope.row的最简单理解

阅读目录

• 0x00 概述
• 0x01 表格内开关选项

0x00 概述

本文转载，仅做记录用，原文

 

0x01 表格内开关选项

如果表单中只是对返回数据的字面量的显示，prop和slot-scope没有大的差异，开发过程中基本可以通用；

但是如果有一个表格显示的不是数据，那就需要考虑使用插槽了吗，参考

实现一个开关的选项：

我的返回值是 N Y，不能直接显示到这，而且不生效。

<el-table
      :data="targetTotalSettingData"
      :border="true">
<el-table-column
        prop="p9"
        label="是否停用"
        width="100">
          <el-switch
            v-model="data.p9"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="N"
            inactive-value="Y"
          >
          </el-switch>
      </el-table-column>
<el-table>

改成这样子，效果可以正常实现

<el-table-column prop="p9" //这个删掉也不影响 label="是否停用" width="100"> <template slot-scope="scope"> <!-- //要想在表格中每个switch都单独的控制，写法v-mode=“scope.row.自己定义” --> <el-switch v-model="scope.row.p9" active-color="#13ce66" inactive-color="#ff4949" active-value="N" inactive-value="Y" > </el-switch> </template> </el-table-column>

总结：后来想了一下官网给的示例没有说要用到插槽，但是prop绑定值就出不了效果；

原因是，我的开关是显示在表格内部的，所以当表格数据多条时，每个表格都有单独的开关值；

官网的示例，开关在表单里，所以没有指出要用 slot-scope。那么这样结论呼之欲出了。slot-scope比prop多了一个表格内显示的特性。