代码演示

查询表格

查询表格|自动生成搜索栏工具栏

<template>
  <ScTable :toolbar="toolbar" :columns="columns" :dataSource="dataSource"
    :beforeDataLoad="(params) => { console.log(params); return params }"></ScTable>
</template>
<script lang="ts">
import { type TableColumn,type ToolbarType,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: "全屏",
            },
          ],
        } as ToolbarType,
      columns: [
      {
          dataIndex: 'index',
          valueType: 'index',
          title: '序号',
          width: 80,
        },
        {
          title: '姓名',
          dataIndex: 'name',
          tooltip: '姓名提示',
          copyable: true,
          formItemCol: {
            span: 12
          },
          formItem: {
            rules: [
              {
                required: true,
                message: '姓名不能为空'
              }
            ]
          }
        },
        {
          title: '喜欢',
          dataIndex: 'like',
          valueType: 'tag',
          onFilter: true,
          valueDict: [
            {
              label: '唱跳',
              value: '1',
              status: 'success'
            },
            {
              label: '篮球',
              value: '2',
              status: 'warning'
            },
            {
              label: 'rap',
              value: '3',
              status: 'error'
            }
          ],
          filters: true,
          tooltip: '喜欢提示',
          formItemCol: {
            span: 12
          }
        },
        {
          title: '年龄',
          dataIndex: 'age',
          search: false,
          tooltip: '年龄提示',
          sorter: true
        },
        {
          title: '时间',
          dataIndex: 'time',
          valueType: 'time',
          tooltip: '时间提示',
          formItemCol: {
            span: 12
          }
        },
        {
          title: '状态',
          dataIndex: 'state',
          valueType: 'state',
          width: 120,
          formItem: false,
          valueDict: [
            {
              label: '正常',
              value: '0',
              status: 'success'
            },
            {
              label: '异常',
              value: '1',
              status: 'error'
            },
            {
              label: '申请中',
              value: '2',
              status: 'processing'
            }
          ]
        },
        {
          title: '操作',
          key: 'option',
          tooltip: '有内置的一些操作',
          width: 300,
          cellOption: [
            {
              text: '查看',
              onClick:()=>{}
            },
          ]
        }
      ]as TableColumn[],
    };
  },
};
</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"
  ></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>