项目自述
管理系统 To B
Vxe-table

Vxe-table 使用教程

添加自定义列 工具栏

sht-vxe-toolbar 工具栏组件

  • (可选参数) vm | tableRefName
  • vm ?: object 类型 (当前组件的 this)
  • tableRefName ?: string 类型 (vxe-table 组件的 ref 名称)

示例一 (不带任何参数)

该示例适用于同页面 单个vxe-table 使用单个工具栏组件 必须 按照示例的嵌套方式使用

  • sht-vxe-toolbar (要求必须 按照以下组件使用的两种方式)
  • vxe-table 中的 id 必传 (建议使用： toolbar + 父级文件夹名称 + 当前文件夹名称)
  • vxe-table 中的 custom-config 必传
<!-- 使用方式一 -->
<template>
  <basicContainer>
    <el-search-group :data="formData" ref="searchRef">
      <sht-vxe-toolbar />
    </el-search-group>
    <!-- id 必须唯一 -->
    <vxe-table
        id="toolbar-other-purchase-inquiry"
        :custom-config="{ storage: { resizable: true } }"
    >
      <!--省略代码-->
    </vxe-table>
  </basicContainer>
</template>
 
<!-- 使用方式二 -->
<template>
  <basicContainer>
    <sht-vxe-toolbar />
    <!-- id 必须唯一 -->
    <vxe-table
        id="toolbar-other-purchase-inquiry"
        :custom-config="{ storage: { resizable: true } }"
    >
      <!--省略代码-->
    </vxe-table>
  </basicContainer>
</template>

示例二 (带参数)

该示例适用于同页面 多个vxe-table 使用多个工具栏组件 无需 按照示例的嵌套方式使用

  • sht-vxe-toolbar 多个vxe-table 使用案例
  • sht-vxe-toolbar vm 传入 this
  • sht-vxe-toolbar tableRefName 传入 vxe-table 的 ref 名称
  • vxe-table 中的 id 必传 (建议使用： toolbar + 父级文件夹名称 + 当前文件夹名称)
  • vxe-table 中的 custom-config 必传
<!-- 使用方式一 -->
<template>
  <basicContainer>
    <el-search-group :data="formData" ref="searchRef">
      <sht-vxe-toolbar :vm="this" table-ref-name="tableData" />
      <sht-vxe-toolbar :vm="this" table-ref-name="tableData1" />
    </el-search-group>
    <!-- ref 必须与 table-ref-name 一致 -->
    <!-- id 必须唯一 -->
    <vxe-table
        ref="tableData"
        id="toolbar-other-purchase-inquiry"
        :custom-config="{ storage: { resizable: true } }"
    >
      <!--省略代码-->
    </vxe-table>
    <!-- ref 必须与 table-ref-name 一致 -->
    <!-- id 必须唯一 -->
    <vxe-table
        ref="tableData1"
        id="toolbar-other-purchase-inquiry1"
        :custom-config="{ storage: { resizable: true } }"
    >
      <!--省略代码-->
    </vxe-table>
  </basicContainer>
</template>
 
<!-- 使用方式二 -->
<template>
  <basicContainer>
    <sht-vxe-toolbar :vm="this" />
    <!-- ref 必须是 xTable -->
    <!-- id 必须唯一 -->
    <vxe-table
        ref="xTable"
        id="toolbar-other-purchase-inquiry"
        :custom-config="{ storage: { resizable: true } }"
    >
      <!--省略代码-->
    </vxe-table>
  </basicContainer>
</template>
公共方法描述