第九章：SaTable组件

介绍

SaTable 是参考 MineAdmin 中的 ma-crud 进行改造的, 感谢 MineAdmin提供的封装思路, 主要区别是将方法全部暴露在外部，精简大部分方法，方便开发者对每个方法进行适应自己逻辑的调整。

基本使用

基本结构图如下

插槽 Slot

插槽名称	插槽说明	案例
tableSearch	搜索区域插槽，使用a-form-item放置搜索条件
tableBeforeButtons	顶部操作按钮前置区域
tableAfterButtons	顶部操作按钮后置区域
tools	工具栏前置区域
crudContent	整个table区域	可以参考system/attachment/index.vue
column字段插槽	直接使用column中dataIndex
operationBeforeExtend	行操作列前置区域
operationCell	行操作列
operationAfterExtend	行操作列后置区域
summaryCell	总结统计行

配置

通过示例代码对sa-table进行简单理解

<template>
  <div class="ma-content-block">
    <sa-table ref="crudRef" :options="options" :columns="columns" :searchForm="searchForm">
      <!-- 搜索区 tableSearch -->
      <template #tableSearch>
        <a-col :span="8">
          <a-form-item label="文章分类" field="category_id">
            <a-tree-select v-model="searchForm.category_id" :data="[]" placeholder="请选择文章分类" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="文章标题" field="title">
            <a-input v-model="searchForm.title" placeholder="请输入文章标题" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="创建时间" field="create_time">
            <a-range-picker v-model="searchForm.create_time" :show-time="true" mode="date" />
          </a-form-item>
        </a-col>
      </template>

      <!-- Table 自定义渲染 -->
      <template #status="{ record }">
        <sa-switch v-model="record.status" @change="changeStatus($event, record.id)"></sa-switch>
      </template>
    </sa-table>

    <!-- 编辑表单 -->
    <edit-form ref="editRef" @success="refresh" />
  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue'
import { Message } from '@arco-design/web-vue'
import EditForm from './edit.vue'
import api from '../../api/news/article'

// 引用定义
const crudRef = ref()
const editRef = ref()

// 搜索表单
const searchForm = ref({
  category_id: '',
  title: '',
  create_time: [],
})

const changeStatus = async (status, id) => {
  const response = await api.changeStatus({ id, status })
  if (response.code === 200) {
    Message.success(response.message)
    crudRef.value.refresh()
  }
}

// SaTable 基础配置
const options = reactive({
  api: api.getPageList,
  recycleApi: api.getRecyclePageList,
  rowSelection: { showCheckedAll: true },
  add: {
    show: true,
    auth: ['/app/saicms/news/Article/save'],
    func: async () => {
      editRef.value?.open()
    },
  },
  edit: {
    show: true,
    auth: ['/app/saicms/news/Article/update'],
    func: async (record) => {
      editRef.value?.open('edit')
      editRef.value?.setFormData(record)
    },
  },
  delete: {
    show: true,
    auth: ['/app/saicms/news/Article/destroy'],
    func: async (params) => {
      const resp = await api.delete(params)
      if (resp.code === 200) {
        Message.success(`删除成功！`)
        crudRef.value?.refresh()
      }
    },
    realAuth: ['/app/saicms/news/Article/realDestroy'],
    realFunc: async (params) => {
      const resp = await api.realDestroy(params)
      if (resp.code === 200) {
        Message.success(`销毁成功！`)
        crudRef.value?.refresh()
      }
    },
  },
  recovery: {
    show: true,
    auth: ['/app/saicms/news/Article/recovery'],
    func: async (params) => {
      const resp = await api.recovery(params)
      if (resp.code === 200) {
        Message.success(`恢复成功！`)
        crudRef.value?.refresh()
      }
    },
  },
})

// SaTable 列配置
const columns = reactive([
  { title: '文章标题', dataIndex: 'title', width: 180 },
  { title: '文章作者', dataIndex: 'author', width: 180 },
  { title: '文章图片', dataIndex: 'image', type: 'image', width: 120 },
  { title: '文章简介', dataIndex: 'describe', width: 180 },
  { title: '浏览次数', dataIndex: 'views', width: 180 },
  { title: '排序', dataIndex: 'sort', width: 180 },
  { title: '状态', dataIndex: 'status', width: 180 },
  { title: '是否外链', dataIndex: 'is_link', dict: 'yes_or_no', width: 120 },
  { title: '链接地址', dataIndex: 'link_url', width: 180 },
  { title: '是否热门', dataIndex: 'is_hot', dict: 'yes_or_no', width: 120 },
  { title: '创建时间', dataIndex: 'create_time', width: 180, sortable: { sortDirections: ['ascend', 'descend'] } },
])

