nly-adminlte-vue/dist/src/components/table/package.json

nly adminlte3 components

{
  "name": "@nly-admintle-vue/table",
  "version": "1.0.0",
  "meta": {
    "title": "Table",
    "subtitle": "表格",
    "description": "一个支持分页，过滤，排序，异步数据等功能的表格",
    "plugins": [
      "TableLitePlugin",
      "TableSimplePlugin"
    ],
    "components": [
      {
        "component": "NlyTable",
        "props": [
          {
            "prop": "striped",
            "description": "设置 true， table 会显示条纹式样"
          },
          {
            "prop": "bordered",
            "description": "设置 true 会给所有单元格和头部添加圆角边框式样"
          },
          {
            "prop": "borderless",
            "description": "移除所有单元格的内置边框"
          },
          {
            "prop": "outlined",
            "description": "给表格添加外边框， 如果 `bordered` prop 设置为 true， `outlined`会失效"
          },
          {
            "prop": "dark",
            "description": "反转颜色-在深色背景上使用浅色文本"
          },
          {
            "prop": "hover",
            "description": "给`<tbody>` 中的每行添加添加鼠标悬浮效果"
          },
          {
            "prop": "small",
            "description": "小型表格"
          },
          {
            "prop": "fixed",
            "description": "设置每列等宽，会加快渲染速度"
          },
          {
            "prop": "responsive",
            "description": "使得表格自适应宽度并添加水平滚动条，可选 'sm', 'md', 'lg', 'xl' 或者 'true', 由于adminlte3的bug，（其实是bootstrap的bug）, 可能水平滚动条并不会出现。可以在 table 外面套一层'<div class='table-responsive'>'"
          },
          {
            "prop": "stickyHeader",
            "description": "设置 true 会使得头部悬浮. 并且表格的最大高度为 300px, 使用其他 css 或者 style 可以设置表格的高度"
          },
          {
            "prop": "noBorderCollapse",
            "version": "0.4.4",
            "description": "禁用表格边框的可重叠性。主要用于 头部浮动模式 和 列浮动模式。在某些情况下会导致出现双重边界"
          },
          {
            "prop": "captionTop",
            "description": "如果表格有标题， 设置 `caption-top` 为 `true`, 标题会放置在表格上方， 如果设置为 `false` (默认值), 标题会放在表格底部"
          },
          {
            "prop": "tableVariant",
            "description": "表格颜色， 可选 'primary','secondary','info','danger','warning','success','light', 'dark'"
          },
          {
            "prop": "tableClass",
            "description": "自定义表格元素的 css 类"
          },
          {
            "prop": "stacked",
            "description": "表格堆叠模式. 设置 true 使得表格一直处于堆叠模式, 或者可以设置为对应的 'sm', 'md', 'lg', 'xl' 断点来使得表格在对应的断点变成堆叠模式"
          },
          {
            "prop": "headVariant",
            "description": "头部颜色，可选 `'light'` or `'dark'`, 会覆盖 head-row-variant"
          },
          {
            "prop": "headRowVariant",
            "version": "0.4.4",
            "description": "给 thead 元素中的 tr 元素设置颜色"
          },
          {
            "prop": "footVariant",
            "description": "底部颜色，可选 `'light'` or `'dark'`， 如果没有传入值， 默认会使用 `head-variant` prop 的值，如果没有设置 `foot-clone` 则无效。 会覆盖 foot-row-variant"
          },
          {
            "prop": "footClone",
            "description": "复制头部的内容到底部，并集成头部的功能"
          },
          {
            "prop": "footRowVariant",
            "version": "0.4.4",
            "description": "给 tfoot 中的 tr 元素设置颜色"
          },
          {
            "prop": "tbodyTransitionProps",
            "description": "Vue 'transition-group' 过渡动画. 设置的时候会给 tbody 添加'transition-group' 组件"
          },
          {
            "prop": "tbodyTransitionHandlers",
            "description": "给 tbody 添加 Vue 'transition-group' 过渡动画的事件"
          },
          {
            "prop": "caption",
            "description": "标题元素中的文本字符串"
          },
          {
            "prop": "captionHtml",
            "description": "标题元素中的 html 文本字符串"
          },
          {
            "prop": "theadClass",
            "description": "自定义 thead css 类"
          },
          {
            "prop": "theadTrClass",
            "description": "自定义 thead 中 tr 元素的 css 类"
          },
          {
            "prop": "footClone",
            "description": "启用表格页脚，并默认复制头部内容"
          },
          {
            "prop": "tfootClass",
            "description": "自定义 tfoot 的 css 类"
          },
          {
            "prop": "tfootTrClass",
            "description": "自定义 tfoot 中 tr 的 css 类"
          },
          {
            "prop": "tbodyClass",
            "description": "自定义 tbody 的 css 类"
          },
          {
            "prop": "tbodyTrClass",
            "description": "自定义 tbody 中 tr 的 css 类. 可以是一个返回 css 类的函数"
          },
          {
            "prop": "tbodyTrAttr",
            "version": "0.4.4",
            "description": "添加到 tbody 中 tr 的 attr 属性 , 可以是一个返回 attr 属性的函数"
          },
          {
            "prop": "detailsTdClass",
            "version": "0.4.4",
            "description": "自定义 row-details slot 中 td 元素的 css 类"
          },
          {
            "prop": "value",
            "description": "当前行的数据. 只读. 请不要给这个 prop 传值"
          },
          {
            "prop": "fields",
            "description": "表头名称或者自定义名称，是一个数组类型"
          },
          {
            "prop": "items",
            "description": "表格显示数据内容， 是一个数组类型"
          },
          {
            "prop": "primaryKey",
            "description": "给表格每一行添加一个唯一值， 如果给表格添加过渡动画，需要给表格每一添加一个唯一值。会加快表格渲染速度。但是过渡动画可能存在bug"
          },
          {
            "prop": "busy",
            "description": "设置表格 busy 状态 "
          },
          {
            "prop": "noProviderPaging",
            "description": "设置 true， 会使用内部分页， 配合 nly-bootstrap-pagination. 否则需要用户自己编写分页逻辑代码"
          },
          {
            "prop": "noProviderSorting",
            "description": "设置 true， 会使用表格自带 排序逻辑"
          },
          {
            "prop": "noProviderFiltering",
            "description": "设置 true， 会使用表格自带 过滤逻辑"
          },
          {
            "prop": "apiUrl",
            "description": ""
          },
          {
            "prop": "perPage",
            "description": "每页显示的数据条数，设置为0禁用分页"
          },
          {
            "prop": "currentPage",
            "description": "使用分页时当前数据要显示的页码，请设置为大于等于 1 的数字"
          },
          {
            "prop": "noLocalSorting",
            "description": "禁用自带 排序逻辑，如果用户没有提供自定义排序逻辑， 自带排序逻辑还是可以用"
          },
          {
            "prop": "noFooterSorting",
            "description": "设置为 true 的时候， 如果 `foot-clone` 为 true 且每列设置 `sortable` , 会禁用排序功能 "
          },
          {
            "prop": "sortIconLeft",
            "description": "将排序的图标放在文本的左边"
          },
          {
            "prop": "noSortReset",
            "description": "如果是一个可排序的表格， 点击任意不可排序的列头时，会清清除所有排序，设置 true 来禁用此功能"
          },
          {
            "prop": "sortNullLast",
            "description": "排序时，会先对 null 或者 undefined 进行排序， 设置 true 会把 null 或者 undefined 放到最后排序， 仅支持自带排序"
          },
          {
            "prop": "sortBy",
            "description": "设置排序猎命， 设置 null 清除排序"
          },
          {
            "prop": "sortDesc",
            "description": "对排序的列进行降序排序"
          },
          {
            "prop": "sortDirection",
            "description": "对未进行排序，切不可排序的列进行初始化排序，即将这些列按照内定的 降序，升序规则排序之后再渲染表格"
          },
          {
            "prop": "sortCompare",
            "description": "两队排序比较函数"
          },
          {
            "prop": "sortCompareOptions",
            "description": "一 包含 'String.prototype.sortLocale' 排序配置的 '方法"
          },
          {
            "prop": "sortCompareLocale",
            "description": ""
          },
          {
            "prop": "labelSortAsc",
            "description": ""
          },
          {
            "prop": "labelSortDesc",
            "description": ""
          },
          {
            "prop": "labelSortClear",
            "description": ""
          },
          {
            "prop": "selectable",
            "description": "设置 true 数据 可为选中，可选中一行数据或者多行数据"
          },
          {
            "prop": "selectMode",
            "description": "选中模式的类型，可以是多选，单选. 可选: 'single', 'multi' or 'range'"
          },
          {
            "prop": "selectedVariant",
            "description": "选中数据的颜色"
          },
          {
            "prop": "noSelectOnClick",
            "version": "0.4.4",
            "description": "禁止选择点击事件， 选中数据只能通过代码控制"
          },
          {
            "prop": "showEmpty",
            "description": "显示空 table， 当items没有值的时候，会显示空 table提示"
          },
          {
            "prop": "emptyText",
            "description": "空 table 提示文本"
          },
          {
            "prop": "emptyHtml",
            "description": "空 table 提示 html 字符串"
          },
          {
            "prop": "emptyFilteredText",
            "description": ""
          },
          {
            "prop": "emptyFilteredHtml",
            "description": ""
          },
          {
            "prop": "filter",
            "description": ""
          },
          {
            "prop": "filterFunction",
            "description": ""
          },
          {
            "prop": "filterIgnoredFields",
            "description": ""
          },
          {
            "prop": "filterIncludedFields",
            "description": ""
          },
          {
            "prop": "filterDebounce",
            "version": "0.4.4",
            "description": ""
          }
        ]
      }
    ]
  }
}