Columns 列表字段设置

属性名	属性说明	默认值
label	[String] 列头文本	无
field	[String] 列数据字段	无
align	[String] 列对齐	无
headerPrefix	[String] 列头前缀	无
headerSuffix	[String] 列头后缀	无
prefix	[String] 单元格数据前缀	无
suffix	[String] 单元格数据后缀	无
format	[Object] 格式化设置 详见 字段 format 配置	无
type	[String] 列展示类型 selection/index/expand 请参考 element-ui 文档 列属性参数 (opens new window)	无
expandFields	[Object] 展开数据项设置 列类型 type 设置为 expand 时，此属性必须，用于指定展开区域显示的字段 详见 行展开配置	无
customExpand	[Object] 自定义展开数据项模板： { wrapper: component, cell: component } 详见 行展开配置	无
index	[Number|Function] 列表序号 列类型 type 设置为 index 时，此属性用于自定义序号起始值或序号展示形式	无
width	[String|Number] 列宽	无
minWidth	[String|Number] 最小列宽	无
sortable	[Boolean] 是否可排序 如果设置为 custom，则表示服务器端排序，需要监听组件抛出的 sort-change 事件	false
sortBy	[String|Array|Function] 设置排序字段 指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 有效	无
fixed	[String|Boolean] 是否固定该列 列是否固定在左侧或者右侧，true/left/right，true 表示固定在左侧	无
resizable	[Boolean] 是否可以通过拖动改变宽度 当 tableSetting 中 border 属性值为 true 时该特性自动生效，此种情况下如需禁用 resizable 特性，请将其值设置为 false。	true
overflowText	[Boolean] 当内容过长被隐藏时显示	false
className	[String] 自定义列样式	无
order	[Number] 自定义列排列顺序 注意：通过情况下不需要改属性配置，因为 columns 配置本身就是有序的	无

预设列表字段

将常用字段配置为预设字段，可极大改善列表、表单、筛选条控件的配置体验。

字段 format 配置

属性名	属性说明	默认值
type	[String] 格式化类型 可选值：formatter中的预置函数 | custom	无
set	[Array|Number|String|Function] 格式化参数 支持多个参数，此时请使用数组传入，参考 formatter 如果 type 为 custom，则 set 值为自定义函数引用或匿名函数	无

行展开配置

行展开字段支持预设字段配置方式。

属性名	属性说明	默认值
label	[String] 字段描述	无
field	[String] 数据字段	无
prefix	[String] 数据前缀	无
suffix	[String] 数据后缀	无
format	[object] 同 column 的 format 配置	无
className	[String] 自定义展开条目样式	无
labelStyle	[String] 自定义展开条目属性描述部分样式，仅在默认展开配置下有效	无
valueStyle	[String] 自定义展开条目属性值部分样式，仅在默认展开配置下有效	无
labelClassName	[String] 自定义展开条目属性描述部分样式类名，仅在默认展开配置下有效	无
valueClassName	[String] 自定义展开条目属性值部分样式类名，仅在默认展开配置下有效	无

customExpand 自定义展开项模板

当配置 customExpand 属性时，展开项将使用配置的模板组件进行渲染，参考如下示例：

展开项容器模板组件

<!-- wrapper.vue -->
<template functional>
  <div class="wrapper">

    <!-- 自定义内容 -->

    <slot></slot>

    <!-- 自定义内容 -->

  </div>
</template>

<style scoped lang="scss">
/* 容器样式 */
</style>

wrapper.vue 模板中可接收当前展开列 column 配置、当前行数据 data 两个 prop 属性

展开项条目模板组件

<!-- cell.vue -->
<template functional>
  <div class="cell">

    <!-- 自定义内容 -->

    <label>{{ props.field.label }}</label>
    <input type="text" :value="props.data[props.field.field]">

    <!-- 自定义内容 -->

  </div>
</template>

<style scoped lang="scss">
/* 容器样式 */
</style>

cell.vue 模板中可接收当前展开列 column 配置、当前行数据 data 及 当前字段配置对象三个 prop 属性。

属性配置

wrapper、cell 属性均是可选的，可只配置其中其中一项。

import wrapperTemplate from './wrapper.vue'
import cellTemplate from './cell.vue'
const columns = [
  //...
  {
    type: 'expand',
    expandFields: [...],
    customExpand: {
      wrapper: wrapperTemplate,
      cell: cellTemplate
    }
  }
]