sf-enable-switch 启用/禁用开关组件

sf-enable-switch 介绍

1.该组件是对el-switch进行了二次封装；
2.主要用于管理页面列表中，数据的启用/禁用状态列显示，并提供开关形式的启用/禁用操作
3.当需要使用按钮权限限制时，可通过permissionCheck属性进行启用权限check,配合v-permission-btn指令使用

注：本文只罗列出封装的一些属性/方法，其余为Element组件原生属性
参照Element-UI官方文档
https://element.eleme.cn/#/zh-CN/component/switch

sf-enable-switch Attributes

sf-enable-switch Methods

使用sf-enable-switch显示效果（以下例子是截取部分用户表的信息）

<template>
  <div class="sf-container sys-user-mgt">
    <sf-table
      ref="dataTable"
      :action="getPage"
    >
      <!-- 复选框 -->
      <el-table-column type="selection" width="44"></el-table-column>

      <!-- 用户名 -->
      <el-table-column
        :label="$L_Label('loginName')"
        prop="loginName"
        width="150"
      ></el-table-column>

      <!-- 真实姓名 -->
      <el-table-column
        :label="$L_Label('realName')"
        prop="realName"
        width="150"
      ></el-table-column>

      <!-- 电话号码 -->
      <el-table-column
        :label="$L_Label('tel')"
        prop="tel"
        width="120"
      ></el-table-column>

      <!-- 邮箱 -->
      <el-table-column
        :label="$L_Label('mail')"
        prop="mail"
        width="180"
        show-tooltip-when-overflow
      ></el-table-column>

      <!-- 状态 -->
      <el-table-column :label="$C_Label('status')" width="80">
        <template slot-scope="{ row }">
          <sf-enable-switch
            :value="row.status"
          ></sf-enable-switch>
        </template>
      </el-table-column>

    </sf-table>
  </div>
</template>

<script>
import lang from '@/mixins/lang'
import {
  getPage
} from '@/api/system/sysUserMgt'

export default {
  mixins: [lang],
  langPrefix: 'system.sysUserMgt',
  data() {
    return {
      getPage
    }
  },

  methods: {
  }
}
</script>

未开启权限判断时（未使用permissionCheck属性）的效果

开启权限判断时（使用permissionCheck属性）的使用

<template>
  <div class="sf-container sys-user-mgt">
    <sf-table
      ref="dataTable"
      :action="getPage"
    >
      ...

      <!-- 状态 -->
      <el-table-column :label="$C_Label('status')" width="80">
        <template slot-scope="{ row }">
          <sf-enable-switch
            :value="row.status"
            v-permission-btn.sysUserMgt.switch
            permission-check
          ></sf-enable-switch>
        </template>
      </el-table-column>

    </sf-table>
  </div>
</template>

<script>
import lang from '@/mixins/lang'
import {
  getPage
} from '@/api/system/sysUserMgt'

export default {
  mixins: [lang],
  langPrefix: 'system.sysUserMgt',
  data() {
    return {
      getPage
    }
  },

  methods: {
  }
}
</script>

未开启权限判断时（使用permissionCheck属性）的效果