CSS样式

Vuetable试图与CSS框架无关。当它生成其输出作为普通HTML表时,您应该能够使用任何CSS框架的表类对其进行样式设置。

为了易于适应任何CSS框架,将影响Vuetable外观的CSS类存储在一个文件中,该文件可以轻松分配给css

这是Vuetable随附的Semantic UI的CSS类示例。

export default {
  table: {
    tableWrapper: '',
    tableHeaderClass: 'fixed',
    tableBodyClass: 'vuetable-semantic-no-top fixed',
    tableClass: 'ui blue selectable unstackable celled table',
    loadingClass: 'loading',
    ascendingIcon: 'blue chevron up icon',
    descendingIcon: 'blue chevron down icon',
    ascendingClass: 'sorted-asc',
    descendingClass: 'sorted-desc',
    sortableIcon: 'grey sort icon',
    handleIcon: 'grey sidebar icon',
  },

  pagination: {
    wrapperClass: 'ui right floated pagination menu',
    activeClass: 'active large',
    disabledClass: 'disabled',
    pageClass: 'item',
    linkClass: 'icon item',
    paginationClass: 'ui bottom attached segment grid',
    paginationInfoClass: 'left floated left aligned six wide column',
    dropdownClass: 'ui search dropdown',
    icons: {
      first: 'angle double left icon',
      prev: 'left chevron icon',
      next: 'right chevron icon',
      last: 'angle double right icon',
    }
  },

  paginationInfo: {
    infoClass: 'left floated left aligned six wide column',
  }
}

如果您使用其他CSS框架,则可以轻松创建自己的框架。您也可以将其发布到npmjs.com以便与其他人共享。

警告

请注意,以上仅仅是一个正常的JavaScript文件导出它包含一个对象table, pagination, 以及paginationinfo对象中。

导入文件时,它将包含此单个对象。而且,如果您仅将此对象分配给css道具,它将无法正常工作。您必须改为将内部对象分配给css。在这种情况下,css.table用于Vuetable和css.paginationVuetablePagination。

用法

只需导入并将其分配给cssVuetable的




















<template>
  <div>
    <vuetable ref="vuetable"
      //...
      :css="css.table"
    ></vuetable>
    <vuetable-pagination ref="pagination"
      :css="css.pagination"
    ></vuetable-pagination>
  </div>
</template>
<script>
import CssForBootstrap4 from './VuetableCssBootstrap4.js'
export default {
  data () {
    return {
      //...
      css: CssForBootstrap4,
    }
  }
}
</script>

其他CSS框架的定制

通常,您将用您选择的CSS框架的HTML表格部分中指定的选项替换每个选项的CSS类。

这是带有FontAwesome Icon的Bootstrap4的示例。

// Bootstrap4 + FontAwesome Icon
export default {
  table: {
    tableWrapper: '',
    tableHeaderClass: 'mb-0',
    tableBodyClass: 'mb-0',
    tableClass: 'table table-bordered table-hover',
    loadingClass: 'loading',
    ascendingIcon: 'fa fa-chevron-up',
    descendingIcon: 'fa fa-chevron-down',
    ascendingClass: 'sorted-asc',
    descendingClass: 'sorted-desc',
    sortableIcon: 'fa fa-sort',
    detailRowClass: 'vuetable-detail-row',
    handleIcon: 'fa fa-bars text-secondary',
    renderIcon(classes, options) {
      return `<i class="${classes.join(' ')}"></span>`
    }
  },
  pagination: {
    wrapperClass: 'pagination float-right',
    activeClass: 'active',
    disabledClass: 'disabled',
    pageClass: 'page-item',
    linkClass: 'page-link',
    paginationClass: 'pagination',
    paginationInfoClass: 'float-left',
    dropdownClass: 'form-control',
    icons: {
      first: 'fa fa-chevron-left',
      prev: 'fa fa-chevron-left',
      next: 'fa fa-chevron-right',
      last: 'fa fa-chevron-right',
    }
  }
}

渲染图标

每个CSS框架似乎都使用不同的方式来构造图标。Vuetable提供了一种方法来帮助您。

在分配给css的对象内部,如果定义了一个名为的函数renderIcon,则Vuetable会在需要渲染图标时调用它。

您应该定义 renderIcon函数以接受2个参数

  • classes — 包含CSS类字符串数组,例如 ['class-a', 'class-b']
  • options — 包含其他HTML属性,例如 style="margin:0px"

这是带有FontAwesome的Bootstrap 4的一个
















{
  tableWrapper: "",
  tableHeaderClass: "mb-0",
  tableBodyClass: "mb-0",
  tableClass: "table table-bordered table-hover",
  loadingClass: "loading",
  ascendingIcon: "fa fa-chevron-up",
  descendingIcon: "fa fa-chevron-down",
  ascendingClass: "sorted-asc",
  descendingClass: "sorted-desc",
  sortableIcon: "",
  detailRowClass: "vuetable-detail-row",
  handleIcon: "fa-bars text-secondary",
  renderIcon(classes, options) {
    return `<i class="${classes.join(" ")}" ${options}></span>`;
  }
}

请参阅此处的示例。

部分CSS选项

如果您只想更改CSS中的一个或两个选项,而又不想像上面的示例那样将整个CSS类放在一起,则可以仅在css中指定所需的选项。




<vuetable ref="vuetable"
  :css="{tableClass: 'my-table', loadingClass: 'Please wait...'}"
></vuetable>

提示

当您为css分配值时,Vuetable会将其合并为默认值。合并的副本存储在$_cssdata属性中。

Vuetable的具体CSS

Vuetable在呈现HTML表期间会生成一些特定的CSS类。如果您需要定位表的各个部分,则可以使用浏览器DevTool或Inspector进行查看。

生成的HTML表

这是Vuetable生成的HTML表的结构

<div class="{css.tableWrapper}">
  <div class="vuetable-head-wrapper">
    <table class="vuetable {css.tableClass} {css.tableHeaderClass}">
      // content generated by column group component VeutableColGroup
      <thead>
        // content generaged by table header component VuetableRowHeader
      </thead>
    </table>
  </div>

  <div class="vuetable-body-wrapper">
    <table class="vuetable {css.tableClass} {css.tableBodyClass}">
      // content generated by column group component VeutableColGroup
      <tfoot>
        // content generated by "tableFooter" slot
      </tfoot>
      <tbody class="vuetable-body">
        // content of <tr> and <td> generated by v-for, 
        // will probably be another component in the future
      </tbody>
    </table>
  </div>
</div>

请注意,在以上结构中,实际上生成了两个HTML表。一个用于表标题,另一个用于表主体和页脚。这对于支持固定表头和可滚动表主体(通过设置table-height)是必需的。

但是,如果不使用固定头,则不会生成第一个表。里面的表<div class="vuetable-body-wrapper">也将包含该thead部分。

<colgroup>标签也产生了两个表,以确保在这两个表中的列具有相同的宽度。

警告

如果使用固定的标题功能,则应始终在字段定义中为每个字段设置宽度,否则,表标题和正文中的列宽可能不相同。