-
Notifications
You must be signed in to change notification settings - Fork 363
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Table): support rows highlight (#3442)
* feat(Table): support row highlight * chore: update snapshot * chore: update snapshot * chore: update snapshot
- Loading branch information
Showing
13 changed files
with
853 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| <template> | ||
| <t-space direction="vertical"> | ||
| <t-space align="center"> | ||
| <t-radio-group v-model="activeRowType" variant="default-filled"> | ||
| <t-radio-button value="">不高亮</t-radio-button> | ||
| <t-radio-button value="single">单行高亮</t-radio-button> | ||
| <t-radio-button value="multiple">多行高亮</t-radio-button> | ||
| </t-radio-group> | ||
| <t-checkbox v-model="hover"> 显示悬浮效果 </t-checkbox> | ||
| </t-space> | ||
|
|
||
| <!-- v-model:activeRowKeys 父组件控制高亮行 --> | ||
| <!-- defaultActiveRowKeys 组件内部控制高亮行，父组件无法使用这个属性控制 --> | ||
| <t-table | ||
| row-key="key" | ||
| :data="tableData" | ||
| :columns="columns" | ||
| :active-row-type="activeRowType" | ||
| :hover="hover" | ||
| @active-change="onActiveChange" | ||
| ></t-table> | ||
| </t-space> | ||
| </template> | ||
|
|
||
| <script></script> | ||
|
|
||
| <script setup> | ||
| import { ref, watch } from 'vue'; | ||
| export default { | ||
| name: 'HighlightTable', | ||
| }; | ||
| const activeRowType = ref('single'); | ||
| const hover = ref(false); | ||
| const tableData = getTableData(); | ||
| const columns = [ | ||
| { colKey: 'applicant', title: '申请人', width: '100' }, | ||
| { colKey: 'channel', title: '签署方式' }, | ||
| { colKey: 'detail.email', title: '邮箱地址', ellipsis: true }, | ||
| { colKey: 'createTime', title: '申请时间' }, | ||
| ]; | ||
| const onActiveChange = (highlightRowKeys, ctx) => { | ||
| console.log(highlightRowKeys, ctx); | ||
| }; | ||
| watch([activeRowType], ([activeRowType]) => { | ||
| if (!activeRowType) { | ||
| hover.value = true; | ||
| } | ||
| }); | ||
| function getTableData(total = 5) { | ||
| const data = []; | ||
| for (let i = 0; i < total; i++) { | ||
| data.push({ | ||
| key: i + 1, | ||
| applicant: ['贾明', '张三', '王芳'][i % 3], | ||
| status: i % 3, | ||
| channel: ['电子签署', '纸质签署', '纸质签署'][i % 3], | ||
| detail: { | ||
| email: ['w.cezkdudy@lhll.au', 'r.nmgw@peurezgn.sl', 'p.cumx@rampblpa.ru'][i % 3], | ||
| }, | ||
| matters: ['宣传物料制作费用', 'algolia 服务报销', '相关周边制作费', '激励奖品快递费'][i % 4], | ||
| time: [2, 3, 1, 4][i % 4], | ||
| createTime: ['2022-01-01', '2022-02-01', '2022-03-01', '2022-04-01', '2022-05-01'][i % 4], | ||
| }); | ||
| } | ||
| return data; | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| <template> | ||
| <t-space direction="vertical"> | ||
| <t-space align="center"> | ||
| <t-radio-group v-model="activeRowType" variant="default-filled"> | ||
| <t-radio-button value="">不高亮</t-radio-button> | ||
| <t-radio-button value="single">单行高亮</t-radio-button> | ||
| <t-radio-button value="multiple">多行高亮</t-radio-button> | ||
| </t-radio-group> | ||
| <t-checkbox v-model="hover"> 显示悬浮效果 </t-checkbox> | ||
| </t-space> | ||
|
|
||
| <!-- v-model:activeRowKeys 父组件控制高亮行 --> | ||
| <!-- defaultActiveRowKeys 组件内部控制高亮行，父组件无法使用这个属性控制 --> | ||
| <t-table | ||
| row-key="key" | ||
| :data="tableData" | ||
| :columns="columns" | ||
| :active-row-type="activeRowType" | ||
| :hover="hover" | ||
| @active-change="onActiveChange" | ||
| ></t-table> | ||
| </t-space> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| data() { | ||
| return { | ||
| hover: false, | ||
| tableData: [], | ||
| activeRowType: 'single', | ||
| columns: [ | ||
| { colKey: 'applicant', title: '申请人', width: '100' }, | ||
| { colKey: 'channel', title: '签署方式' }, | ||
| { colKey: 'detail.email', title: '邮箱地址', ellipsis: true }, | ||
| { colKey: 'createTime', title: '申请时间' }, | ||
| ], | ||
| }; | ||
| }, | ||
| watch: { | ||
| activeRowType(v) { | ||
| if (!v) { | ||
| this.hover = true; | ||
| } | ||
| }, | ||
| }, | ||
| mounted() { | ||
| this.tableData = this.getTableData(); | ||
| }, | ||
| methods: { | ||
| getTableData(total = 5) { | ||
| const data = []; | ||
| for (let i = 0; i < total; i++) { | ||
| data.push({ | ||
| key: i + 1, | ||
| applicant: ['贾明', '张三', '王芳'][i % 3], | ||
| status: i % 3, | ||
| channel: ['电子签署', '纸质签署', '纸质签署'][i % 3], | ||
| detail: { | ||
| email: ['w.cezkdudy@lhll.au', 'r.nmgw@peurezgn.sl', 'p.cumx@rampblpa.ru'][i % 3], | ||
| }, | ||
| matters: ['宣传物料制作费用', 'algolia 服务报销', '相关周边制作费', '激励奖品快递费'][i % 4], | ||
| time: [2, 3, 1, 4][i % 4], | ||
| createTime: ['2022-01-01', '2022-02-01', '2022-03-01', '2022-04-01', '2022-05-01'][i % 4], | ||
| }); | ||
| } | ||
| return data; | ||
| }, | ||
| onActiveChange(highlightRowKeys, ctx) { | ||
| console.log(highlightRowKeys, ctx); | ||
| }, | ||
| }, | ||
| }; | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import { | ||
| toRefs, Ref, ref, computed, | ||
| } from '@vue/composition-api'; | ||
| import get from 'lodash/get'; | ||
| import { BaseTableProps } from '../interface'; | ||
| import { on, off } from '../../utils/dom'; | ||
| import { ARROW_DOWN_REG, ARROW_UP_REG, SPACE_REG } from '../../_common/js/common'; | ||
| import { RowEventContext, TableRowData } from '../type'; | ||
|
|
||
| /** | ||
| * 需要进行表格行操作时，则需要键盘操作的悬浮效果来表达当前的哪一行 | ||
| * 如：高亮多行、行选中、行展开等功能 | ||
| */ | ||
| export function useHoverKeyboardEvent(props: BaseTableProps, tableRef: Ref<HTMLDivElement>) { | ||
| const { | ||
| hover, data, activeRowType, keyboardRowHover, | ||
| } = toRefs(props); | ||
| const hoverRow = ref<string | number>(); | ||
| const currentHoverRowIndex = ref(-1); | ||
|
|
||
| // 单行高亮场景，不需要键盘悬浮效果 | ||
| const needKeyboardRowHover = computed(() => { | ||
| if (activeRowType.value === 'single') return false; | ||
| if (activeRowType.value === 'multiple') return true; | ||
| return hover.value || keyboardRowHover.value; | ||
| }); | ||
|
|
||
| const onHoverRow = (ctx: RowEventContext<TableRowData>, extra?: { action?: 'hover' }) => { | ||
| const rowValue = get(ctx.row, props.rowKey); | ||
| if (hoverRow.value === rowValue && extra?.action !== 'hover') { | ||
| hoverRow.value = undefined; | ||
| } else { | ||
| hoverRow.value = rowValue; | ||
| } | ||
| currentHoverRowIndex.value = ctx.index; | ||
| }; | ||
|
|
||
| const clearHoverRow = () => { | ||
| hoverRow.value = undefined; | ||
| currentHoverRowIndex.value = -1; | ||
| }; | ||
|
|
||
| const keyboardDownListener = (e: KeyboardEvent) => { | ||
| if (!needKeyboardRowHover.value) return; | ||
| const code = e.key?.trim() || e.code; | ||
| if (ARROW_DOWN_REG.test(code)) { | ||
| e.preventDefault(); | ||
| const index = Math.min(data.value.length - 1, currentHoverRowIndex.value + 1); | ||
| onHoverRow({ row: data.value[index], index, e }, { action: 'hover' }); | ||
| } else if (ARROW_UP_REG.test(code)) { | ||
| e.preventDefault(); | ||
| const index = Math.max(0, currentHoverRowIndex.value - 1); | ||
| onHoverRow({ row: data.value[index], index, e }, { action: 'hover' }); | ||
| } else if (SPACE_REG.test(code) && props.activeRowType !== 'multiple') { | ||
| const index = currentHoverRowIndex.value; | ||
| onHoverRow({ row: data.value[index], index, e }); | ||
| } | ||
| }; | ||
|
|
||
| const addRowHoverKeyboardListener = () => { | ||
| on(tableRef.value, 'keydown', keyboardDownListener); | ||
| }; | ||
|
|
||
| const removeRowHoverKeyboardListener = () => { | ||
| off(tableRef.value, 'keydown', keyboardDownListener); | ||
| }; | ||
|
|
||
| return { | ||
| hoverRow, | ||
| needKeyboardRowHover, | ||
| clearHoverRow, | ||
| addRowHoverKeyboardListener, | ||
| removeRowHoverKeyboardListener, | ||
| }; | ||
| } | ||
|
|
||
| export default useHoverKeyboardEvent; |
Oops, something went wrong.