vben-admin 手册

已于 2024-04-18 16:26:08 修改
阅读量1.7k 收藏 28
点赞数 31
文章标签： 前端
于 2024-04-15 14:25:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tintin_wu/article/details/136671106
版权

BaseTable

如何使用

<BasicTable @register="registerTable">

</BasicTable>

import { BasicTable, useTable } from '@/components/Table';

const [registerTable,methodsObj ]= useTable({

        columns:tableColumns

})

树形表格

当isTreeTable为true时，开启树形表格

<BasicTable @register="register">

</BasicTable>



import { BasicTable, useTable } from '@/components/Table';

const [register, { expandAll, collapseAll, expandRows, collapseRows }] = useTable({
    isTreeTable: true,
    accordion: true, // 手风琴效果
    rowSelection: {
      type: 'checkbox',
      getCheckboxProps(record: Recordable) {
        // Demo: 第一行（id为0）的选择框禁用
        if (record.id === '0') {
          return { disabled: true };
        } else {
          return { disabled: false };
        }
      },
    },
    columns: [
        {
          title: 'ID',
          dataIndex: 'id',
          fixed: 'left',
          width: 200,
        },
        {
          title: '姓名',
          dataIndex: 'name',
          width: 150,
          filters: [
            { text: 'Male', value: 'male' },
            { text: 'Female', value: 'female' },
          ],
        },
        {
          title: '地址',
          dataIndex: 'address',
        }
    ],
    dataSource: getTreeTableData(),
    rowKey: 'id',
    showSelectionBar: true, // 显示多选状态栏

  });

远程加载数据

当你的表格需要向后台发送请求获取表格属性 useTable 参数中使用api属性属性值传请求方法，调用reload方法可刷新表格数据,

// 请求之前处理参数

  beforeFetch?: Fn;

  // 自定义处理接口返回参数

  afterFetch?: Fn;

  // 查询条件请求之前处理

  handleSearchInfoFn?: Fn;

  // 请求接口配置

  fetchSetting?: Partial<FetchSetting>;

<BasicTable @register="registerTable">
    <template #toolbar>
        <a-button type="primary" @click="handleReloadCurrent"> 刷新当前页 </a-button>
        <a-button type="primary" @click="handleReload"> 刷新并返回第一页 </a-button>
    </template>
</BasicTable>


import { BasicTable, useTable } from '@/components/Table';

  const [registerTable, { reload }] = useTable({
    title: '远程加载示例',
    api: demoListApi,
    columns: getBasicColumns(),
    pagination: { pageSize: 10 },
    fetchSetting: {
      listField: 'data.list',
      totalField: 'data.total',
    },
  });
  function handleReloadCurrent() {
    reload();
  }

  function handleReload() {
    reload({ page: 1 });
  }

自定义表格内容

用法与antD中用法一致、

    <BasicTable @register="registerTable">
      <template #bodyCell="{ column, record, text }">
        <template v-if="column.key === 'id'"> ID: {{ record.id }} </template>
        <template v-else-if="column.key === 'no'">
          <Tag color="green">
            {{ record.no }}
          </Tag>
        </template>
        <template v-else-if="column.key === 'avatar'">
          <Avatar :size="60" :src="record.avatar" />
        </template>
        <template v-else-if="column.key === 'imgArr'">
          <TableImg :size="60" :simpleShow="true" :imgList="text" />
        </template>
        <template v-else-if="column.key === 'imgs'">
          <TableImg :size="60" :imgList="text" />
        </template>

        <template v-else-if="column.key === 'category'">
          <Tag color="green">
            {{ record.no }}
          </Tag>
        </template>
      </template>
    </BasicTable>

启用Form表单查询表格数据

