SC-FE

主题

返回顶部

代码演示 ​

基础表格 ​

最简单的用法，只需配置 columns 和 dataSource

基础表格 | 最简单的表格示例
<template>
  <ScTable :columns="columns" :dataSource="dataSource"></ScTable>
</template>
<script lang="ts">
import { type TableColumn, type DataSourceConfig } from "sc-business-ui";

type Data = {
  dataSource: DataSourceConfig,
  columns: TableColumn[]
}

export default {
  data(vm): Data {
    return {
      dataSource: {
        url: "/mock"
      },
      columns: [
        {
          dataIndex: 'index',
          valueType: 'index',
          title: '序号',
          width: 80
        },
        {
          title: '姓名',
          dataIndex: 'name'
        },
        {
          title: '年龄',
          dataIndex: 'age'
        },
        {
          title: '状态',
          dataIndex: 'state',
          search:{
            allOptionLabel:'全部状态'
          },
          valueType: 'tag',
          valueDict: [
            {
              label: '正常',
              value: '0',
              status: 'success'
            },
            {
              label: '异常',
              value: '1',
              status: 'error'
            }
          ]
        }
      ] as TableColumn[],
    };
  }
};
</script>
<style lang=""></style>

离线表格（完整功能） ​

离线模式下的完整功能展示：工具栏、搜索、分页、排序、筛选、编辑等

离线表格 | 本地数据操作，包含所有常用配置
<template>
  <ScTable
    :toolbar="toolbar"
    :columns="columns"
    v-model:tableData="tableData"
    :offline="true"
    :modalForm="modalForm"
    :pagination="pagination"
    :selectedRow="selectedRow"
    :scrollTable="true"
    :tableSize="'small'"
    :columnEmptyText="'-'"
    @onLoad="handleLoad"
    @onSearch="handleSearch"
    @onReset="handleReset"
    @selectRow="handleSelectRow"
     :search="{
    mode:'column'
  }"
  ></ScTable>
</template>
<script lang="ts">
import { type TableColumn, type ToolbarType, type SearchType, type ModalFormType } from "sc-business-ui";

type Data = {
  toolbar: ToolbarType,
  columns: TableColumn[],
  search: SearchType,
  pagination: any,
  selectedRow: string[],
  tableData: any[],
  modalForm: ModalFormType
}

