Avue 在表格中使用el-switch

1.基础环境版本如下：

npm:8.11.0

node: 16.15.1

vue: 3.2.40

element-plus: 2.2.22

@smallwei/avue: 3.2.5

2.效果图如下:

3.代码实现如下：

<template>
  <div class="execution">
    <basic-container>
      <avue-crud
        ref="crud"
        v-model:page="page"
        :data="tableData"
        :permission="permissionList"
        :table-loading="tableLoading"
        :option="tableOption"
        @on-load="getList"
        @search-change="searchChange"
        @refresh-change="refreshChange"
        @size-change="sizeChange"
        @current-change="currentChange"
        @row-update="handleUpdate"
        @row-save="handleSave"
        @row-del="rowDel">
        <template #menu-left="{}">
          <el-button
            v-if="permissions.sys_abutment_add"
            class="filter-item"
            type="primary"
            icon="el-icon-edit"
            @click="$refs.crud.rowAdd()">添加
          </el-button>
        </template>
        <template #status="scope">
          <el-switch v-model="scope.row.status" :active-value="0" :inactive-value="1" @change="switChange(scope.row)"></el-switch>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import { tableOption } from '@/const/crud/admin/abutment'
import { mapGetters } from 'vuex'
  
export default {
  name: 'abutment',
  components: { },
  data() {
    return {
      searchForm: {},
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      tableLoading: false,
      tableOption: tableOption
    }
  },
  computed: {
    ...mapGetters(['permissions']),
    permissionList() {
      return {
        addBtn: this.validData(this.permissions.sys_abutment_add, false),
        delBtn: this.validData(this.permissions.sys_abutment_del, false),
        editBtn: this.validData(this.permissions.sys_abutment_edit, false)
      }
    }
  },
  methods: {
    handleRefreshChange() {
      this.getList(this.page)
    },
    getList(page, params) {
      const list = {
        total: 3,
        records: [
          { id: 1,
            systemName: '对接系统1',
            clientSecret: 'zzz',
            permission: ['1', '2'],
            whitelist: '192.168.0.99',
            createTime: '2022-11-19 10:06:35',
            status: 0
          },
          { id: 2,
            systemName: '对接系统1',
            clientSecret: 'zzz',
            permission: ['0', '3'],
            whitelist: '192.168.0.99',
            createTime: '2022-11-19 10:06:35',
            status: 1
          },
          { id: 3,
            systemName: '对接系统1',
            clientSecret: 'zzz',
            permission: ['2', '5'],
            whitelist: '192.168.0.99',
            createTime: '2022-11-19 10:06:35',
            status: 0
          }
        ]
      }
      this.tableData = list.records
      this.page.total = list.total
    },
    rowDel(row, index) {
    },
    handleUpdate(row, index, done, loading) {
    },
    handleSave(row, done, loading) {
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },
    currentChange(current) {
      this.page.currentPage = current
    },
    searchChange(form, done) {
      this.searchForm = form
      this.page.currentPage = 1
      this.getList(this.page, form)
      done()
    },
    refreshChange() {
      this.getList(this.page)
    },
    // 状态开关操作
    switChange(row) {

    }
  }
}
</script>

4.表格配置项Option如下所示：

export const tableOption = {
  border: true,
  index: true,
  indexLabel: '序号',
  indexWidth: 60,
  stripe: true,
  menuAlign: 'center',
  align: 'center',
  addBtn: false,
  refreshBtn: false,
  showClomnuBtn: false,
  searchMenuSpan: 6,
  column: [{
    label: '对接系统',
    prop: 'systemName',
    search: true,
    editDisabled: true,
    rules: [{
      required: true,
      message: '请输入对接系统名称',
      trigger: 'blur'
    }]
  }, {
    label: '密钥',
    prop: 'clientSecret',
    rules: [{
      required: true,
      message: '请输入密钥',
      trigger: 'blur'
    }]
  }, {
    label: '接口权限',
    prop: 'permission',
    type: 'select',
    multiple: true,
    filterable: true,
    border: true,
    span: 24,
    dicData: [{
      label: '档案新增',
      value: '0'
    }, {
      label: '档案修改',
      value: '1'
    },
    {
      label: '档案审核',
      value: '2'
    }, {
      label: '签约新增',
      value: '3'
    },
    {
      label: '签约修改',
      value: '4'
    }, {
      label: '签约审核',
      value: '5'
    }],
    rules: [{
      required: true,
      message: '请选择接口权限',
      trigger: 'blur'
    }]
  }, {
    label: 'ip白名单',
    prop: 'whitelist',
    type: 'textarea',
    placeholder: '请输入 ip白名单，ip间请用;相隔',
    minRows: 3,
    row: true,
    span: 24,
    rules: [{
      required: true,
      message: '请输入ip白名单',
      trigger: 'blur'
    }]
  }, {
    label: '状态',
    prop: 'status',
    type: 'radio',
    slot: true,
    value: 0,
    dicData: [{
      label: '启用',
      value: 0
    }, {
      label: '停用',
      value: 1
    }]
  }, {
    width: 150,
    label: '创建时间',
    prop: 'createTime',
    type: 'datetime',
    addDisplay: false,
    editDisabled: true,
    format: 'YYYY-MM-DD HH:mm',
    valueFormat: 'YYYY-MM-DD HH:mm:ss',
    rangeSeparator: '-',
    search: true,
    searchRange: true
  }]
}