useTable中的useSearchForm参数设置为true，formConfig中设置表单相关内容，属性与antD中属性一致，详细查看formConfig

 <BasicTable @register="registerTable">
    <template #form-custom> custom-slot </template>
    <template #toolbar>
      <a-button type="primary" @click="getFormValues">获取表单数据</a-button>
    </template>
  </BasicTable>


  import { BasicTable, useTable } from '@/components/Table';

  const [registerTable, { getForm }] = useTable({
    title: '开启搜索区域',
    api: demoListApi,
    columns: getBasicColumns(),
    useSearchForm: true,
    formConfig: {
        labelWidth: 100,
        schemas: [
             {
              field: 'field0',
              label: '字段0',
              component: 'Input',
              colProps: {
                xl: 12,
                xxl: 8,
              },
             },
             {
            field: `field11`,
            label: `Slot示例`,
            //自定义表单
            slot: 'custom',
            colProps: {
              xl: 12,
              xxl: 8,
            },
          },
        ]
     },
    showTableSetting: true,
    tableSetting: { fullScreen: true },
    showIndexColumn: false,
    rowKey: 'id',
    rowSelection: {
      type: 'checkbox',
    },
    showSelectionBar: true, // 显示多选状态栏
  });

  function getFormValues() {
    console.log(getForm().getFieldsValue());
  }

可展开表格

expandRowByClick设置为true时，表格可展开，可配置stopButtonPropagation来阻止操作按钮的点击事件冒泡

<BasicTable @register="registerTable">
      <template #expandedRowRender="{ record }">
        <span>No: {{ record.no }} </span>
      </template>
</BasicTable>
const [registerTable] = useTable({
    api: demoListApi,
    columns: getBasicColumns(),
    rowKey: 'id',
    canResize: false,
    expandRowByClick: true,
    accordion: true, // 手风琴效果
    actionColumn: {
      width: 160,
      title: 'Action',
      dataIndex: 'action',
      fixed: 'right',
      // slots: { customRender: 'action' },
    },
  });

自定义表头

用法与antd中自定义表头用法一致

 

 <BasicTable @register="registerTable">
      <template #headerCell="{ column }">
        <template v-if="column.key === 'name'">
          <span>
            姓名
            <BasicHelp class="ml-2" text="headerHelpMessage方式2" />
          </span>
        </template>
        <template v-else-if="column.key === 'address'">
          地址
          <FormOutlined class="ml-2" />
        </template>
        <template v-else>
          <HeaderCell :column="column" />
        </template>
      </template>
    </BasicTable>
 const [registerTable] = useTable({
    title: '定高/头部自定义',
    api: demoListApi,
    columns: getCustomHeaderColumns(),
    canResize: false,
    scroll: { y: 100 },
  });

表位合计行

<BasicTable @register="registerTable" />
 function handleSummary(tableData: Recordable[]) {
    const totalNo = tableData.reduce((prev, next) => {
      prev += next.no;
      return prev;
    }, 0);
    return [
      {
        _row: '合计',
        _index: '平均值',
        no: totalNo,
      },
      {
        _row: '合计',
        _index: '平均值',
        no: totalNo,
      },
    ];
  }

const [registerTable] = useTable({
    title: '表尾行合计示例',
    api: demoListApi,
    rowSelection: { type: 'checkbox' },
    columns: getBasicColumns(),
    showSummary: true,
    summaryFunc: handleSummary,
    scroll: { x: 2000 },
    canResize: false,
    showSelectionBar: true, // 显示多选状态栏
  });

 可编辑单元格

 <BasicTable
      @register="registerTable"
      @edit-end="handleEditEnd"
      @edit-cancel="handleEditCancel"
      :beforeEditSubmit="beforeEditSubmit"
    />