export default {
  data(vm): Data {
    return {
      tableData: [
        { id: 1, name: '张三是一个非常长的名字用来测试提示功能', like: '1', age: 25, time: '09:00:00', state: '0' },
        { id: 2, name: '李四', like: '2', age: 30, time: '10:30:00', state: '1' },
        { id: 3, name: '王五的全名特别长需要悬停才能看完整', like: '3', age: 28, time: '14:15:00', state: '2' },
        { id: 4, name: '赵六', like: '1', age: 35, time: '16:45:00', state: '0' },
      ],
      modalForm: {
        addTitle: '新增用户',
        editTitle: '编辑用户',
        width: 600
      },
      toolbar: {
        title: "用户管理",
        subTitle: "管理系统用户",
        tooltip: "这是用户管理提示信息",
        actions: [
          {
            key: "add",
            text: "新增用户",
          },
          "export"
        ],
        settings: [
          "reload",
          {
            key: "fullscreen",
            tooltip: "全屏",
          },
        ],
      } as ToolbarType,
      pagination: {
        pageSize: 10,
        showSizeChanger: true,
        showQuickJumper: true,
        showTotal: (total: number) => `共 ${total} 条`
      },
      selectedRow: [],
      columns: [
        {
          dataIndex: 'index',
          valueType: 'index',
          title: '序号',
          width: 80,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '姓名',
          dataIndex: 'name',
          tooltip: '姓名提示',
          copyable: true,
          columnTooltip: true,
          noWrap: true,
          width: 120,
          formItemCol: {
            span: 12
          },
          formItem: {
            label: '姓名',
            rules: [
              {
                required: true,
                message: '姓名不能为空'
              }
            ]
          }
        },
        {
          title: '喜欢',
          dataIndex: 'like',
          valueType: 'tag',
          width: 100,
          align: 'center',
          onFilter: true,
          valueDict: [
            {
              label: '唱跳',
              value: '1',
              status: 'success'
            },
            {
              label: '篮球',
              value: '2',
              status: 'warning'
            },
            {
              label: 'rap',
              value: '3',
              status: 'error'
            }
          ],
          tooltip: '喜欢提示',
          formItemCol: {
            span: 12
          },
          formItem: {
            label: '喜欢'
          }
        },
        {
          title: '年龄',
          dataIndex: 'age',
          width: 100,
          align: 'center',
          search: false,
          tooltip: '年龄提示',
          sorter: true,
          valueType: 'number',
          fieldProps: {
            min: 0,
            max: 150
          }
        },
        {
          title: '时间',
          dataIndex: 'time',
          valueType: 'time',
          width: 150,
          tooltip: '时间提示',
          formItemCol: {
            span: 12
          },
          fieldProps: {
            format: 'HH:mm:ss'
          }
        },
        {
          title: '状态',
          dataIndex: 'state',
          valueType: 'state',
          width: 120,
          align: 'center',
          valueDict: [
            {
              label: '正常',
              value: '0',
              status: 'success'
            },
            {
              label: '异常',
              value: '1',
              status: 'error'
            },
            {
              label: '申请中',
              value: '2',
              status: 'processing'
            }
          ],
          formItem: {
            label: '状态',
            rules: [
              {
                required: true,
                message: '请选择状态'
              }
            ]
          }
        },
        {
          title: '操作',
          key: 'option',
          tooltip: '有内置的一些操作',
          width: 300,
          align: 'center',
          fixed: 'right',
          cellOption: [
            'edit',
            'delete',
            'view'
          ]
        }
      ] as TableColumn[],
    };
  },
  methods: {
    handleLoad() {
      console.log('表格加载完成')
    },
    handleSearch(params: any) {
      console.log('搜索:', params)
    },
    handleReset() {
      console.log('重置搜索')
    },
    handleSelectRow(selectedRowKeys: string[]) {
      console.log('选中行:', selectedRowKeys)
      this.selectedRow = selectedRowKeys
    }
  }
};
</script>
<style lang=""></style>

自定义工具栏表格 ​

自定义工具栏
<template>
  <ScTable
    :columns="columns"
    :search="false"
    :toolbar="{
      title: '自定义工具栏',
      actions: [
        {
          key: 'add',
          text: '新增按钮',
          type: 'dashed',
          style: { color: 'red' },
        },
        {
          text: '跳转百度',
          type: 'primary',
          icon: 'ChromeOutlined',
          onClick: customAction,
        },
      ],
      settings: [
        {
          key: 'reload',
          icon: 'RedoOutlined',
          style: {
            animation: 'spin 2s linear infinite',
          },
        },
        {
          key: 'fullscreen',
          style: { color: 'red' },
        },
        {
          icon: 'PayCircleOutlined',
          tooltip:'Money,Money,Money,Money,Money,Money,Money',
          style: { color: '#FCB72C' },
          onClick:click
        },
      ],
    }"
  />
</template>
<script>
// import { message } from 'ant-design-vue';
export default {
  data() {
    return {
      columns: [
        {
          title: "姓名",
          dataIndex: "name",
        },
        {
          title: "年龄",
          dataIndex: "age",
        },
        {
          title: "地址",
          dataIndex: "address",
        },
      ],
    };
  },
  methods: {
    customAction() {
      // window.open("https://www.baidu.com");
    },
    click(){
        message.info('点击money按钮')
    }
  },
};
</script>
<style>
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

带内置操作表格 ​

只需要传入接口，新增编辑删除自动内部处理请求

内置编辑表格
<template>
  <sc-table
    :columns="columns"
    :dataSource="dataSource"
    :toolbar="toolbar"
    :search="{
     mode: 'column', 
  }"
  ></sc-table>
