网站体验优化,网站建设电话营销,找人做效果图去什么网站,哪个网站做欧洲旅行比较好目录 一、封装的table、table-column组件以及相关ts类型的定义 1、ATable组件的封装 - index.ts 2、ATableColumn组件的封装 - ATableColumn.ts 3、ATable、ATableColumn类型 - interface.ts 二、ATable、ATableColumn组件的使用 三、相关属性、方法的使用以及相关说明 1. C… 目录 一、封装的table、table-column组件以及相关ts类型的定义 1、ATable组件的封装 - index.ts 2、ATableColumn组件的封装 - ATableColumn.ts 3、ATable、ATableColumn类型 - interface.ts 二、ATable、ATableColumn组件的使用 三、相关属性、方法的使用以及相关说明 1. Config Attributes 2. Table-slot 3. Table Events 4. Table Methods 5. Column Attributes 6. Table-column-slot 随着vue3框架逐渐的成熟有越来越多的前端开始手中的项目更新迭代成vue3版本。我想有不少人更新项目的一个重要的原因是因为vue3对于ts更加强力的支持。而本文则是在拥有强大ts提示的基础上,针对基于vue3开发的Element Plus组件库中table组件进行低代码、数据化的封装。代码难度不高主要用到的prop、emit、slot三个知识点。 一、封装的table、table-column组件以及相关ts类型的定义 项目中为了方便区分相关模块以及其组件将index.vue、table-column.vue以及interface.ts三个文件存放在同一个文件夹中。 1、ATable组件的封装 - index.ts
templateel-tablev-loadingconfig.loading:element-loading-textconfig[element-loading-text]:element-loading-spinnerconfig[element-loading-spinner]:element-loading-svgconfig[element-loading-svg]:element-loading-backgroundconfig[element-loading-background]refElTableRefclassel-table:datadataSource:heightconfig.height:max-height${config[max-height]}px:stripeconfig.stripe:borderconfig.border:sizeconfig.size:fitconfig.fit:show-headerconfig[show-header]:current-row-keyconfig[current-row-key]:highlight-current-rowconfig[highlight-current-row]:empty-textconfig[empty-text]:row-keyconfig[row-key]:row-class-nameconfig[row-class-name]:cell-class-nameconfig[cell-class-name]:default-sortconfig[default-sort]:tooltip-effectconfig[tooltip-effect]:show-summaryconfig[show-summary]:sum-textconfig[sum-text]:summary-methodconfig[summary-method]:span-methodconfig[span-method]:select-on-indeterminateconfig[select-on-indeterminate]:indentconfig.indent:lazyconfig.lazy:loadconfig.load:tree-propsconfig[tree-props]selectselectselect-allselectAllselection-changeselectionChangecell-mouse-entercellMouseEntercell-mouse-leavecellMouseLeavecell-clickcellClickcell-dblclickcellDblclickcell-contextmenucellContextmenurow-clickrowClickrow-contextmenurowContextmenurow-dblclickrowDblclickheader-clickheaderClickheader-contextmenuheaderContextmenusort-changesortChangefilter-changefilterChangecurrent-changecurrentChangeheader-dragendheaderDragendexpand-changeexpandChangetemplate v-foritem in columnsa-table-column :columnitem!-- (START) 当slot-header有值时使用插槽类型 --template v-ifitem[header-slot] #headerscopeslot :nameitem[header-slot] :columnscope.column :indexscope.index/slot/template!-- (END) 当slot-header有值时使用插槽类型 --!-- (START) 当slot有值时使用插槽类型 --template v-ifitem.slot #defaultscopeslot :nameitem.slot :rowscope.row :columnscope.column :indexscope.index/slot/template!-- (END) 当slot有值时使用插槽类型 --/a-table-column/templatetemplate #appendslot nameappend/slot/template/el-table
/templatescript langts setup
import { PropType, Ref, ref } from vue
import { ElTable } from element-plus
import { columnsTypes } from ./interface
import ATableColumn from ./ATableColumn.vue
// ? Table Attributes (START)
defineProps({// table上的相关配置信息config: {type: Object as unknown as typeof ElTable,default: {} as typeof ElTable},// table的数据源dataSource: {type: Array},// table-column上的相关信息的配置columns: {type: Array as PropTypecolumnsTypes[],default: () [] as columnsTypes[]}
})
// ? Table Attributes (END)// ? Table Events (START)
const emit defineEmits([select,select-all,selection-change,cell-mouse-enter,cell-mouse-leave,cell-click,cell-dblclick,cell-contextmenu,row-click,row-contextmenu,row-dblclick,header-click,header-contextmenu,sort-change,filter-change,current-change,header-dragend,expand-change
])// 当用户手动勾选数据行的 Checkbox 时触发的事件
const select (selection: any, row: any) {emit(select, selection, row)
}
// 当用户手动勾选全选 Checkbox 时触发的事件
const selectAll (selection: any) {emit(select-all, selection)
}
// 当选择项发生变化时会触发该事件
const selectionChange (selection: any) {emit(selection-change, selection)
}
// 当单元格 hover 进入时会触发该事件
const cellMouseEnter (row: any, column: any, cell: any, event: any) {emit(cell-mouse-enter, row, column, cell, event)
}
// 当单元格 hover 退出时会触发该事件
const cellMouseLeave (row: any, column: any, cell: any, event: any) {emit(cell-mouse-leave, row, column, cell, event)
}
// 当某个单元格被点击时会触发该事件
const cellClick (row: any, column: any, cell: any, event: any) {emit(cell-click, row, column, cell, event)
}
// 当某个单元格被双击击时会触发该事件
const cellDblclick (row: any, column: any, cell: any, event: any) {emit(cell-dblclick, row, column, cell, event)
}
// 当某个单元格被鼠标右键点击时会触发该事件
const cellContextmenu (row: any, column: any, cell: any, event: any) {emit(cell-contextmenu, row, column, cell, event)
}
// 当某一行被点击时会触发该事件
const rowClick (row: any, cell: any, event: any) {emit(row-click, row, cell, event)
}
// 当某一行被鼠标右键点击时会触发该事件
const rowContextmenu (row: any, cell: any, event: any) {emit(row-contextmenu, row, cell, event)
}
// 当某一行被双击时会触发该事件
const rowDblclick (row: any, cell: any, event: any) {emit(row-dblclick, row, cell, event)
}
// 当某一列的表头被点击时会触发该事件
const headerClick (cell: any, event: any) {emit(header-click, cell, event)
}
// 当某一列的表头被鼠标右键点击时触发该事件
const headerContextmenu (cell: any, event: any) {emit(header-contextmenu, cell, event)
}
// 当表格的排序条件发生变化的时候会触发该事件
const sortChange ({ column, prop, order }: any) {emit(sort-change, { column, prop, order })
}
// column 的 key 如果需要使用 filter-change 事件则需要此属性标识是哪个 column 的筛选条件
const filterChange (filters: any) {emit(filter-change, filters)
}
// 当表格的当前行发生变化的时候会触发该事件如果要高亮当前行请打开表格的 highlight-current-row 属性
const currentChange (currentRow: any, oldCurrentRow: any) {emit(current-change, currentRow, oldCurrentRow)
}
// 当拖动表头改变了列的宽度的时候会触发该事件
const headerDragend (newWidth: any, oldWidth: any, column: any, event: any) {emit(header-dragend, newWidth, oldWidth, column, event)
}
// 当用户对某一行展开或者关闭的时候会触发该事件展开行时回调的第二个参数为 expandedRows
// 树形表格时第二参数为 expanded
const expandChange (row: any, expanded: any) {emit(expand-change, row, expanded)
}
// ? Table Events (END)
// ? Table Methods (START)
const ElTableRef ref()
// 用于多选表格清空用户的选择
const clearSelection () {ElTableRef.value.clearSelection()
}
// 用于多选表格切换某一行的选中状态 如果使用了第二个参数
// 则是设置这一行选中与否selected 为 true 则选中
const toggleRowSelection (row: any, selected: any) {ElTableRef.value.toggleRowSelection(row, selected)
}
// 用于多选表格切换全选和全不选
const toggleAllSelection () {ElTableRef.value.toggleAllSelection()
}
// 用于可扩展的表格或树表格如果某行被扩展则切换。
// 使用第二个参数您可以直接设置该行应该被扩展或折叠。
const toggleRowExpansion (row: any, expanded: any) {ElTableRef.value.toggleRowExpansion(row, expanded)
}
// 用在单选表中设置某一行被选中。
// 如果不带任何参数调用它将清除选择。
const setCurrentRow (row: any) {ElTableRef.value.setCurrentRow(row)
}
// 清除排序将数据恢复到原来的顺序
const clearSort () {ElTableRef.value.clearSort()
}
// 清除传入的列的过滤器columnKey。如果没有参数则清除所有过滤器
const clearFilter (columnKeys: any) {ElTableRef.value.clearFilter(columnKeys)
}// 手动排序表。属性prop用于设置排序列属性order用于设置排序顺序
const sort (prop: string, order: string) {ElTableRef.value.sort(prop, order)
}
defineExpose({clearSelection,toggleRowSelection,toggleAllSelection,toggleRowExpansion,setCurrentRow,clearSort,clearFilter,sort
})
// ? Table Methods (END)
/script
2、ATableColumn组件的封装 - ATableColumn.ts
templateel-table-column:typecolumn.type:indexcolumn.index:labelcolumn.label:column-keycolumn[column-key]:propcolumn.prop:widthcolumn.width:min-widthcolumn[min-width]:fixedcolumn.fixed:render-headercolumn[render-header]:sortablecolumn.sortable:sort-methodcolumn[sort-method]:sort-bycolumn[sort-by]:sort-orderscolumn[sort-orders]:resizablecolumn.resizable:formattercolumn.formatter:show-overflow-tooltipcolumn[show-overflow-tooltip]:aligncolumn.align:header-aligncolumn[header-align]:class-namecolumn[class-name]:label-class-namecolumn[label-class-name]:selectablecolumn.selectable:reserve-selectioncolumn[reserve-selection]:filterscolumn.filters:filter-placementcolumn[filter-placement]:filter-multiplecolumn[filter-multiple]:filter-methodcolumn[filter-method]:filtered-valuecolumn[filtered-value]!-- (START) 当slot-header有值时使用插槽类型 --template v-ifcolumn[header-slot] #headerscopeslot nameheader :rowscope.row/slot/template!-- (END) 当slot-header有值时使用插槽类型 --!-- (START) 当slot有值时使用插槽类型 --template v-ifcolumn.slot #defaultscopeslot namedefault :rowscope.row/slot/template!-- (END) 当slot有值时使用插槽类型 --/el-table-column
/template
script langts setup
import { PropType } from vue
import { columnsTypes } from /interface/ATable
defineProps({column: {type: Object as PropTypecolumnsTypes,default: () {},},
})
/script
3、ATable、ATableColumn类型 - interface.ts
import { TableColumnCtx } from element-plus/es/components/table/src/table-column/defaults
import { RendererElement, RendererNode, VNode } from vueexport interface configTypes {loading?: booleanelement-loading-text?: stringelement-loading-spinner?: stringelement-loading-svg?: stringelement-loading-background?: stringappend?: string/*** table 列表的高度*/height?: string | number/*** table 列表的最大高度*/max-height?: string | number/*** 是否开启斑马线*/stripe?: boolean/*** 是否开启table的border*/border?: boolean/*** table 列表的大小*/size?: large | default | small/*** table 列是否自动撑开*/fit?: boolean/*** table 列表是否展示表头*/show-header?: boolean/*** 当前行的 key值*/current-row-key?: string | number/*** 是否高亮当前行*/highlight-current-row?: boolean/*** 行的className*/row-class-name?: string | ((row: any) string)/*** 单元格的className*/cell-class-name?: string | ((row: any) string)/*** 表头行的className*/header-row-class-name?: string | ((row: any) string)/*** 表头单元格的className*/header-cell-class-name?: string | ((row: any) string)/*** 行数据的 Key*/row-key?: string | ((row: any) string)/*** 没有数据时的提示文字*/empty-text?: string/*** 是否默认展开所有行*/default-expand-all?: boolean/*** 默认的排序列的 prop 和顺序*/default-sort?: {prop: stringorder?: ascending | descending}/*** tooltip effect 属性*/tooltip-effect?: dark | light/*** 是否在表尾显示合计行*/show-summary?: boolean/*** 合计行第一列的文本*/sum-text?: string/*** 自定义的合计计算方法*/summary-method?: (row: any) {}/*** 合并行或列的计算方法*/span-method?: (row: any) {}/*** 在多选表格中当仅有部分行被选中时点击表头的多选框时的行为。* 若为 true则选中所有行若为 false则取消选择所有行*/select-on-indeterminate?: boolean/*** 展示树形数据时树节点的缩进*/indent?: number/*** 是否懒加载子节点数据*/lazy?: boolean/**** 加载子节点数据的函数*/load?: (row: any, treeNode: any, resolve: any) {}/*** 渲染嵌套数据的配置选项*/tree-props?: { hasChildren: string; children: string }
}export interface columnsTypes {slot?: stringheader-slot?: stringtype?: index | selection | expandindex?: number | ((index: number) number)label?: stringcolumn-key?: stringprop?: stringwidth?: string | numbermin-width?: string | numberfixed?: left | rightrender-header?: (data: {column: TableColumnCtxany$index: number}) VNodeRendererNode, RendererElement, { [key: string]: any }sortable?: true | false | customsort-method?: (a: any, b: any) numbersort-by?: ((row: any, index: any) string) | string | string[]sort-orders?: any[]resizable?: booleanformatter?: (row: any, column: any, cellValue: any, index: any) anyshow-overflow-tooltip?: booleanalign?: left | center | rightheader-align?: left | center | rightclass-name?: stringlabel-class-name?: stringselectable?: (row: any, index: any) booleanreserve-selection?: booleanfilters?: any[]filter-placement?:| top| top-start| top-end| bottom| bottom-start| bottom-end| left| left-start| left-end| right| right-start| right-endfilter-multiple?: booleanfilter-method?: (value: any, row: any, column: any) booleanfiltered-value?: any[]
}二、ATable、ATableColumn组件的使用
templatediv classtable_box cardel-button classtable_btn clicksetCurrent()Clear selection/el-buttona-tableclasstable_contrefsingleTableRefcurrent-changehandleCurrentChange:configconfig:columnscolumns:dataSourceluckListtemplate #sexscope{{ scope.row.sex 0 ? 男 : 女 }}/templatetemplate #operationscopeel-button clicksetCurrent(luckList[1])Select second row/el-button/template/a-table/div
/templatescript setup langts
import { reactive, ref } from vue
import ATable from /components/ATable/index.vue
import { columnsTypes, configTypes } from /components/ATable/interface// 活动列表每一列的配置信息
const columns: columnsTypes[] [{prop: name,label: 用户,align: center,width: 100},{slot: sex,label: 性别,align: center},{slot: operation,label: 操作,align: center,width: 350}
]
const config reactiveconfigTypes({stripe: true,border: true,fit: true,highlight-current-row: true,size: large,loading: false
})// 福袋列表数据
const luckList ref([{id: 1,name: 老李,sex: 0},{id: 2,name: 老王,sex: 1}
])
const currentRow ref()
const singleTableRef ref()const setCurrent (row?) {// table实例上方法的调用singleTableRef.value!.setCurrentRow(row)
}
// Table 事件的使用
const handleCurrentChange (val) {currentRow.value val
}
/scriptstyle scoped langscss
.table_box {display: flex;flex-direction: column;margin-top: 10px;overflow-y: auto;.table_btn {margin-bottom: 20px;width: 200px;}.table_cont {flex: 1;}
}
.card {padding: 15px;background-color: #ffffff;border-radius: 5px;box-shadow: 3px 3px 3px #e1e0e0;
}
/style
三、相关属性、方法的使用以及相关说明
1. Config Attributes
属性说明类型可选值默认值heightTable的高度默认为自动高度。如果height为number类型单位px如果height为string类型则这个高度会设置为Table的style.height的值Table的高度会受控于外部样式。string / number——max-heightTable 的最大高度。 合法的值为数字或者单位为px 的高度。string / number——stripe是否为斑马纹 tableboolean—falseborder是否带有纵向边框boolean—falsesizeTable 的尺寸stringlarge / default /small—fit列的宽度是否自撑开boolean—trueshow-header是否显示表头boolean—truehighlight-current-row是否要高亮当前行boolean—falsecurrent-row-key当前行的 key只写属性string / number——row-class-name行的 className的回调方法也可以使用字符串为所有行设置一个固定的 className。function({ row, rowIndex}) / string——cell-class-name单元格的 className的回调方法也可以使用字符串为所有单元格设置一个固定的 className。function({ row, column, rowIndex, columnIndex}) / string——header-row-class-name表头行的 className的回调方法也可以使用字符串为所有表头行设置一个固定的 className。function({ row, rowIndex }) / string——header-cell-class-name表头单元格的 className 的回调方法也可以使用字符串为所有表头单元格设置一个固定的 className。function({ row, column, rowIndex, columnIndex }) / string——row-key 行数据的 Key用来优化 Table 的渲染 在使用reserve-selection功能与显示树形数据时该属性是必填的。 类型为 String 时支持多层访问user.info.id但不支持 user.info[0].id此种情况请使Function。 function(row) / string——empty-text空数据时显示的文本内容 也可以通过 #empty 设置string—No Datadefault-expand-all是否默认展开所有行当 Table 包含展开行存在或者为树形表格时有效boolean—falseexpand-row-keys可以通过该属性设置 Table 目前的展开行需要设置 row-key 属性才能使用该属性为展开行的 keys 数组。array——default-sort默认的排序列的 prop 和顺序。 它的 prop 属性指定默认的排序的列order 指定默认排序的顺序objectorder: ascending / descending如果只指定了 prop, 没有指定 order, 则默认顺序是 ascendingtooltip-effecttooltip effect 属性stringdark / lightdarkshow-summary是否在表尾显示合计行boolean—falsesum-text合计行第一列的文本string—合计summary-method自定义的合计计算方法function({ columns, data })——span-method合并行或列的计算方法function({ row, column, rowIndex, columnIndex })——select-on-indeterminate在多选表格中当仅有部分行被选中时点击表头的多选框时的行为。 若为 true则选中所有行若为 false则取消选择所有行boolean—trueindent展示树形数据时树节点的缩进number—16lazy是否懒加载子节点数据boolean——load加载子节点数据的函数lazy 为 true 时生效函数第二个参数包含了节点的层级信息function(row, treeNode, resolve)——tree-props渲染嵌套数据的配置选项object—{ hasChildren: hasChildren, children: children }table-layout设置用于布局表格单元格、行和列的算法stringfixed / autofixed
2. Table-slot
插槽名说明append插入至表格最后一行之后的内容的插槽名称 如果需要对表格的内容进行无限滚动操作可能需要用到这个 slot。 若表格有合计行该 slot 会位于合计行之上。无需声明可以直接使用。
3. Table Events
事件名说明回调参数select当用户手动勾选数据行的 Checkbox 时触发的事件selection, rowselect-all当用户手动勾选全选 Checkbox 时触发的事件selectionselection-change当选择项发生变化时会触发该事件selectioncell-mouse-enter当单元格 hover 进入时会触发该事件row, column, cell, eventcell-mouse-leave当单元格 hover 退出时会触发该事件row, column, cell, eventcell-click当某个单元格被点击时会触发该事件row, column, cell, eventcell-dblclick当某个单元格被双击击时会触发该事件row, column, cell, eventcell-contextmenu当某个单元格被鼠标右键点击时会触发该事件row, column, cell, eventrow-click当某一行被点击时会触发该事件row, column, eventrow-contextmenu当某一行被鼠标右键点击时会触发该事件row, column, eventrow-dblclick当某一行被双击时会触发该事件row, column, eventheader-click当某一列的表头被点击时会触发该事件column, eventheader-contextmenu当某一列的表头被鼠标右键点击时触发该事件column, eventsort-change当表格的排序条件发生变化的时候会触发该事件{ column, prop, order }filter-changecolumn 的 key 如果需要使用 filter-change 事件则需要此属性标识是哪个 column 的筛选条件filterscurrent-change当表格的当前行发生变化的时候会触发该事件如果要高亮当前行请打开表格的 highlight-current-row 属性currentRow, oldCurrentRowheader-dragend当拖动表头改变了列的宽度的时候会触发该事件newWidth, oldWidth, column, eventexpand-change当用户对某一行展开或者关闭的时候会触发该事件展开行时回调的第二个参数为 expandedRows树形表格时第二参数为 expandedrow, (expandedRows,expanded)
4. Table Methods
方法名说明参数clearSelection用于多选表格清空用户的选择—toggleRowSelection用于多选表格切换某一行的选中状态 如果使用了第二个参数则是设置这一行选中与否selected 为 true 则选中row, selectedtoggleAllSelection用于多选表格切换全选和全不选—toggleRowExpansion用于可扩展的表格或树表格如果某行被扩展则切换。 使用第二个参数您可以直接设置该行应该被扩展或折叠。row, expandedsetCurrentRow用于单选表格设定某一行为选中行 如果调用时不加参数则会取消目前高亮行的选中状态。rowclearSort用于清空排序条件数据会恢复成未排序的状态—clearFilter传入由columnKey 组成的数组以清除指定列的过滤条件。 不传入参数时用于清空所有过滤条件数据会恢复成未过滤的状态columnKeysdoLayout对 Table 进行重新布局。 当 Table 或其祖先元素由隐藏切换为显示时可能需要调用此方法—sort手动对 Table 进行排序。 参数 prop 属性指定排序列order 指定排序顺序。prop: string, order: string
5. Column Attributes
属性说明类型可选值默认值type对应列的类型。 如果设置了selection则显示多选框 如果设置了index 则显示该行的索引从 1 开始计算 如果设置了expand 则显示为一个可展开的按钮stringselection / index / expand—index如果设置了 typeindex可以通过传递 index 属性来自定义索引number / function(index)——label列的表头名string——column-keycolumn 的 key column 的 key 如果需要使用 filter-change 事件则需要此属性标识是哪个 column 的筛选条件string——prop字段名称 对应列内容的字段名string——width对应列的宽度string / number——min-width对应列的最小宽度 对应列的最小宽度 与 width 的区别是 width 是固定的min-width 会把剩余宽度按比例分配给设置了 min-width 的列string / number——fixed列是否固定在左侧或者右侧stringleft / right—render-header列标题 Label 区域渲染使用的 Functionfunction({ column, $index })——sortable对应列是否可以排序 如果设置为 custom则代表用户希望远程排序需要监听 Table 的 sort-change 事件boolean / stringtrue / false / customfalsesort-method指定数据按照哪个属性进行排序仅当sortable设置为true且没有设置sort-method的时候有效。 如果 sort-by 为数组则先按照第 1 个属性排序如果第 1 个相等再按照第 2 个排序以此类推function(a, b)——sort-by指定数据按照哪个属性进行排序仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。 如果 sort-by 为数组则先按照第 1 个属性排序如果第 1 个相等再按照第 2 个排序以此类推function(row, index) / string / array——sort-orders数据在排序时所使用排序策略的轮转顺序仅当 sortable 为 true 时有效。 需传入一个数组随着用户点击表头该列依次按照数组中元素的顺序进行排序array数组中的元素需为以下三者之一ascending 表示升序descending 表示降序null 表示还原为原始顺序[ascending, descending, null]resizable对应列是否可以通过拖动改变宽度需要在 el-table 上设置 border 属性为真boolean—falseformatter用来格式化内容function(row, column, cellValue, index)——showOverflowTooltip当内容过长被隐藏时显示 tooltipboolean—falsealign对齐方式stringleft / center / rightleftheader-align表头对齐方式 若不设置该项则使用表格的对齐方式stringleft / center / right—class-name列的 classNamestring——label-class-name当前列标题的自定义类名string——selectable仅对 typeselection 的列有效类型为 FunctionFunction 的返回值用来决定这一行的 CheckBox 是否可以勾选function(row, index)——reserve-selection仅对 typeselection 的列有效 请注意 需指定 row-key 来让这个功能生效。是否保留上一个分页选中的数据。boolean—falsefilters数据过滤的选项 数组格式数组中的元素需要有 text 和 value 属性。 数组中的每个元素都需要有 text 和 value 属性。array[{ text, value }]——filter-placement过滤弹出框的定位stringtop/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-endbottomfilter-multiple数据过滤的选项是否多选boolean—truefilter-method数据过滤使用的方法 如果是多选的筛选项对每一条数据会执行多次任意一次返回 true 就会显示。function(value, row, column)——filtered-value选中的数据过滤项如果需要自定义表头过滤的渲染方式可能会需要此属性。array——
6. Table-column-slot
属性说明slot自定义内容的插槽名需要先在column里声明插槽名{ row, column, index }header-slot自定义头部的插槽名需要先在column里声明头部插槽名{ column, index }