const columns: BasicColumn[] = [
    {
      title: '输入框',
      dataIndex: 'name',
      edit: true,
      editComponentProps: {
        prefix: '$',
      },
      width: 200,
    },
    {
      title: '默认输入状态',
      dataIndex: 'name7',
      edit: true,
      editable: true,
      width: 200,
    },
    {
      title: '输入框校验',
      dataIndex: 'name1',
      edit: true,
      // 默认必填校验
      editRule: true,
      width: 200,
    },
    {
      title: '输入框函数校验',
      dataIndex: 'name2',
      edit: true,
      editRule: async (text) => {
        if (text === '2') {
          return '不能输入该值';
        }
        return '';
      },
      width: 200,
    },
    {
      title: '数字输入框',
      dataIndex: 'id',
      edit: true,
      editRule: true,
      editComponent: 'InputNumber',
      width: 200,
      editComponentProps: () => {
        return {
          max: 100,
          min: 0,
        };
      },
      editRender: ({ text }) => {
        return h(Progress, { percent: Number(text) });
      },
    },
    {
      title: '下拉框',
      dataIndex: 'name3',
      edit: true,
      editComponent: 'Select',
      editComponentProps: {
        options: [
          {
            label: 'Option1',
            value: '1',
          },
          {
            label: 'Option2',
            value: '2',
          },
        ],
      },
      width: 200,
    },
    {
      title: '远程下拉',
      dataIndex: 'name4',
      edit: true,
      editComponent: 'ApiSelect',
      editComponentProps: {
        api: optionsListApi,
        resultField: 'list',
        labelField: 'name',
        valueField: 'id',
      },
      width: 200,
    },
    {
      title: '远程下拉树',
      dataIndex: 'name8',
      edit: true,
      editComponent: 'ApiTreeSelect',
      editRule: false,
      editComponentProps: {
        api: treeOptionsListApi,
        resultField: 'list',
      },
      width: 200,
    },
    {
      title: '日期选择',
      dataIndex: 'date',
      edit: true,
      editComponent: 'DatePicker',
      editComponentProps: {
        valueFormat: 'YYYY-MM-DD',
        format: 'YYYY-MM-DD',
      },
      width: 200,
    },
    {
      title: '时间选择',
      dataIndex: 'time',
      edit: true,
      editComponent: 'TimePicker',
      editComponentProps: {
        valueFormat: 'HH:mm',
        format: 'HH:mm',
      },
      width: 200,
    },
    {
      title: '勾选框',
      dataIndex: 'name5',
      edit: true,
      editComponent: 'Checkbox',
      editValueMap: (value) => {
        return value ? '是' : '否';
      },
      width: 200,
    },
    {
      title: '开关',
      dataIndex: 'name6',
      edit: true,
      editComponent: 'Switch',
      editValueMap: (value) => {
        return value ? '开' : '关';
      },
      width: 200,
    },
    {
      title: '单选框',
      dataIndex: 'radio1',
      edit: true,
      editComponent: 'RadioGroup',
      editComponentProps: {
        options: [
          {
            label: '选项1',
            value: '1',
          },
          {
            label: '选项2',
            value: '2',
          },
        ],
      },
      width: 200,
    },
    {
      title: '单选按钮框',
      dataIndex: 'radio2',
      edit: true,
      editComponent: 'RadioButtonGroup',
      editComponentProps: {
        options: [
          {
            label: '选项1',
            value: '1',
          },
          {
            label: '选项2',
            value: '2',
          },
        ],
      },
      width: 200,
    },
    {
      title: '远程单选框',
      dataIndex: 'radio3',
      edit: true,
      editComponent: 'ApiRadioGroup',
      editComponentProps: {
        api: optionsListApi,
        resultField: 'list',
        labelField: 'name',
        valueField: 'id',
      },
      width: 200,
    },
  ];

  const [registerTable] = useTable({
    title: '可编辑单元格示例',
    api: demoListApi,
    columns: columns,
    showIndexColumn: false,
    bordered: true,
  });

 可编辑行

 <BasicTable @register="registerTable" @edit-change="onEditChange">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction :actions="createActions(record)" />
        </template>
      </template>
    </BasicTable>
 import {
    BasicTable,
    useTable,
    TableAction,
    BasicColumn,
    ActionItem,
    EditRecordRow,
  } from '@/components/Table';