</template>
<script lang="ts">
import {
  type ToolbarType,
  type TableColumn,
  type ModalFormType,
  type DataSourceConfig,
  type FormRequestType,
} from "sc-business-ui";
type Data = {
  dataSource: DataSourceConfig;
  toolbar: ToolbarType;
  columns: TableColumn[];
  modalForm: ModalFormType;
  formRequest: FormRequestType;
};
export default {
  data(vm):Data {
    return {
      dataSource: { url: "/mock", add: "/mock", edit: "/mock", del: "/mock", get: "/mock" },
      toolbar: {
        title: "用户管理",
        subTitle: "管理系统用户",
        tooltip: "这是用户管理提示信息",
        actions: [
          {
            key: "add",
            text: "新增用户",
          },
        ],
        settings: [
          "reload",
          {
            key: "fullscreen",
            tooltip: "全屏",
          },
        ],
      },
      columns: [
        {
          title: "名称",
          dataIndex: "name",
          valueType: "text",
          tooltip: "姓名",
          copyable: true,
          formItem: { rules: [{ required: true, message: "请输入姓名" }] },
        },
        {
          title: "状态",
          dataIndex: "state",
          valueType: "state",
          valueDict: [
            { label: "启用", value: "1", status: "success" },
            { label: "禁用", value: "0", status: "error" },
            { label: "未知", value: "2", status: "error" },
          ],
        },
        {
          title: "操作",
          key: "option",
          cellOption: ["edit", "delete"],
        },
      ],
    };
  },
};
</script>
<style lang=""></style>

行内编辑表格 ​

并支持自定义内置操作按钮或新增操作按钮

行内编辑表格 | 修改文字和icon
<template>
      <sc-table
        :columns="columns"
        :dataSource="dataSource"
        :toolbar="toolbar"
      ></sc-table>
  </template>
  <script lang="ts">
  // import { message } from "ant-design-vue";
  import {
  type ToolbarType,
  type TableColumn,
  type DataSourceConfig,
} from "sc-business-ui";
type Data = {
  dataSource: DataSourceConfig;
  toolbar: ToolbarType;
  columns: TableColumn[];
};
  export default {
    data(vm):Data {
      return {
        dataSource: { url: "/mock", add: "/mock", edit: "/mock", del: "/mock", get: "/mock" },
        toolbar: {
          title: "用户管理",
          subTitle: "管理系统用户",
          tooltip: "这是用户管理提示信息",
          actions: [
            {
              key: "add",
              text: "新增用户",
            },
          ],
          settings: [
            "reload",
            {
              key: "fullscreen",
              tooltip: "全屏",
            },
          ],
        },
        columns: [
          {
            title: "名称",
            dataIndex: "name",
            valueType: "text",
            tooltip: "姓名",
            copyable: true,
            formItem: { rules: [{ required: true, message: "请输入姓名" }] },
          },
          {
            title: "状态",
            dataIndex: "state",
            valueType: "state",
            valueDict: [
              { label: "启用", value: "1", status: "success" },
              { label: "禁用", value: "0", status: "error" },
              { label: "未知", value: "2", status: "error" },
            ],
          },
          {
            title: "操作",
            key:'option',
            cellOption:[{
              key:'inlineEdit',
              text:'行内编辑',
              icon:'EditOutlined'
            },
            {
              key:'delete',
              style:{color:'red'},
              text:'删除用户'
            },{
                text:'导出',
                icon:'ExportOutlined',
                onClick:()=>{
                  // message.success('导出成功')
                }
            }],
          },
        ],
      };
    },
  };
  </script>
  <style lang=""></style>

自定义编辑弹框内容 ​

modalForm自定编辑弹框内容，formRequest自定新增编辑请求接口

编辑表格
<template>
  <sc-table
    :columns="columns"
    :dataSource="dataSource"
    :toolbar="toolbar"
    :modalForm="modalForm"
    :form-request="formRequest"
  ></sc-table>
