目的
源码
文档
TablePlus Attributes
TablePlus Events
TablePlus Methods
TablePlus column
TablePlus spanConfig
基本用法
目的配置型表格多级表头/自定义表头、形数据与懒加载用法等支持el-table大部分属性和用法
内置loading加载
内置合并单元格
默认跨页选择
自定义列模板
划重点：后面tableSmart的基础组件
源码包裹层TableWrap.vue
<template>
<div :class="s.tableWrap">
<slot></slot>
<div :class="s.noData" v-if="!loading && list.length === 0">
<div>
<d-icon :class="s.icon" type="no-data"></d-icon>
<div :class="s.text">{{ text }}</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
list: {
type: Array,
default: [],
},
text: {
type: String,
default: '搜索不到您想要的数据~换个条件试一下',
},
loading: {
type: Boolean,
default: false,
},
},
data() {
return {};
},
};
</script>
<style lang="scss" module="s">
.tableWrap {
position: relative;
}
.noData {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
> div {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.icon {
font-size: 60px;
color: $color-primary;
}
.text {
color: #80848f;
font-size: 14px;
margin: 8px 0 16px;
}
}
</style>
核心拓展
<script>
import VTableWrap from './TableWrap.vue';
export default {
components: {
VTableWrap,
},
props: {
spanConfig: {
type: Object,
default: () => ({
propList: [],
children: 'children',
key: '',
}),
},
},
data() {
return {
domTable: '',
loading: {},
};
},
computed: {
list() {
if (this.spanConfig.key) {
const arr = [];
this.$attrs.data.forEach((item) => {
if (item[this.spanConfig.children] && item[this.spanConfig.children].length) {
item[this.spanConfig.children].forEach((child) => {
arr.push({
...item,
...child,
});
});
} else {
arr.push({
...item,
});
}
});
return arr;
}
return this.$attrs.data;
},
// 合并多少个计算
spanArr() {
let contactDot = 0;
const spanArr = [];
this.list.forEach((item, index) => {
if (index === 0) {
spanArr.push(1);
} else {
if (item[this.spanConfig.key] === this.list[index - 1][this.spanConfig.key]) {
spanArr[contactDot] += 1;
spanArr.push(0);
} else {
spanArr.push(1);
contactDot = index;
}
}
});
return spanArr;
},
// 取要合并的index
spanIndex() {
const propList = this.$attrs.columns.map((item) => item.prop || item.property);
return this.spanConfig.propList.map((prop) => (
propList.findIndex((key) => key === prop)
));
},
},
mounted() {
this.$nextTick(() => {
// 此处勿使用document 会区找寻windows 作用域下生成的所有dom元素
this.domTable = this.$refs.table.$el.querySelector('.el-table__body');
if (this.domTable) {
this.loading = this.$loading({
lock: true,
customClass: this.s.customLoding,
text: '',
spinner: 'el-icon-loading',
target: this.$refs.table.$el.querySelector('.el-table__body'),
});
// 加载因为 render函数渲染执行 顺序 此处需关闭
if (this.$attrs.loading === undefined) {
this.loading.close();
} else {
this.loading.visible = this.$attrs.loading;
}
}
});
},
render(createElement) {
const { columns = [] } = this.$attrs;
// 加载
this.$nextTick(() => {
this.$refs.table.doLayout();
if (this.domTable) {
if (this.$attrs.loading === undefined) {
this.loading.close();
} else {
this.loading.visible = this.$attrs.loading;
}
}
});
// 加上递归
const tableColumn = (item, index) => createElement(
'el-table-column',
{
props: {
...item,
},
key: `${item.label}-${index}`,
scopedSlots: {
default: this.$scopedSlots[item.slotName] || '',
header: this.$scopedSlots[item.slotHeaderName] || '',
},
},
[
item.children
&& item.children.length
&& item.children.map((list, index) => tableColumn(list, index)),
],
);
const table = createElement(
'el-table',
{
ref: 'table',
props: {
headerRowClassName: 'custom-table-header',
'span-method': this.objectSpanMethod,
...this.$attrs,
data: this.list,
},
on: {
...this.$listeners,
},
scopedSlots: {
append: this.$scopedSlots.append,
},
},
[...columns.map((item, index) => tableColumn(item, index))],
);
return createElement('VTableWrap', {
props: {
text: this.$attrs.emptyText,
loading: this.$attrs.loading,
list: this.$attrs.data,
},
}, [table]);
},
methods: {
objectSpanMethod({
rowIndex,
columnIndex,
}) {
if (this.spanIndex.includes(columnIndex)) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
},
clearSelection() {
this.$refs.table.clearSelection();
},
toggleRowSelection(row, selected) {
this.$refs.table.toggleRowSelection(row, selected);
},
toggleAllSelection() {
this.$refs.table.toggleRowSelection();
},
toggleRowExpansion(row, expanded) {
this.$refs.table.toggleRowExpansion(row, expanded);
},
setCurrentRow(row) {
this.$refs.table.setCurrentRow(row);
},
clearSort() {
this.$refs.table.clearSort();
},
clearFilter(columnKey) {
this.$refs.table.clearFilter(columnKey);
},
doLayout() {
this.$refs.table.doLayout();
},
sort(prop, order) {
this.$refs.table.sort(prop, order);
},
},
};
</script>
<style lang="scss" module="s">
.customLoding {
right: 1px;
bottom: 1px;
height: 100%;
:global(.el-icon-loading){
display: none;
}
}
</style>
文档
TablePlus Attributes
| data | 显示的数据 | array | — | — |
| height | Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。 | string/number | — | — |
| max-height | Table 的最大高度。合法的值为数字或者单位为 px 的高度。 | string/number | — | — |
| stripe | 是否为斑马纹 table | boolean | — | false |
| border | 是否带有纵向边框 | boolean | — | false |
| size | Table 的尺寸 | string | medium / small / mini | — |
| fit | 列的宽度是否自撑开 | boolean | — | true |
| show-header | 是否显示表头 | boolean | — | true |
| highlight-current-row | 是否要高亮当前行 | boolean | — | false |
| current-row-key | 当前行的 key，只写属性 | String,Number | — | — |
| row-class-name | 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 | Function({row, rowIndex})/String | — | — |
| row-style | 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 | Function({row, rowIndex})/Object | — | — |
| cell-class-name | 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。 | Function({row, column, rowIndex, columnIndex})/String | — | — |
| cell-style | 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 | Function({row, column, rowIndex, columnIndex})/Object | — | — |
| header-row-class-name | 表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。 | Function({row, rowIndex})/String | — | — |
| header-row-style | 表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。 | Function({row, rowIndex})/Object | — | — |
| header-cell-class-name | 表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。 | Function({row, column, rowIndex, columnIndex})/String | — | — |
| header-cell-style | 表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。 | Function({row, column, rowIndex, columnIndex})/Object | — | — |
| row-key | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。 | Function(row)/String | — | — |
| empty-text | 空数据时显示的文本内容，也可以通过 slot="empty" 设置 | String | — | 暂无数据 |
| default-expand-all | 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 | Boolean | — | false |
| expa nd-row-keys | 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。 | Array | — | |
| default-sort | 默认的排序列的 prop 和顺序。它的prop属性指定默认的排序的列，order指定默认排序的顺序 | Object | order: ascending, descending | 如果只指定了prop, 没有指定order, 则默认顺序是ascending |
| tooltip-effect | tooltip effect 属性 | String | dark/light | |
| show-summary | 是否在表尾显示合计行 | Boolean | — | false |
| sum-text | 合计行第一列的文本 | String | — | 合计 |
| summary-method | 自定义的合计计算方法 | Function({ columns, data }) | — | — |
| span-method | 合并行或列的计算方法 | Function({ row, column, rowIndex, columnIndex }) | — | — |
| select-on-indeterminate | 在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行 | Boolean | — | true |
| indent | 展示树形数据时，树节点的缩进 | Number | — | 16 |
| lazy | 是否懒加载子节点数据 | Boolean | — | — |
| load | 加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息 | Function(row, treeNode, resolve) | — | — |
| tree-props | 渲染嵌套数据的配置选项 | Object | — | { hasChildren: 'hasChildren', children: 'children' } |
-分割线- | --- | --- | --- | --- |
| columns | 列表配置 | array | column | [] |
| spanConfig | 合并表格配置 | object | spanConfig | [] |
| slotName | 自定义插槽名字 | string | - | - |
| select | 当用户手动勾选数据行的 Checkbox 时触发的事件 | selection, row |
| select-all | 当用户手动勾选全选 Checkbox 时触发的事件 | selection |
| selection-change | 当选择项发生变化时会触发该事件 | selection |
| cell-mouse-enter | 当单元格 hover 进入时会触发该事件 | row, column, cell, event |
| cell-mouse-leave | 当单元格 hover 退出时会触发该事件 | row, column, cell, event |
| cell-click | 当某个单元格被点击时会触发该事件 | row, column, cell, event |
| cell-dblclick | 当某个单元格被双击击时会触发该事件 | row, column, cell, event |
| row-click | 当某一行被点击时会触发该事件 | row, column, event |
| row-contextmenu | 当某一行被鼠标右键点击时会触发该事件 | row, column, event |
| row-dblclick | 当某一行被双击时会触发该事件 | row, column, event |
| header-click | 当某一列的表头被点击时会触发该事件 | column, event |
| header-contextmenu | 当某一列的表头被鼠标右键点击时触发该事件 | column, event |
| sort-change | 当表格的排序条件发生变化的时候会触发该事件 | { column, prop, order } |
| filter-change | 当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。 | filters |
| current-change | 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 | currentRow, oldCurrentRow |
| header-dragend | 当拖动表头改变了列的宽度的时候会触发该事件 | newWidth, oldWidth, column, event |
| expand-change | 当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded） | row, (expandedRows | expanded) |
| clearSelection | 用于多选表格，清空用户的选择 | — |
| toggleRowSelection | 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） | row, selected |
| toggleAllSelection | 用于多选表格，切换所有行的选中状态 | - |
| toggleRowExpansion | 用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开） | row, expanded |
| setCurrentRow | 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。 | row |
| clearSort | 用于清空排序条件，数据会恢复成未排序的状态 | — |
| clearFilter | 不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件 | columnKey |
| doLayout | 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法 | — |
| sort | 手动对 Table 进行排序。参数prop属性指定排序列，order指定排序顺序。 | prop: string, order: string |
| type | 对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮 | string | selection/index/expand/handler | — |
| index | 如果设置了 type=index，可以通过传递 index 属性来自定义索引 | number, Function(index) | - | - |
| column-key | column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 | string | — | — |
| label | 显示的标题 | string | — | — |
| prop | 对应列内容的字段名，也可以使用 property 属性 | string | — | — |
| width | 对应列的宽度 | string | — | — |
| min-width | 对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 | string | — | — |
| fixed | 列是否固定在左侧或者右侧，true 表示固定在左侧 | string, boolean | true, left, right | — |
| render-header | 列标题 Label 区域渲染使用的 Function | Function(h, { column, $index }) | — | — |
| sortable | 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 | boolean, string | true, false, 'custom' | false |
| sort-method | 对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致 | Function(a, b) | — | — |
| sort-by | 指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推 | String/Array/Function(row, index) | — | — |
| sort-orders | 数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序 | array | 数组中的元素需为以下三者之一：ascending 表示升序，descending 表示降序，null 表示还原为原始顺序 | ['ascending', 'descending', null] |
| resizable | 对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真） | boolean | — | true |
| formatter | 用来格式化内容 | Function(row, column, cellValue, index) | — | — |
| show-overflow-tooltip | 当内容过长被隐藏时显示 tooltip | Boolean | — | false |
| align | 对齐方式 | String | left/center/right | left |
| header-align | 表头对齐方式，若不设置该项，则使用表格的对齐方式 | String | left/center/right | — |
| class-name | 列的 className | string | — | — |
| label-class-name | 当前列标题的自定义类名 | string | — | — |
| selectable | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | < td>Function(row, index)— | — | |
| reserve-selection | 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key） | Boolean | — | false |
| filters | 数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。 | Array[{ text, value }] | — | — |
| filter-placement | 过滤弹出框的定位 | String | 与 Tooltip 的 placement 属性相同 | — |
| filter-multiple | 数据过滤的选项是否多选 | Boolean | — | true |
| filter-method | 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。 | Function(value, row, column) | — | — |
| filtered-value | 选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。 | Array | — | — |
-分割线- | --- | --- | --- | --- |
| slotHeaderName | 自定义表头插槽名字 | string | - | - |
| key | 根据key 合并 | string | - | - |
| propList | 需要合并的prop或者property 的key值 | array | [] | |
| children | 平铺转换列表对应的key,传children内部会帮转换，否则需要自己转换 | string | — | children |
自定义列的显示内容，可组合其他组件使用。
:::demo 通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。
<div>
<d-table-plus :columns="columns" :data="tableData">
<template #date="{row}">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ row.date }}</span>
</template>
<template #handler="{ row }">
<el-button type="text" size="small" @click="handlerAdd(row)"
>新增</el-button
>
<el-button type="text" size="small">编辑</el-button>
</template>
</d-table-plus>
</div>
<script>
export default {
data() {
return {
columns: [
{
label: '日期',
prop: 'date',
align: 'center',
slotName: 'date',
},
{
label: '姓名',
width: '100px',
prop: 'name',
required: true,
align: 'center',
formatter: (row) => `${row.name}1111`,
},
{
label: '省份',
prop: 'province',
},
{
label: '市区',
prop: 'city',
},
{
label: '地址',
prop: 'address',
showOverflowTooltip: true,
},
{
label: '操作',
type: 'handler',
width: '150px',
fixed: 'right',
slotName: 'handler',
},
],
tableData: [
{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333,
},
{
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333,
},
{
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333,
},
{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333,
},
],
};
},
};
</script>
到此这篇关于vue基于el-table拓展之table-plus组件的文章就介绍到这了,更多相关vue table-plus内容请搜索易知道(ezd.cc)以前的文章或继续浏览下面的相关文章希望大家以后多多支持易知道(ezd.cc)！