const columns: BasicColumn[] = [
    {
      title: '输入框',
      dataIndex: 'name-group',
      editRow: true,
      children: [
        {
          title: '输入框',
          dataIndex: 'name',
          editRow: true,
          editComponentProps: {
            prefix: '$',
          },
          width: 150,
        },
        {
          title: '默认输入状态',
          dataIndex: 'name7',
          editRow: true,
          width: 150,
        },
        {
          title: '输入框校验',
          dataIndex: 'name1',
          editRow: true,
          align: 'left',
          // 默认必填校验
          editRule: true,
          width: 150,
        },
        {
          title: '输入框函数校验',
          dataIndex: 'name2',
          editRow: true,
          align: 'right',
          editRule: async (text) => {
            if (text === '2') {
              return '不能输入该值';
            }
            return '';
          },
        },
        {
          title: '数字输入框',
          dataIndex: 'id',
          editRow: true,
          editRule: true,
          editComponent: 'InputNumber',
          width: 150,
        },
      ],
    },
    {
      title: '下拉框',
      dataIndex: 'name3',
      editRow: true,
      editComponent: 'Select',
      editComponentProps: {
        options: [
          {
            label: 'Option1',
            value: '1',
          },
          {
            label: 'Option2',
            value: '2',
          },
          {
            label: 'Option3',
            value: '3',
          },
        ],
      },
      width: 200,
    },
    {
      title: '远程下拉',
      dataIndex: 'name4',
      editRow: true,
      editComponent: 'ApiSelect',
      editComponentProps: {
        api: optionsListApi,
        resultField: 'list',
        labelField: 'name',
        valueField: 'id',
      },
      width: 200,
    },
    {
      title: '远程下拉树',
      dataIndex: 'name8',
      editRow: true,
      editComponent: 'ApiTreeSelect',
      editRule: false,
      editComponentProps: {
        api: treeOptionsListApi,
        resultField: 'list',
      },
      width: 200,
    },
    {
      title: '日期选择',
      dataIndex: 'date',
      editRow: true,
      editComponent: 'DatePicker',
      editComponentProps: {
        valueFormat: 'YYYY-MM-DD',
        format: 'YYYY-MM-DD',
      },
      width: 150,
    },
    {
      title: '时间选择',
      dataIndex: 'time',
      editRow: true,
      editComponent: 'TimePicker',
      editComponentProps: {
        valueFormat: 'HH:mm',
        format: 'HH:mm',
      },
      width: 100,
    },
    {
      title: '勾选框',
      dataIndex: 'name5',
      editRow: true,

      editComponent: 'Checkbox',
      editValueMap: (value) => {
        return value ? '是' : '否';
      },
      width: 100,
    },
    {
      title: '开关',
      dataIndex: 'name6',
      editRow: true,
      editComponent: 'Switch',
      editValueMap: (value) => {
        return value ? '开' : '关';
      },
      width: 100,
    },
    {
      title: '单选框',
      dataIndex: 'radio1',
      editRow: true,
      editComponent: 'RadioGroup',
      editComponentProps: {
        options: [
          {
            label: '选项1',
            value: '1',
          },
          {
            label: '选项2',
            value: '2',
          },
        ],
      },
      width: 200,
    },
    {
      title: '单选按钮框',
      dataIndex: 'radio2',
      editRow: true,
      editComponent: 'RadioButtonGroup',
      editComponentProps: {
        options: [
          {
            label: '选项1',
            value: '1',
          },
          {
            label: '选项2',
            value: '2',
          },
        ],
      },
      width: 200,
    },
    {
      title: '远程单选框',
      dataIndex: 'radio3',
      editRow: true,
      editComponent: 'ApiRadioGroup',
      editComponentProps: {
        api: optionsListApi,
        resultField: 'list',
        labelField: 'name',
        valueField: 'id',
      },
      width: 200,
    },
  ];
const [registerTable] = useTable({
    title: '可编辑行示例',
    titleHelpMessage: [
      '本例中修改[数字输入框]这一列时，同一行的[远程下拉]列的当前编辑数据也会同步发生改变',
    ],
    api: demoListApi,
    columns: columns,
    showIndexColumn: false,
    showTableSetting: true,
    tableSetting: { fullScreen: true },
    actionColumn: {
      width: 160,
      title: 'Action',
      dataIndex: 'action',
      // slots: { customRender: 'action' },
    },
  });

function createActions(record: EditRecordRow): ActionItem[] {
    if (!record.editable) {
      return [
        {
          label: '编辑',
          disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
          onClick: handleEdit.bind(null, record),
        },
      ];
    }
    return [
      {
        label: '保存',
        onClick: handleSave.bind(null, record),
      },
      {
        label: '取消',
        popConfirm: {
          title: '是否取消编辑',
          confirm: handleCancel.bind(null, record),
        },
      },
    ];
  }

function handleEdit(record: EditRecordRow) {
    currentEditKeyRef.value = record.key;
    record.onEdit?.(true);
  }

  function handleCancel(record: EditRecordRow) {
    currentEditKeyRef.value = '';
    record.onEdit?.(false, false);
  }

  async function handleSave(record: EditRecordRow) {
    // 校验
    msg.loading({ content: '正在保存...', duration: 0, key: 'saving' });
    const valid = await record.onValid?.();
    if (valid) {
      try {
        const data = cloneDeep(record.editValueRefs);
        console.log(data);
        //TODO 此处将数据提交给服务器保存
        // ...
        // 保存之后提交编辑状态
        const pass = await record.onEdit?.(false, true);
        if (pass) {
          currentEditKeyRef.value = '';
        }
        msg.success({ content: '数据已保存', key: 'saving' });
      } catch (error) {
        msg.error({ content: '保存失败', key: 'saving' });
      }
    } else {
      msg.error({ content: '请填写正确的数据', key: 'saving' });
    }
  }

 继承父元素高度

isCanResizeParent属性值为true时，继承父级元素高度

<BasicTable @register="registerTable" />
const [registerTable] = useTable({
    api: demoListApi,
    columns: getBasicColumns(),
    useSearchForm: false,
    formConfig: getFormConfig(),
    showTableSetting: false,
    tableSetting: { fullScreen: true },
    showIndexColumn: false,
    isCanResizeParent: true,
    rowKey: 'id',
  });

useTable

 const [register,{methods}] = useTable({table-params })

返回register和methods，register用于回显表格，methods中为表格的方法

table-methods

参数说明参数　
reload刷新数据可传请求参数　
setProps修改表格的propsBasicTableProps　
getColumns获取表头信息——　
setColumns设置表头　注意：推荐使用setProps
clearSelectedRowKeys清空已选表格行——　
updateTableDataRecord不刷新表格直接更新内部数据keyValue，record

注意：

updateTableDataRecord

要求表格的rowKey属性为

string并且存在于每一行的

record的keys中

getForm获取表单数据——　

table-params 

