element在表格中使用switch开关，单独控制

最新推荐文章于 2022-10-14 14:57:10 发布

星星上的程序媛

最新推荐文章于 2022-10-14 14:57:10 发布

阅读量3.5k

点赞数 2

分类专栏： element 前端 vue 文章标签： vue

本文链接：https://blog.csdn.net/liuy_1314/article/details/106403831

版权

前端同时被 3 个专栏收录

30 篇文章 0 订阅

订阅专栏

vue

17 篇文章 0 订阅

订阅专栏

element

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述

        <el-table-column
          v-if="columns.visible('ix02')"
          :show-overflow-tooltip="true"
          prop="ix02"
          label="是否推送"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.ix02"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="2"
              @change="handlePush(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>

:active-value="1" :inactive-value="2"注意前面一定要加“：”

handlePush(row) {
      //这里一定要反着传值。
      //比如当前值为2,传给接口的值就要是1
      //如果页面用的是span直接展示的，就传当前值就可以了
      let ix02 = row.ix02 == 2 ? 1 : 2; 
      const data = { ix02: ix02, rowsid: row.rowsid };
      console.log(data);
      pushNotice(data).then(() => {
       ...
       ...
       ...
      });
    },