Element框架中的Switch按钮在table表单无法使用问题


一、 今天在学习Element框架的时候遇到一个小坑,就是把Switch开关放到table标签里面,就无法使用了,经过漫长时间的查找发现这么写可以解决,

<el-table-column fixed="right" label="状态" width="150" height="50px">
      <template slot-scope='scope'>
       <el-switch
        style="display: block"
        v-model="value2"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-text="启用"
        inactive-text="禁用"
      >
      </el-switch>
       </template>
      </el-table-column>

但是这么写了以后他又出问题了,就是
image

大致意思就是:scope定义了没有被使用,对于一个前端小白来说,这个玩意怎么会报错呢,于是又开始一番搜索百度,终于功夫不负有心人让我找到了,问我发现这个slot-scope属性里面定义了值后还得在v-model里使用v-model="scope.row.自己定义的值",否则就会报错

 <template slot-scope='scope'>
       <el-switch
        style="display: block"
        v-model="scope.row.value2"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-text="启用"
        inactive-text="禁用"
      >
      </el-switch>
       </template>

加上以后,你就会发现小开关终于能用了,不容易啊,完结撒花✿✿ヽ(°▽°)ノ✿✿✿ヽ(°▽°)ノ✿


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM