当前位置:   article > 正文

element ui 表格(table)里边使用Switch开关,单独控制_el-table表格列columnoption的tabledata中加入el-switch

el-table表格列columnoption的tabledata中加入el-switch

表格部分代码 

  1. <el-table-column
  2. label="是否启用">
  3. <template slot-scope="scope">
  4. <el-switch
  5. v-model="scope.row.status"
  6. :active-value="1"
  7. :inactive-value="2"
  8. active-color="#02538C"
  9. inactive-color="#B9B9B9"
  10. @change="changeSwitch(scope.row)"/>
  11. </template>
  12. </el-table-column>
  13. // 这串代码是table里边行列数据

data数据里边

  1. // row是我从上边函数传下来的数据,可以拿到当前选中的状态值,下边的请求是因为我要传给后端调的接口
  2. this.$api.accountSwitch是我调后端的方法,我们自己封装的,在这块你们可以根据自己的写自己要调用的方法
  3. changeSwitch (row) {
  4. const data = {
  5. id: row.id,
  6. status: row.status,
  7. };
  8. this.$api.accountSwitch(data).then(res => {
  9. if (res.code === '200' || res.code === 200) {
  10. // 调用表格数据
  11. this.getTableData();
  12. } else {
  13. this.$message.error(res.msg);
  14. // 调用表格数据
  15. this.getTableData();
  16. }
  17. this.loading = false;
  18. }).catch({
  19. });
  20. },

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/天景科技苑/article/detail/740173
推荐阅读
相关标签
  

闽ICP备14008679号