</template>
<script lang="ts">
import {
  type ToolbarType,
  type TableColumn,
  type ModalFormType,
  type DataSourceConfig,
  type FormRequestType,
} from "sc-business-ui";
type Data = {
  dataSource: DataSourceConfig;
  toolbar: ToolbarType;
  columns: TableColumn[];
  modalForm: ModalFormType;
  formRequest: FormRequestType;
};
export default {
  data(vm): Data {
    return {
      dataSource: { url: "/mock", add: "/mock", edit: "/mock", del: "/mock", get: "/mock" },
      modalForm: {
        style: {
          width: "40%",
        },
        addTitle: "新增用户",
        editTitle: "编辑用户",
        formConfig: {
          type: "add",
          config: [
            {
              key: "input",
              type: "formItem",
              field: "name",
              props: {
                formItem: {
                  label: "自定义输入字段",
                },
              },
            },
            {
              key: "slider",
              type: "formItem",
              field: "slider",
              props: {
                formItem: { label: "滑块" },
                self: {
                  step: 10,
                  max: 100,
                  marks: {
                    0: "0°C",
                    26: "26°C",
                    47: "47°C",
                    100: { style: { color: "#f50" }, label: "100°C" },
                  },
                },
              },
            },
          ],
        },
      },
      toolbar: {
        actions: ["add"],
        settings: ["reload"],
      },
      formRequest: {
      },
      columns: [
        {
          title: "名称",
          dataIndex: "name",
          valueType: "text",
          tooltip: "姓名",
          copyable: true,
          formItem: { rules: [{ required: true, message: "请输入姓名" }] },
        },
        {
          title: "状态",
          dataIndex: "state",
          valueType: "state",
          valueDict: [
            { label: "启用", value: "1", status: "success" },
            { label: "禁用", value: "0", status: "error" },
            { label: "未知", value: "2", status: "error" },
          ],
        },
        {
          title: "操作",
          key: "option",
          cellOption: ["edit", "delete"],
        },
      ],
    };
  },
};
</script>
<style lang=""></style>

本地编辑表格内容 ​

设置offline可本地编辑表格数据，并支持双向绑定

编辑表格
<template>
  <sc-table
    :columns="columns"
    :toolbar="toolbar"
    :modalForm="modalForm"
    :offline="true"
    :tableData="tableData"
  ></sc-table>
</template>
<script lang="ts">
import {
  type ToolbarType,
  type TableColumn,
  type ModalFormType,
  type DataSourceConfig,
  type FormRequestType,
} from "sc-business-ui";
type Data = {
  dataSource: DataSourceConfig;
  toolbar: ToolbarType;
  columns: TableColumn[];
  modalForm: ModalFormType;
  formRequest: FormRequestType;
};
export default {
  data(vm): Data {
    return {
      tableData: [
        {
          id: "1",
          name: "张三",
          age: 32,
          like: ["1", "2"],
          address: "北京",
          state: "0",
        },
        {
          id: "2",
          name: "李四",
          age: 28,
          like: ["1"],
          address: "上海",
          time: "20:12:00",
          state: "1",
        },
        { id: "3", name: "王五", age: 45, address: "广州", state: "2" },
      ],
      modalForm: {
        style: {
          width: "40%",
        },
        addTitle: "新增用户",
        editTitle: "编辑用户",
      },
      toolbar: {
        actions: [
          {
            key: "add",
            text: "新增用户",
          },
        ],
      },
      columns: [
        {
          title: "名称",
          dataIndex: "name",
          valueType: "text",
          tooltip: "姓名",
          copyable: true,
          formItem: { rules: [{ required: true, message: "请输入姓名" }] },
        },
        {
          title: "状态",
          dataIndex: "state",
          valueType: "state",
          valueDict: [
            { label: "启用", value: "1", status: "success" },
            { label: "禁用", value: "0", status: "error" },
            { label: "未知", value: "2", status: "error" },
          ],
        },
        {
          title: "操作",
          key: "option",
          cellOption: [
            { text: "行内编辑", key: "inlineEdit" },
            "edit",
            "delete",
          ],
        },
      ],
    };
  },
};
</script>
<style lang=""></style>