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多了一个表格内显示的特性。
标签:slot,Vue,表格,示例,prop,开关,scope,row From: https://www.cnblogs.com/JetpropelledSnake/p/16833609.html