参数说明类型默认值
clickToRowSelect点击行选中booleantrue
isTreeTable树形表格booleanfalse
accordion手风琴效果booleanfalse,isTreeTable 或 expandRowByClick 时支持
sortFn自定义排序方法Function　
filterFn排序方法Function　
inset取消表格的默认paddingbooleanfalse
showTableSetting显示表格设置booleanfalse
tableSetting设置表格设置TableSetting　
striped斑马纹booleanfalse
autoCreateKey是否自动生成keybooleantrue
summaryFunc计算合计行的方法　　
summaryData自定义合计表格内容　　
showSummary是否显示合计行booleanfalse
canColDrag是否可拖拽列booleanfalse
api接口请求对象Promise　
beforeFetch请求之前处理参数Fn　
afterFetch自定义处理接口返回参数Fn　
handleSearchInfoFn查询条件请求之前处理Fn　
fetchSetting请求接口配置Object　
immediate立即请求接口booleantrue
emptyDataIsShowTable在开起搜索表单的时候，如果没有数据是否显示表格booleantrue
searchInfo额外的请求参数Object　
defSort默认的排序参数Object　
useSearchForm使用搜索表单booleanfalse
formConfig表单配置Object　
columns列配置BasicColumn　
showIndexColumn是否显示序号列booleanfalse
indexColumnProps序号列配置Object　
actionColumn　Object　
ellipsis文本超过宽度是否显示。。。booleantrue
isCanResizeParent是否继承父级高度（父级高度-表单高度-padding高度）booleanfalse
canResize是否可以自适应高度booleantrue
resizeHeightOffset自适应高度偏移， 计算结果-偏移量number　
minHeight设置表格高度最小值number0
clearSelectOnPageChange在分页改变的时候清空选项booleanundefined
rowKey表格主键　　
dataSource数据　　
titleHelpMessage标题右侧提示string　
maxHeight表格滚动最大高度number　
bordered是否显示边框boolean　
pagination分页配置PaginationProps | boolean　
loadingloading加载boolean　
childrenColumnName指定树形结构的列名string表格支持树形数据的展示，当数据中有 children 字段时会自动展示为树形表格，如果不需要或配置为其他字段可以用 childrenColumnName 进行配置。 可以通过设置 indentSize 以控制每一层的缩进宽度
components覆盖默认的 table 元素object　
defaultExpandAllRows初始时，是否展开所有行boolean　
defaultExpandedRowKeys默认展开的行string[]　
expandedRowKeys展开的行，控制属性string[]　
expandedRowRender额外的展开行Function(record, index, indent, expanded):VNode | v-slot:expandedRowRender="{record, index, indent, expanded}"　
expandIcon自定义展开图标Fn　
expandRowByClick通过点击行来展开子行boolean　
expandIconColumnIndex‘expandIcon’的索引，当‘expandIconAsCell’为false时，将插入哪个列。默认值0number　
footer表格尾部Fn　
indentSize展示树形数据时，每层缩进的宽度，以 px 为单位number　
locale默认文案设置，目前包括排序、过滤、空数据文案object　
rowClassName表格行的类名　　
rowSelection列表项是否可选择，配置项TableRowSelection　
showSelectionBar显示多选状态栏boolean　
scroll表格是否可滚动，也可以指定滚动区域的宽、高，配置项　　
showHeader是否显示表头booleantrue
size表格大小large | middle | small　
title表格头部标题string　
customHeaderRow设置头部行属性object　
customRow设置行属性object　
tableLayout表格元素的 table-layout 属性，设为 fixed 表示内容不会影响列的布局- | 'auto' | 'fixed'　
getPopupContainer设置表格内各类浮层的渲染节点，如筛选菜单　　
transformCellText数据渲染前可以再次改变，一般用于空数据的默认配置，可以通过 ConfigProvider 全局统一配置Function　
beforeEditSubmit提交表格数据前触发　　
onChange　　　
onExpand　　　
onExpandedRowsChange　　　
onColumnsChange　　　

formConfig 

参数说明类型默认值
name　string　
layout'vertical' | 'inline' | 'horizontal'stringhorizontal
labelWidthlable的宽度number | string　
labelAlignlable文字对齐方向'left' | 'right'　
rowProps整个表单的alignRow配置obj

具体参考

rowProps配置项

submitOnReset重置时提交表格booleantrue
labelCol整个表单的Col配置ColEx　
baseRowStyle通用行风格CSSProperties　
baseColProps通用col配置ColEx　
schemas表单配置规则FormSchema　
mergeDynamicData用于合并到动态控件窗体项中的函数值Object　
compact搜索表格的精简模式boolean　
emptySpan空白行跨度number　
size表单的内部组件大小'default' | 'small' | 'large'　
disabled是否禁用booleanfalse
readonly是否只读booleanfalse
fieldMapToTime时间间隔字段映射到多个FieldMapToTime

[string, [string, string],

(string | [string, string])?]

autoSetPlaceHolder占位符是自动设置的boolean　
autoSubmitOnEnter输入时按回车键自动提交boolean　
rulesMessageJoinLabel检查该信息是否添加到标签上boolean　
showAdvancedButton是否显示折叠和展开按钮booleanfalse
autoFocusFirstItem是否关注第一个输入框，只在输入第一个表单项时才起作用boolean　
autoAdvancedLine在指定的行数上自动折叠number　
alwaysShowLines始终显示行数number　
showActionButtonGroup是否显示操作按钮boolean　
resetButtonOptions重置按钮配置{text:string}　
submitButtonOptions确认按钮配置{text:string}　
actionColOptions操作列配置　　
showResetButton展示重置按钮booleanTRUE
showSubmitButton展示查询按钮booleanTRUE

 rowProps