// 页面数据初始化
const initPage = async () => {}

// SaTable 数据请求
const refresh = async () => {
  crudRef.value?.refresh()
}

// 页面加载完成执行
onMounted(async () => {
  initPage()
  refresh()
})
</script>

默认配置

export default {
  // 当前crud组件的 id，全局唯一，不指定则随机生成一个
  id: undefined,
  // 主键名称
  pk: 'id',
  // 请求api方法
  api: () => {},
  // 请求回收站api方法
  recycleApi: () => {},
  // 设置分页组件每页记录数
  pageSizeOption: [10, 20, 30, 50, 100],
  // 设置选择列
  rowSelection: undefined,
  // 是否显示边框
  bordered: { wrapper: true, cell: false },
  // 每页记录数
  pageSize: 10,
  // 默认展开所有行
  expandAllRows: false,
  // 是否显示总结行
  showSummary: false,
  // 斑马线
  stripe: true,
  // 表格大小
  size: 'large',
  // 是否显示展开/折叠按钮
  isExpand: false,
  // 是否显示工具栏
  showTools: true,
  // 页面布局方式，支持 normal（标准）和 fixed（固定）两种
  pageLayout: 'fixed',
  // 简洁模式
  pageSimple: false,
  // 显示排序
  showSort: true,
  // 显示搜索
  showSearch: true,
  // 搜索提交按钮文案
  searchText: '搜索',
  // 搜索重置按钮文案
  resetText: '重置',
  // 强制搜索一行显示
  singleLine: false,

  add: {
    // 新增api
    func: undefined,
    // 显示新增按钮的权限
    auth: [],
    // 按钮文案
    text: '新增',
    // 是否显示
    show: false
  },
  edit: {
    // 编辑api
    func: undefined,
    // 显示编辑按钮的权限
    auth: [],
    // 按钮文案
    text: '编辑',
    // 是否显示
    show: false
  },
  delete: {
    // 删除api
    func: undefined,
    // 显示删除按钮的权限
    auth: [],
    // 按钮文案
    text: '删除',

    // 真实删除api
    realFunc: undefined,
    // 显示真实删除按钮的权限
    realAuth: [],
    // 真实按钮文案
    realText: '销毁',

    // 是否显示
    show: false,
    // 是否显示批量处理按钮
    batch: true
  },
  recovery: {
    // 恢复api
    func: undefined,
    // 显示恢复按钮的权限
    auth: [],
    // 显示恢复按钮的角色
    text: '恢复',
    // 是否显示
    show: false,
    // 是否显示批量处理按钮
    batch: true
  },
  import: {
    // 导入url
    url: undefined,
    // 下载模板地址
    templateUrl: undefined,
    // 显示导入按钮的权限
    auth: [],
    // 按钮文案
    text: '导入',
    // 是否显示
    show: false
  },
  export: {
    // 导出url
    url: undefined,
    // 显示导出按钮的权限
    auth: [],
    // 按钮文案
    text: '导出',
    // 是否显示
    show: false
  },

  // 列对齐方式
  columnAlign: 'left',

  // 是否显示索引列
  showIndex: false,
  // 索引列名称
  indexLabel: '序号',
  // 索引列宽度
  indexColumnWidth: 70,
  // 索引列固定方向，false 为不固定
  indexColumnFixed: 'left',

  // 是否显示操作列
  operationColumn: true,
  // 操作列宽度
  operationColumnWidth: 150,
  // 操作列名称
  operationColumnText: '操作'
}

column自动解析字段

column配置	解析情况
type: 'image'	自动解析图片展示	可以通过size属性 设置图片大小
dict: 'yes_or_no'	根据'yes_or_no'自动解析tag标签	默认有颜色，也可以自行传递colors属性作为颜色数组
options: dataList	根据dataList自动解析tag标签	默认有颜色，也可以自行传递colors属性作为颜色数组

搜索表单

搜索表单会根据值的数量，自动显示一行样式或者多行样式，也可以配置属性，强制显示一行样式

options中singleLine: true

默认排序

在searchForm对象中，加入以下数据，会自动排序

const searchForm = ref({
  name: '',
  key: '',
  group_id: '',
  orderBy: 'sort',
  orderType: 'desc',
})

统计行

options中showSummary: true

showSummary: true
summary: [
    { action: 'text', dataIndex: '在哪一列显示', text: '总计' },
    { action: 'sum', dataIndex: '哪一列求和' },
    { action: 'avg', dataIndex: '哪一列求平均值' }
]