align"top" | "bottom" | "stretch" | "middle"
justify"center" | "end" | "start" | "space-around" | "space-between" | "space-evenly"
gutternumber
wrap　

BaseModal相关配置见 vben-admin vue3手册-BasicModal-CSDN博客 

Tintin_wu
关注
第一节：Vben Admin介绍和初次运行
cui_win的专栏
02-20 2247
本文是【实战Vben Admin + Python】的第一节，本文内容主要是介绍Vben Admin框架和我们后端使用的技术，开发环境和工具的准备本节文章的目的是Vben Admin的简单介绍，通过配置可以让项目前端运行起来，由于项目默认开启了mock，展示的都是静态模拟数据，我们在此基础上，下一节将研究分析下Vben Admin的目录。为我们后端搭建准备。
Vben Admin 自学记录 —— 介绍及使用（持续更新中...）
qq_36842789的博客
04-29 8056
3.在 src/locales/lang/zh-CN/routes 下添加 test.ts，设置路由title。在 src/router/routes/modules 内的 .ts 文件会被视为一个路由模块。2.在 src/views/myComponents中添加三个test1~3的测试页面。1.在 src/router/routes/modules 下添加 test.ts。例：src/router/routes/modules/dashboard.ts。4.至此路由模块及子页面添加成功，修改后效果。
vben admin BasicTable表格基本使用
最新发布
lipenghao111的博客
06-21 675
9.rowKey: 'id', //根据唯一的rowKey 动态删除指定行的数据.可用于不刷新整个表格而局部更新数据。1.register: 里面是table里面的一些配置项，比如header标题、内容、查询... 详情可以文档。dataIndex: 'action', //字段。fixed: 'right', // 显示到右边。6.showTableSetting: true, //刷新按钮。7.bordered: true, //是否显示表格边框。title: '操作', 操作名称。
vue-vben-admin 与.net core 结合实例 【自学与教学 小白教程】---第3节
qq_33906319的博客
01-06 942
1利用beforeFetch 处理查询条件2api 参数里，定义后端要的数据。如下图。将它默认的 page, pageSize，分页字段 转为我要的page:page, length:pageSize, 同时带个查询栏的查询条件 queryKeyValue:postsearch,注意 handleSearchInfoFn 在页面第一次加载没有触发，所以我使用了beforeFetch。
vben-admin 页面以及部分代码 常见问题 解析 持续更新····
weixin_68266812的博客
12-27 2450
vben-admin 网址介绍 | Vben Admin (vvbin.cn) ERR_PNPM_INVALID_OVERRIDE_SELECTOR  Cannot parse the "//" selector in the overrides
Vben Admin 的介绍以及使用
热门推荐
YZRHANYU的博客
11-17 3万+
Vben Admin 的介绍以及使用
实战SpringBoot2+Vue3-Vben-Admin整合之前端篇
05-14
【※  购买前提醒  ※】本课程分为前端+后端共计2个课程，本课属于前端部分，后端属于另外课程。 后端部分：https://download.csdn.net/course/detail/37057适用人群Java生态开发人员、Vue生态开发人员、IT类从业者课程概述该互联网实战项目是基于 Spring Boot 2+ SpringSecurity5+Element UI+Vue3-Vben-Admin+可视化等技术栈开发的项目，采用多模块，前后端分离开发。包括图形展示、权限管理、用户管理等功能。【后端技术】技术 说明Spring Boot2 MVC框架 开发的一站式解决方案Spring Security5  认证和授权框架MyBatisPlus3.3.1  基于 MyBatis 框架的快速研发框架MyBatisCode工具 生成 MyBatis 相关代码Jackson 提供了处理 JSON 数据的工具Lombok 简化对象封装工具 Druid   数据库连接池 【前端技术】Vue        互联网最火的前端框架Vue Router 路由框架Vuex 全局状态管理框架Axios 前端 HTTP 框架Vue-Vben-AdminI 前端 UI 框架 前端模板【开发工具】IntelliJ IDEA 开发 IDESQLyog 数据库连接客户端Postman HTTP 请求工具【开发环境】工具 版本JDK 1.8MySQL 5.7
Vben Admin 一 (初识框架)
为何这么帅
09-18 1万+
1、什么是Vben Admin Vue-Vben-Admin 是一个后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案， 总结就是一个后台管理模板。 项目开始前请仔细阅读 Vben Admin 官方文档 2、涉及的技术 Vue3.0、Vite、 Ant-Design-Vue、TypeScript等 3、项目结构 ├── build # 打包脚本相关 │ ├── config # 配置文件 │ ├── generate # 生成器 │ ├── script # 脚本 │ └── vi
vben admin配置详解（Table, Form）
weixin_43244841的博客
10-23 5319
vben admin配置详解（Table, Form）
vue-vben-admin.md
07-30
vue-vben-admin.md
vue-vben-admin-main源码
12-19
6. **Vue-vben-admin特性**：Vue-vben-admin提供了诸如权限控制、多语言支持、动态路由、表格、表单等常见管理后台功能的实现，这些都是通过Vue.js的特性如组件、计算属性、监听器等实现的。 7. **Vue组件**：在`...
Vue-Vben-Admin - 自定义上传excel文件弹框组件
09-27
Vue-Vben-Admin 是一个基于 Vue.js 的现代化管理后台模板，它提供了丰富的组件和功能，以帮助开发者快速构建企业级的后台系统。在本案例中，我们关注的是一个自定义的上传Excel文件的弹框组件。这个组件允许用户选择...
vben-admin-thin-next-main.zip
01-18
【标题】"vben-admin-thin-next-main.zip" 指的是一个压缩包文件，其中包含了一个名为 "vben-admin-thin-next-main" 的项目或应用。从名称来看，这很可能是某个基于前端技术栈构建的管理后台模板，特别是与Vue.js...
vben-admin-thin-next:vue-vben-admin-2.0迷你template.vue3，vite，打字稿
03-16
Vue Vben Admin是一个免费的开源中端和后端模板。 使用最新的vue3 ， vite2 ， TypeScript和其他主流技术开发，开箱即用的中端和后端前端解决方案也可用于学习参考。 特征 最新技术发展水平：使用诸如Vue3 / vite2之...
Vue-Vben-Admin：打造高效中大型项目后台解决方案
chenchuang0128的博客
03-05 1930
Vue-Vben-Admin是一个基于Vue3.0、Vite、Ant-Design-Vue和TypeScript的开源项目，旨在为开发中大型项目提供一站式的解决方案。随着技术的不断更新与发展，我们有理由相信，Vue-Vben-Admin将会在未来的企业级开发中发挥越来越重要的作用。基于Vue3.0、Vite和Ant-Design-Vue：Vue-Vben-Admin采用了最新的Vue3.0框架，结合Vite构建工具和Ant-Design-Vue组件库，为开发者提供了一个高效且易于维护的开发环境。
vben admin的介绍
pjm2222的博客
01-17 2887
Vben Admin基于Vue3.0、Vite、TypeScript的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。
vben admin 中 BasicTable 组件 useTable 的使用
YZRHANYU的博客
11-12 3768
vben admin 中 BasicTable 组件 useTable 的使用
vue-vben-admin
08-11
Vben Admin是一个用于快速搭建企业级中后台产品原型的模版，同时也可以作为学习vue3、vite、ts等主流技术的示例项目。它提供了一套完整的目录结构和常用插件，使项目开发更加便捷。你可以通过安装vue-vben-admin来使用它。另外，如果你需要mock后台数据，可以参考提供的链接https://gitee.com/full-stack-5755/vue-admin-block?_from=gitee_search。如果你想了解更多关于该项目的信息，你可以查看以下链接： - https://gitee.com/wang_jianhua_1230/vite2-vue3-ts-element-plus.git - https://gitee.com/panjiachen/vue-admin-template?_from=gitee_search123 #### 引用[.reference_title] - *1* *2* [Vben Admin 的介绍以及使用](https://blog.csdn.net/YZRHANYU/article/details/127571332)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item] - *3* [后台管理系统](https://blog.csdn.net/m0_53912016/article/details/120899913)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值