forked from opentiny/tiny-vue
fix(build): fix build error and update versions (#1269)
* fix(pager): [pager] change pager content to unicode (#1251) * fix(build): fix build error and update versions * fix(build): update theme version * fix(vue): [grid] fix show icon condition (#1259) * docs(grid): [grid] fix grid docs (#1260) * docs(grid): [grid] fix grid docs * docs(grid): [grid] fix grid docs --------- Co-authored-by: gimmyhehe <975402925@qq.com>
This commit is contained in:
ajaxzheng
GitHub
parent
9b7e036d8f
commit
635f940232
|
|
@ -6,6 +6,7 @@
|
|||
value-format="yyyy-MM"
|
||||
@change="handleChange"
|
||||
></tiny-date-picker>
|
||||
<br />
|
||||
<tiny-grid
|
||||
ref="gridRef"
|
||||
:fetch-data="fetchData"
|
||||
|
|
@ -14,7 +15,7 @@
|
|||
:edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
|
||||
>
|
||||
<tiny-grid-column title="Group" field="group" header-align="center"> </tiny-grid-column>
|
||||
<tiny-grid-column v-for="(item, index) in item" :key="index" :title="item.title" header-align="center">
|
||||
<tiny-grid-column v-for="(item, index) in itemArr" :key="index" :title="item.title" header-align="center">
|
||||
<tiny-grid-column
|
||||
v-for="(item1, i) in item.content"
|
||||
:key="i"
|
||||
|
|
@ -41,7 +42,7 @@ const pagerConfig = ref({
|
|||
}
|
||||
})
|
||||
const value = ref([new Date(2020, 1), new Date()])
|
||||
const item = ref([])
|
||||
const itemArr = ref([])
|
||||
const tableData = ref([
|
||||
{
|
||||
id: '1',
|
||||
|
|
@ -178,7 +179,7 @@ function getData({ page, filterArgs }) {
|
|||
|
||||
function forWeek(week) {
|
||||
week.forEach((i) => {
|
||||
item.value.push({
|
||||
itemArr.value.push({
|
||||
title: `${i}`,
|
||||
content: [
|
||||
{ field: `W1${i}`, title: 'W1' },
|
||||
|
|
@ -192,7 +193,7 @@ function forWeek(week) {
|
|||
|
||||
function handleChange(val) {
|
||||
if (val && val.length > 1) {
|
||||
item.value = []
|
||||
itemArr.value = []
|
||||
let monthLen = getMonthBetween(val[0], val[1])
|
||||
|
||||
forWeek(monthLen)
|
||||
|
|
@ -212,6 +213,7 @@ function getMonthBetween(start, end) {
|
|||
max.setFullYear(e[0], e[1] * 1 - 1, 1) // 结束日期
|
||||
let curr = min
|
||||
|
||||
// eslint-disable-next-line no-unmodified-loop-condition
|
||||
while (curr <= max) {
|
||||
let month = curr.getMonth()
|
||||
result.push(month + 1)
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
value-format="yyyy-MM"
|
||||
@change="handleChange"
|
||||
></tiny-date-picker>
|
||||
<br />
|
||||
<tiny-grid
|
||||
ref="grid"
|
||||
:fetch-data="fetchData"
|
||||
|
|
@ -14,7 +15,7 @@
|
|||
:edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
|
||||
>
|
||||
<tiny-grid-column title="Group" field="group" header-align="center"> </tiny-grid-column>
|
||||
<tiny-grid-column v-for="(item, index) in item" :key="index" :title="item.title" header-align="center">
|
||||
<tiny-grid-column v-for="(item, index) in itemArr" :key="index" :title="item.title" header-align="center">
|
||||
<tiny-grid-column
|
||||
v-for="(item1, i) in item.content"
|
||||
:key="i"
|
||||
|
|
@ -48,7 +49,7 @@ export default {
|
|||
}
|
||||
},
|
||||
value: [new Date(2020, 1), new Date()],
|
||||
item: [],
|
||||
itemArr: [],
|
||||
tableData: [
|
||||
{
|
||||
id: '1',
|
||||
|
|
@ -184,7 +185,7 @@ export default {
|
|||
},
|
||||
forWeek(week) {
|
||||
week.forEach((i) => {
|
||||
this.item.push({
|
||||
this.itemArr.push({
|
||||
title: `${i}`,
|
||||
content: [
|
||||
{ field: `W1${i}`, title: 'W1' },
|
||||
|
|
@ -197,7 +198,7 @@ export default {
|
|||
},
|
||||
handleChange(val) {
|
||||
if (val && val.length > 1) {
|
||||
this.item = []
|
||||
this.itemArr = []
|
||||
let monthLen = this.getMonthBetween(val[0], val[1])
|
||||
|
||||
this.forWeek(monthLen)
|
||||
|
|
@ -216,6 +217,7 @@ export default {
|
|||
max.setFullYear(e[0], e[1] * 1 - 1, 1) // 结束日期
|
||||
let curr = min
|
||||
|
||||
// eslint-disable-next-line no-unmodified-loop-condition
|
||||
while (curr <= max) {
|
||||
let month = curr.getMonth()
|
||||
result.push(month + 1)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="reverseTable" :reset-time="0">表格反转</tiny-button>
|
||||
<div><tiny-button @click="reverseTable" :reset-time="0">表格反转</tiny-button></div>
|
||||
<br />
|
||||
<tiny-grid :data="tableData" :columns="tableColumn" :show-header="false"> </tiny-grid>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -146,6 +147,7 @@ function reverseTable() {
|
|||
width: 120
|
||||
}
|
||||
}
|
||||
return undefined
|
||||
})
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="reverseTable" :reset-time="0">表格反转</tiny-button>
|
||||
<div><tiny-button @click="reverseTable" :reset-time="0">表格反转</tiny-button></div>
|
||||
<br />
|
||||
<tiny-grid :data="tableData" :columns="tableColumn" :show-header="false"> </tiny-grid>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -156,6 +157,7 @@ export default {
|
|||
width: 120
|
||||
}
|
||||
}
|
||||
return undefined
|
||||
})
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="boxVisibility = true">弹出Dialog{{ boxVisibility }}</tiny-button>
|
||||
<tiny-button @click="boxVisibility = true">弹出 Dialog {{ boxVisibility }}</tiny-button>
|
||||
<tiny-dialog-box v-model:visible="boxVisibility" title="消息" width="30%">
|
||||
<tiny-grid
|
||||
:data="tableData"
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
|
|||
test('弹窗框中表格编辑器失焦功能测试', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('grid-faq#faq-grid-in-dialog-box')
|
||||
await page.getByRole('button', { name: '弹出Dialogfalse' }).click()
|
||||
await page.getByRole('button', { name: '弹出 Dialog false' }).click()
|
||||
await page.getByText('GFD科技有限公司').first().click()
|
||||
await page
|
||||
.getByRole('row', {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="boxVisibility = true">弹出Dialog{{ boxVisibility }}</tiny-button>
|
||||
<tiny-button @click="boxVisibility = true">弹出 Dialog {{ boxVisibility }}</tiny-button>
|
||||
<tiny-dialog-box v-model:visible="boxVisibility" title="消息" width="30%">
|
||||
<tiny-grid
|
||||
:data="tableData"
|
||||
|
|
|
|||
|
|
@ -20,21 +20,6 @@ const filteData = [
|
|||
{ label: '龙岩', value: '龙岩' },
|
||||
{ label: '韶关', value: '韶关' }
|
||||
]
|
||||
|
||||
const toolbarButtons = ref([
|
||||
{
|
||||
code: 'clearFilter',
|
||||
name: '清空表格所有过滤条件'
|
||||
},
|
||||
{
|
||||
code: 'clearFilterName',
|
||||
name: '清空表格name字段的过滤条件'
|
||||
},
|
||||
{
|
||||
code: 'closeFilter',
|
||||
name: '手动关闭筛选面板'
|
||||
}
|
||||
])
|
||||
const tableData = ref([
|
||||
{
|
||||
id: '1',
|
||||
|
|
|
|||
|
|
@ -18,6 +18,6 @@ test('过滤高级设置', async ({ page }) => {
|
|||
await expect(page.getByRole('cell', { name: 'WWW科技YX公司' })).toHaveCount(1)
|
||||
|
||||
// 清楚筛选
|
||||
await page.getByRole('button', { name: '清空表格name字段的过滤条件' }).click()
|
||||
await page.getByRole('button', { name: '清空表格 name 字段的过滤条件' }).click()
|
||||
await expect(page.getByRole('cell', { name: 'RFV有限责任公司' })).toHaveCount(1)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -27,20 +27,6 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
toolbarButtons: [
|
||||
{
|
||||
code: 'clearFilter',
|
||||
name: '清空表格所有过滤条件'
|
||||
},
|
||||
{
|
||||
code: 'clearFilterName',
|
||||
name: '清空表格name字段的过滤条件'
|
||||
},
|
||||
{
|
||||
code: 'closeFilter',
|
||||
name: '手动关闭筛选面板'
|
||||
}
|
||||
],
|
||||
tableData: [
|
||||
{
|
||||
id: '1',
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('设置列筛选规则', async ({ page }) => {
|
||||
test('列筛选规则', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('grid-filter#filter-custom-filter')
|
||||
await page.getByRole('cell', { name: '名称' }).getByRole('img').click()
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ const toolbarButtons = ref([
|
|||
},
|
||||
{
|
||||
code: 'clearFilterName',
|
||||
name: '清空表格name字段的过滤条件'
|
||||
name: '清空表格 name 字段的过滤条件'
|
||||
},
|
||||
{
|
||||
code: 'closeFilter',
|
||||
|
|
|
|||
|
|
@ -18,6 +18,6 @@ test('表格过滤', async ({ page }) => {
|
|||
await expect(page.getByRole('cell', { name: 'WWW科技YX公司' })).toHaveCount(1)
|
||||
|
||||
// 清楚筛选
|
||||
await page.getByRole('button', { name: '清空表格name字段的过滤条件' }).click()
|
||||
await page.getByRole('button', { name: '清空表格 name 字段的过滤条件' }).click()
|
||||
await expect(page.getByRole('cell', { name: 'RFV有限责任公司' })).toHaveCount(1)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ export default {
|
|||
},
|
||||
{
|
||||
code: 'clearFilterName',
|
||||
name: '清空表格name字段的过滤条件'
|
||||
name: '清空表格 name 字段的过滤条件'
|
||||
},
|
||||
{
|
||||
code: 'closeFilter',
|
||||
|
|
|
|||
|
|
@ -13,20 +13,6 @@
|
|||
import { ref } from 'vue'
|
||||
import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal, Input } from '@opentiny/vue'
|
||||
|
||||
const toolbarButtons = ref([
|
||||
{
|
||||
code: 'clearFilter',
|
||||
name: '清空表格所有过滤条件'
|
||||
},
|
||||
{
|
||||
code: 'clearFilterName',
|
||||
name: '清空表格name字段的过滤条件'
|
||||
},
|
||||
{
|
||||
code: 'closeFilter',
|
||||
name: '手动关闭筛选面板'
|
||||
}
|
||||
])
|
||||
const tableData = ref([
|
||||
{
|
||||
id: '1',
|
||||
|
|
|
|||
|
|
@ -19,20 +19,6 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
toolbarButtons: [
|
||||
{
|
||||
code: 'clearFilter',
|
||||
name: '清空表格所有过滤条件'
|
||||
},
|
||||
{
|
||||
code: 'clearFilterName',
|
||||
name: '清空表格name字段的过滤条件'
|
||||
},
|
||||
{
|
||||
code: 'closeFilter',
|
||||
name: '手动关闭筛选面板'
|
||||
}
|
||||
],
|
||||
tableData: [
|
||||
{
|
||||
id: '1',
|
||||
|
|
|
|||
|
|
@ -21,20 +21,6 @@ const filteData = [
|
|||
{ label: '韶关', value: '韶关' }
|
||||
]
|
||||
|
||||
const toolbarButtons = ref([
|
||||
{
|
||||
code: 'clearFilter',
|
||||
name: '清空表格所有过滤条件'
|
||||
},
|
||||
{
|
||||
code: 'clearFilterName',
|
||||
name: '清空表格name字段的过滤条件'
|
||||
},
|
||||
{
|
||||
code: 'closeFilter',
|
||||
name: '手动关闭筛选面板'
|
||||
}
|
||||
])
|
||||
const tableData = ref([
|
||||
{
|
||||
id: '1',
|
||||
|
|
|
|||
|
|
@ -27,20 +27,6 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
toolbarButtons: [
|
||||
{
|
||||
code: 'clearFilter',
|
||||
name: '清空表格所有过滤条件'
|
||||
},
|
||||
{
|
||||
code: 'clearFilterName',
|
||||
name: '清空表格name字段的过滤条件'
|
||||
},
|
||||
{
|
||||
code: 'closeFilter',
|
||||
name: '手动关闭筛选面板'
|
||||
}
|
||||
],
|
||||
tableData: [
|
||||
{
|
||||
id: '1',
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('设置配置式的统计', async ({ page }) => {
|
||||
test('配置式的统计', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('grid-footer#footer-configuration-summary')
|
||||
await expect(page.getByText('5310.00')).toBeVisible()
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="click">setCurrentRow</tiny-button>
|
||||
<div>
|
||||
<tiny-button @click="click">setCurrentRow</tiny-button>
|
||||
</div>
|
||||
<br />
|
||||
<tiny-grid
|
||||
:data="tableData"
|
||||
ref="gridRef"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="click">setCurrentRow</tiny-button>
|
||||
<div>
|
||||
<tiny-button @click="click">setCurrentRow</tiny-button>
|
||||
</div>
|
||||
<br />
|
||||
<tiny-grid
|
||||
:data="tableData"
|
||||
ref="grid"
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="scrollTo">滚动到对应的位置</tiny-button>
|
||||
<tiny-button @click="scrollToRow">滚动到第50行</tiny-button>
|
||||
<tiny-button @click="scrollToColumn">滚动到500列</tiny-button>
|
||||
<div>
|
||||
<tiny-button @click="scrollTo">滚动到对应的位置</tiny-button>
|
||||
<tiny-button @click="scrollToRow">滚动到第50行</tiny-button>
|
||||
<tiny-button @click="scrollToColumn">滚动到500列</tiny-button>
|
||||
</div>
|
||||
<br />
|
||||
<tiny-grid ref="tinyGridRef" height="300"> </tiny-grid>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="scrollTo">滚动到对应的位置</tiny-button>
|
||||
<tiny-button @click="scrollToRow">滚动到第50行</tiny-button>
|
||||
<tiny-button @click="scrollToColumn">滚动到500列</tiny-button>
|
||||
<div>
|
||||
<tiny-button @click="scrollTo">滚动到对应的位置</tiny-button>
|
||||
<tiny-button @click="scrollToRow">滚动到第50行</tiny-button>
|
||||
<tiny-button @click="scrollToColumn">滚动到500列</tiny-button>
|
||||
</div>
|
||||
<br />
|
||||
<tiny-grid ref="tinyGrid" height="300"> </tiny-grid>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager } from '@opentiny/vue'
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,6 @@ import { test, expect } from '@playwright/test'
|
|||
test('使用第三方分页组件', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('grid-pager#pager-inner-pager')
|
||||
await page.getByRole('listitem').filter({ hasText: '2' }).click()
|
||||
await page.locator('.tiny-pager__pages li').filter({ hasText: '2' }).click()
|
||||
await expect(page.getByRole('cell', { name: '10' })).toBeVisible()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Grid, GridColumn, Pager } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</tiny-grid>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager, Modal } from '@opentiny/vue'
|
||||
|
||||
|
|
@ -87,10 +87,10 @@ const tableData = ref([
|
|||
])
|
||||
|
||||
function sortChangeEvent({ order }) {
|
||||
Modal.message({ message: `${order}`, status: 'info' })
|
||||
Modal.message({ message: `${order || '取消排序'}`, status: 'info' })
|
||||
}
|
||||
|
||||
function getData({ page, sort, data, filters }) {
|
||||
function getData({ page, filters }) {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
// 此处为用户自定义的服务端分页、排序、过滤服务
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</tiny-grid>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Grid, GridColumn, Pager, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -97,7 +97,7 @@ export default {
|
|||
sortChangeEvent({ order }) {
|
||||
Modal.message({ message: `${order}`, status: 'info' })
|
||||
},
|
||||
getData({ page, sort, data, filters }) {
|
||||
getData({ page, filters }) {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
// 此处为用户自定义的服务端分页、排序、过滤服务
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="click">手动排序sort</tiny-button>
|
||||
<div>
|
||||
<tiny-button @click="click">手动排序 sort</tiny-button>
|
||||
</div>
|
||||
<br />
|
||||
<tiny-grid
|
||||
:data="tableData"
|
||||
ref="gridRef"
|
||||
|
|
|
|||
|
|
@ -3,6 +3,6 @@ import { test, expect } from '@playwright/test'
|
|||
test('手动排序', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('grid-sort#sort-sort')
|
||||
await page.getByRole('button', { name: '手动排序sort' }).click()
|
||||
await page.getByRole('button', { name: '手动排序 sort' }).click()
|
||||
await expect(page.locator('.tiny-grid-body__row').first()).toContainText('300')
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="click">手动排序sort</tiny-button>
|
||||
<div>
|
||||
<tiny-button @click="click">手动排序 sort</tiny-button>
|
||||
</div>
|
||||
<br />
|
||||
<tiny-grid
|
||||
:data="tableData"
|
||||
ref="grid"
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ const toolbarButtons = ref([
|
|||
},
|
||||
{
|
||||
code: 'savePromise',
|
||||
name: '保存（Promise）'
|
||||
name: '保存 Promise'
|
||||
},
|
||||
{
|
||||
code: 'fullValidate',
|
||||
|
|
@ -178,12 +178,12 @@ function toolbarButtonClickEvent({ code }) {
|
|||
basicGridRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
TinyModal.alert('校验成功，触发了then！')
|
||||
TinyModal.alert('校验成功，触发了 then！')
|
||||
})
|
||||
.catch((error) => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(error)
|
||||
TinyModal.alert('校验不通过，触发了catch')
|
||||
TinyModal.alert('校验不通过，触发了 catch')
|
||||
})
|
||||
break
|
||||
}
|
||||
|
|
@ -191,12 +191,12 @@ function toolbarButtonClickEvent({ code }) {
|
|||
basicGridRef.value
|
||||
.fullValidate()
|
||||
.then(() => {
|
||||
TinyModal.alert('校验成功，触发了then！')
|
||||
TinyModal.alert('校验成功，触发了 then！')
|
||||
})
|
||||
.catch((error) => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(error)
|
||||
TinyModal.alert('校验不通过，触发了catch')
|
||||
TinyModal.alert('校验不通过，触发了 catch')
|
||||
})
|
||||
break
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,6 @@ test('提交前校验', async ({ page }) => {
|
|||
await expect(page.getByText('校验不通过', { exact: true })).toBeVisible()
|
||||
|
||||
await page.getByRole('button', { name: '确认' }).click()
|
||||
await page.getByRole('button', { name: '保存（Promise）' }).click()
|
||||
await expect(page.getByText('校验不通过，触发了catch', { exact: true })).toBeVisible()
|
||||
await page.getByRole('button', { name: '保存 Promise' }).click()
|
||||
await expect(page.getByText('校验不通过，触发了 catch', { exact: true })).toBeVisible()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ export default {
|
|||
},
|
||||
{
|
||||
code: 'savePromise',
|
||||
name: '保存（Promise）'
|
||||
name: '保存 Promise'
|
||||
},
|
||||
{
|
||||
code: 'fullValidate',
|
||||
|
|
@ -181,12 +181,12 @@ export default {
|
|||
this.$refs.basicGrid
|
||||
.validate()
|
||||
.then(() => {
|
||||
TinyModal.alert('校验成功，触发了then！')
|
||||
TinyModal.alert('校验成功，触发了 then！')
|
||||
})
|
||||
.catch((error) => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(error)
|
||||
TinyModal.alert('校验不通过，触发了catch')
|
||||
TinyModal.alert('校验不通过，触发了 catch')
|
||||
})
|
||||
break
|
||||
}
|
||||
|
|
@ -194,12 +194,12 @@ export default {
|
|||
this.$refs.basicGrid
|
||||
.fullValidate()
|
||||
.then(() => {
|
||||
TinyModal.alert('校验成功，触发了then！')
|
||||
TinyModal.alert('校验成功，触发了 then！')
|
||||
})
|
||||
.catch((error) => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(error)
|
||||
TinyModal.alert('校验不通过，触发了catch')
|
||||
TinyModal.alert('校验不通过，触发了 catch')
|
||||
})
|
||||
break
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ export default {
|
|||
demos: [
|
||||
{
|
||||
'demoId': 'appearance-settings-grid-border',
|
||||
'name': { 'zh-CN': '边框设置', 'en-US': 'Basic Usage' },
|
||||
'name': { 'zh-CN': '边框', 'en-US': 'Basic Usage' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>表格属性设置 <code>border</code> 给表格加上边框。</p>\n',
|
||||
'en-US': '<p>Table property setting <code>border</code>Adds a border to the table. </p>\n'
|
||||
|
|
@ -16,7 +16,7 @@ export default {
|
|||
'name': { 'zh-CN': '斑马条纹', 'en-US': 'Basic Usage' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p> <code>stripe</code> 是否带有斑马纹 默认不开启。设置 <code>:stripe="true" </code>时开启(注:需要注意的是，在可编辑表格场景下，临时插入的数据不会有斑马纹样式)</p>\n',
|
||||
'<p> <code>stripe</code> 是否带有斑马纹 默认不开启。设置 <code>:stripe="true" </code>时开启(注:需要注意的是，在可编辑表格场景下，临时插入的数据不会有斑马纹样式)。</p>',
|
||||
'en-US':
|
||||
'Whether the <p> <code>stripe</code> has zebra prints is disabled by default. Enabled when <code>:stripe="true" </code> is set. (Note: In the editable table scenario, the data inserted temporarily does not have the zebra pattern.) </p>\n'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ export default {
|
|||
'name': { 'zh-CN': '表头菜单', 'en-US': 'Grid-right-click menu-header menu' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>配置 <code>:context-menu="{header: {options: headerMenus}, visibleMethod}"</code> 对象来控制表头菜单。\n<code>headerMenus</code> 里面配置 <code>visible</code> 是否显示菜单， <code>disabled</code> 是否禁用菜单项。\n可配合 <code>visibleMethod</code> 方法来控制菜单权限。\n<code>@context-menu-click</code> 监控菜单点击事件。\n具体参考下面示例。</p>\n',
|
||||
'<p>通过 <code>:context-menu="{header: {options: headerMenus}, visibleMethod}"</code> 对象来控制表头菜单。<code>headerMenus</code> 里面配置 <code>visible</code> 是否显示菜单， <code>disabled</code> 是否禁用菜单项。可配合 <code>visibleMethod</code> 方法来控制菜单权限。\n<code>@context-menu-click</code> 监控菜单点击事件。</p>',
|
||||
'en-US':
|
||||
'<p>Configure the <code>:context-menu="{header: {options: headerMenus}, visibleMethod}"</code> object to control the table header menu. In the \n<code>headerMenus</code>, configure <code>visible</code> whether to display the menu and <code>disabled</code> whether to disable the menu. \n The <code>visibleMethod</code> method can be used to control menu permissions. \n<code>@context-menu-click</code> monitoring menu click event. \nFor details, see the following example. </p>\n'
|
||||
},
|
||||
|
|
@ -18,7 +18,7 @@ export default {
|
|||
'name': { 'zh-CN': '表尾菜单', 'en-US': 'Grid-right-click menu-table tail menu' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>必须要配置 <code>:context-menu="{body: {options: bodyMenus}}"</code> ，<code>show-footer</code>，<code>:footer-method="footerMethod"</code> 才能展示表尾菜单\n配置 <code>:context-menu="{body: {options: bodyMenus}, footer: {options: footerMenus}，visibleMethod}"</code> 对象来控制表头菜单。\n<code>footerMenus</code> 里面配置 <code>visible</code> 是否显示菜单， <code>disabled</code> 是否禁用菜单项。\n可配合 <code>visibleMethod</code> 方法来控制菜单权限。\n<code>@context-menu-click</code> 监控菜单点击事件。\n具体参考下面示例。</p>\n',
|
||||
'<p>通过配置 <code>:context-menu="{body: {options: bodyMenus}}"</code> ，<code>show-footer</code>，<code>:footer-method="footerMethod"</code> 才能展示表尾菜单。配置 <code>:context-menu="{body: {options: bodyMenus}, footer: {options: footerMenus}，visibleMethod}"</code> 对象来控制表头菜单。<code>footerMenus</code> 里面配置 <code>visible</code> 是否显示菜单， <code>disabled</code> 是否禁用菜单项。可配合 <code>visibleMethod</code> 方法来控制菜单权限。<code>@context-menu-click</code> 监控菜单点击事件。</p>',
|
||||
'en-US':
|
||||
'<p>The table footer menu can be displayed only when <code>:context-menu="{body: {options: bodyMenus}}"</code>, show-footer, and <code>:footer-method="footerMethod"</code> are configured. \nThe <code>:context-menu="{body: {options: bodyMenus}, footer: {options: footerMenus}, visibleMethod}&;</code> objects are configured to control the table header menu. In the \n<code>footerMenus</code>, configure <code>visible</code> whether to display the menu and <code>disabled</code> whether to disable the menu. \n The <code>visibleMethod</code> method can be used to control menu permissions. \n<code>@context-menu-click</code> monitoring menu click event. \nFor details, see the following example. </p>\n'
|
||||
},
|
||||
|
|
@ -29,7 +29,7 @@ export default {
|
|||
'name': { 'zh-CN': '单元格菜单', 'en-US': 'Grid-right-click menu-cell menu' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>配置 <code>context-menu="{body: {options: bodyMenus}，visibleMethod}"</code> 对象来控制单元格菜单。\n<code>bodyMenus</code> 里面配置 <code>visible</code> 是否显示菜单，<code>disabled</code> 是否禁用菜单项。\n可配合 <code>visibleMethod</code> 方法来控制菜单权限。\n<code>@cell-context-menu</code> 监控菜单弹出前事件。\n<code>@context-menu-click</code> 监控菜单点击事件。\n具体参考下面示例。</p>\n',
|
||||
'<p>通过 <code>context-menu="{body: {options: bodyMenus}，visibleMethod}"</code> 对象来控制单元格菜单。<code>bodyMenus</code> 里面配置 <code>visible</code> 是否显示菜单，<code>disabled</code> 是否禁用菜单项。可配合 <code>visibleMethod</code> 方法来控制菜单权限。\n<code>@cell-context-menu</code> 监控菜单弹出前事件。<code>@context-menu-click</code> 监控菜单点击事件。</p>',
|
||||
'en-US':
|
||||
'<p>Configure the <code>context-menu="{body: {options: bodyMenus}, visibleMethod}"</code> object to control the cell menu. In \n<code>bodyMenus</code>, set <code>visible</code> to display menus and <code>disabled</code> to disable menus. \n The <code>visibleMethod</code> method can be used to control menu permissions. Event triggered before the \n<code>@cell-context-menu</code> monitoring menu is displayed. \n<code>@context-menu-click</code> monitoring menu click event. \nFor details, see the following example. </p>\n'
|
||||
},
|
||||
|
|
@ -40,7 +40,7 @@ export default {
|
|||
'name': { 'zh-CN': '菜单权限', 'en-US': 'Grid-Right-click Menu-Menu Permission' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>配置 <code>:context-menu="{header: {options: headerMenus},body: {options: bodyMenus}, footer: {options: footerMenus},visibleMethod}"</code> 对象来控制表头菜单。\n<code>header，bodyMenus，footer</code> 里面配置 <code>visible</code> 是否显示菜单， <code>disabled</code> 是否禁用菜单项。\n使用配合 <code>visibleMethod</code> 方法来控制菜单权限。\n<code>@cell-context-menu</code> 监控菜单弹出前事件。\n<code>@context-menu-click</code> 监控菜单点击事件。\n具体参考下面示例。</p>\n',
|
||||
'<p>通过 <code>:context-menu="{header: {options: headerMenus},body: {options: bodyMenus}, footer: {options: footerMenus},visibleMethod}"</code> 对象来控制表头菜单。<code>header，bodyMenus，footer</code> 里面配置 <code>visible</code> 是否显示菜单， <code>disabled</code> 是否禁用菜单项。使用配合 <code>visibleMethod</code> 方法来控制菜单权限。<code>@cell-context-menu</code> 监控菜单弹出前事件。<code>@context-menu-click</code> 监控菜单点击事件。</p>\n',
|
||||
'en-US':
|
||||
'<p>Configure the <code>:context-menu="{header: {options: headerMenus},body: {options: bodyMenus}, footer: {options: footerMenus},visibleMethod}"</code> object to control the table header menu. \n<code>header, bodyMenus, footer</code>: <code>visible</code> indicates whether to display menus and <code>disabled</code> indicates whether to disable menus. \nUse the <code>visibleMethod</code> method to control menu permissions. Event triggered before the \n<code>@cell-context-menu</code> monitoring menu is displayed. \n<code>@context-menu-click</code> monitoring menu click event. \nFor details, see the following example. </p>\n'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ export default {
|
|||
'name': { 'zh-CN': '自定义表头样式', 'en-US': 'Set the table header style' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>header-cell-class-name</code> 和 <code>header-row-class-name</code> 设置表头的单元格和行样式。或者使用表格列的属性 <code>header-class-name</code> 设置表头单元格样式</p>',
|
||||
'<p>通过 <code>header-cell-class-name</code> 和 <code>header-row-class-name</code> 设置表头的单元格和行样式。或者使用表格列的属性 <code>header-class-name</code> 设置表头单元格样式。</p>',
|
||||
'en-US':
|
||||
'<p>Set the cell and row styles of the table header through <code>header-cell-class-name</code> and <code>header-row-class-name</code></p>\n<h3>Set the cell style of the table header</h3>\n'
|
||||
},
|
||||
|
|
@ -18,7 +18,7 @@ export default {
|
|||
'name': { 'zh-CN': '自定义表体样式', 'en-US': 'Set Row Style' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>row-class-name</code> 自定义设置表格的行样式</p>\n<p>通过 <code>cell-class-name</code> 自定义设置表格的单元格样式。\n',
|
||||
'<p>通过 <code>row-class-name</code> 自定义设置表格的行样式。</p>\n<p>通过 <code>cell-class-name</code> 自定义设置表格的单元格样式。\n',
|
||||
'en-US': '<p>Set the row style of the table by <code>row-class-name</code></p>\n<h3>Set the row style</h3>\n'
|
||||
},
|
||||
'codeFiles': ['custom-style/body-style.vue']
|
||||
|
|
|
|||
|
|
@ -79,22 +79,6 @@ export default {
|
|||
},
|
||||
'codeFiles': ['custom/column-fixed.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'custom-ordercolumn-local',
|
||||
'name': {
|
||||
'zh-CN': '个性化按钮点击事件',
|
||||
'en-US': 'Local Record and Personalization Panel Button Click Event Listening'
|
||||
},
|
||||
'desc': {
|
||||
'zh-CN': `<p>配置 <code>setting</code> 的 <code>storage</code> 为 <code>local</code> 可实个性化的本地存储，
|
||||
配置 <code>setting</code> 的 <code>sortable</code> 为 <code>sortablejs</code> 可实现拖拽排序列功能，此功能在多级列头下无效，
|
||||
并且可以通过三个事件<code>save-setting</code>、<code>cancel-setting</code>、<code>reset-setting</code>来分别监听确认、取消、重置按钮的点击事件。</p>\n`,
|
||||
'en-US': `<p>Configure <code>storage</code> of <code>setting</code> to <code>local</code> as a personalized local storage,
|
||||
Set <code>sortable</code> of <code>setting</code> to <code>sortablejs</code> to implement the drag-and-drop sorting function. This function is invalid in multi-level column headers,
|
||||
In addition, three events <code>save-setting</code>, <code>cancel-setting</code>, and <code>reset-setting</code> can be used to listen to the click events of the confirmation, cancellation, and reset buttons.</p>\n`
|
||||
},
|
||||
'codeFiles': ['custom/ordercolumn-local.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'custom-ordercolumn-remote',
|
||||
'name': { 'zh-CN': '加载远端数据', 'en-US': 'Display and hide columns' },
|
||||
|
|
@ -127,17 +111,6 @@ export default {
|
|||
},
|
||||
'codeFiles': ['custom/hide-column.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'custom-prsonalized-drag',
|
||||
'name': { 'zh-CN': '个性化面板拖拽前事件', 'en-US': 'Number of records on each page' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>在 <code>toolbar</code> 标签上配置 <code>setting</code> 开启个性化设置，在个性化面板里配置 <code>onBeforeMove</code> 拖拽前事件，也可配置 <code>filter</code> 设置类名， 拖拽个性化面板某一行会触发个性化面板的拖拽前事件。</p>\n',
|
||||
'en-US':
|
||||
'<p>On the <code>toolbar</code> tab, configure <code>setting</code> to enable personalized settings. In the personalized panel, select other settings. You can select the number of records to be displayed on each page. You can use the <code>other</code> attribute of <code>setting</code> to control the display of other settings. The default value of <code>boolean</code> is <code>true</code></p>\n'
|
||||
},
|
||||
'codeFiles': ['custom/prsonalized-drag.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'custom-page-size',
|
||||
'name': { 'zh-CN': '分页条数', 'en-US': 'Local Storage' },
|
||||
|
|
@ -169,6 +142,33 @@ export default {
|
|||
'en-US': ''
|
||||
},
|
||||
'codeFiles': ['custom/reset-method.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'custom-ordercolumn-local',
|
||||
'name': {
|
||||
'zh-CN': '个性化按钮点击事件',
|
||||
'en-US': 'Local Record and Personalization Panel Button Click Event Listening'
|
||||
},
|
||||
'desc': {
|
||||
'zh-CN': `<p>配置 <code>setting</code> 的 <code>storage</code> 为 <code>local</code> 可实个性化的本地存储，
|
||||
配置 <code>setting</code> 的 <code>sortable</code> 为 <code>sortablejs</code> 可实现拖拽排序列功能，此功能在多级列头下无效，
|
||||
并且可以通过三个事件<code>save-setting</code>、<code>cancel-setting</code>、<code>reset-setting</code>来分别监听确认、取消、重置按钮的点击事件。</p>\n`,
|
||||
'en-US': `<p>Configure <code>storage</code> of <code>setting</code> to <code>local</code> as a personalized local storage,
|
||||
Set <code>sortable</code> of <code>setting</code> to <code>sortablejs</code> to implement the drag-and-drop sorting function. This function is invalid in multi-level column headers,
|
||||
In addition, three events <code>save-setting</code>, <code>cancel-setting</code>, and <code>reset-setting</code> can be used to listen to the click events of the confirmation, cancellation, and reset buttons.</p>\n`
|
||||
},
|
||||
'codeFiles': ['custom/ordercolumn-local.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'custom-prsonalized-drag',
|
||||
'name': { 'zh-CN': '个性化面板拖拽前事件', 'en-US': 'Number of records on each page' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>在 <code>toolbar</code> 标签上配置 <code>setting</code> 开启个性化设置，在个性化面板里配置 <code>onBeforeMove</code> 拖拽前事件，也可配置 <code>filter</code> 设置类名， 拖拽个性化面板某一行会触发个性化面板的拖拽前事件。</p>\n',
|
||||
'en-US':
|
||||
'<p>On the <code>toolbar</code> tab, configure <code>setting</code> to enable personalized settings. In the personalized panel, select other settings. You can select the number of records to be displayed on each page. You can use the <code>other</code> attribute of <code>setting</code> to control the display of other settings. The default value of <code>boolean</code> is <code>true</code></p>\n'
|
||||
},
|
||||
'codeFiles': ['custom/prsonalized-drag.vue']
|
||||
}
|
||||
],
|
||||
apis: [{ 'name': 'grid-custom', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export default {
|
|||
'name': { 'zh-CN': '拖拽控制', 'en-US': 'Drag Control' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>可以通过设置 <code>drop-config</code> 的 <code>onBeforeMove</code> 事件控制行拖动，配置<code>drop-config</code> 的 <code>trigger</code> 来指定拖拽的触发源（一般是 <code>class</code> 类名），也可以配置<code>drop-config</code> 的 <code>filter</code> 与自定义样式结合使用来限制拖动。</p>\n',
|
||||
'<p>通过设置 <code>drop-config</code> 的 <code>onBeforeMove</code> 事件控制行拖动，配置<code>drop-config</code> 的 <code>trigger</code> 来指定拖拽的触发源（一般是 <code>class</code> 类名），也可以配置<code>drop-config</code> 的 <code>filter</code> 与自定义样式结合使用来限制拖动。</p>\n',
|
||||
'en-US':
|
||||
'<p>You can set the <code>onBeforeMove</code> event of <code>drop-config</code> to control row dragging. You can also configure <code>filter</code> of <code>drop-config</code> in conjunction with a custom style to restrict drag</p>\n'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -8,7 +8,10 @@ export default {
|
|||
'zh-CN': '根据日期动态生成列',
|
||||
'en-US': 'Grid-Dynamic column generation based on the selected date'
|
||||
},
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例：', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN': '根据日期范围选择框的日期范围动态的生成表格列。',
|
||||
'en-US': 'For details, see the following example.'
|
||||
},
|
||||
'codeFiles': ['dynamically-columns/dynamically-columns.vue']
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ export default {
|
|||
'name': { 'zh-CN': '内置编辑器', 'en-US': 'Grid-editor-built-in editor' },
|
||||
'desc': {
|
||||
'zh-CN': `
|
||||
<p> <code>grid</code> 标签上配置 <code>edit-config</code>。在 <code>grid-column</code> 列配置 <code>editor</code> 对象， <code>component</code> 渲染内置编辑组件， <code>events</code> 配置组件事件。具体参考下面示例。</p>
|
||||
<p>通过在 <code>grid</code> 标签上配置 <code>edit-config</code>。在 <code>grid-column</code> 列配置 <code>editor</code> 对象， <code>component</code> 渲染内置编辑组件， <code>events</code> 配置组件事件。</p>
|
||||
<div class="tip custom-block">
|
||||
<p class="custom-block-title">说明</p>
|
||||
<p>内置编辑器只支持 <code>Input</code> 和 <code>Select</code> 组件，需要使用其他组件可参考自定义编辑器。</p>
|
||||
|
|
@ -23,7 +23,7 @@ export default {
|
|||
'name': { 'zh-CN': '自定义编辑器', 'en-US': 'Introducing the TINY component as the editor' },
|
||||
'desc': {
|
||||
'zh-CN': `
|
||||
<p> <code>grid</code> 标签上配置 <code>edit-config</code>。\n在 <code>grid-column</code> 列配置 <code>editor</code> 对象， <code>component</code> 渲染自定义编辑组件或者TinyVue提供的组件。</p>
|
||||
<p> <code>grid</code> 标签上配置 <code>edit-config</code>。\n在 <code>grid-column</code> 列配置 <code>editor</code> 对象， <code>component</code> 渲染自定义编辑组件或者 TinyVue 提供的组件。</p>
|
||||
`,
|
||||
'en-US':
|
||||
'<p>Introduces the TinyVue <code>Select</code> component through <code>attribute configuration</code>. </p>\n'
|
||||
|
|
|
|||
|
|
@ -16,7 +16,10 @@ export default {
|
|||
{
|
||||
'demoId': 'empty-empty-data-default-tip',
|
||||
'name': { 'zh-CN': '默认提示', 'en-US': 'Default Prompt' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN': '默认情况下就展示表格组件的默认提示图标和文字。',
|
||||
'en-US': 'For details, see the following example.'
|
||||
},
|
||||
'codeFiles': ['empty/empty-data-default-tip.vue']
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ export default {
|
|||
'name': { 'zh-CN': '展开行', 'en-US': 'Check whether the row is expanded.' },
|
||||
'desc': {
|
||||
'zh-CN': `
|
||||
<p>在 column 标签上配置 type="expand" 展开行,可以通过 v-slot 插槽插入需要的模板信息</p>
|
||||
<p>通过调用 <code>hasRowExpand(row)</code> 方法可以检查行是否已展开，参数 row 为行数据对象。</p>
|
||||
<p>在 <code>column</code> 标签上配置 <code>type="expand"</code>; 展开行,可以通过 <code>v-slot</code> 插槽插入需要的模板信息</p>
|
||||
<p>通过调用 <code>hasRowExpand(row)</code> 方法可以检查行是否已展开，参数 <code>row</code> 为行数据对象。</p>
|
||||
`,
|
||||
'en-US':
|
||||
'<p>You can invoke the <code>hasRowExpand(row)</code> method to check whether a row is expanded. The row parameter is the row data object. </p>\n'
|
||||
|
|
@ -21,7 +21,7 @@ export default {
|
|||
'desc': {
|
||||
'zh-CN': `
|
||||
<p>表格属性 <code>expand-config</code> 设置展开行配置项。</p>
|
||||
<p>表格属性 <code>expandConfig.activeMethod</code> 配置一个方法控制行是否可展开，参数为 <code>row</code> 和 <code>rowLevel</code>，返回 <code>false</code> 则此行不可展开，且不显示展开图标</p>
|
||||
<p>表格属性 <code>expandConfig.activeMethod</code> 配置一个方法控制行是否可展开，参数为 <code>row</code> 和 <code>rowLevel</code>，返回 <code>false</code> 则此行不可展开，且不显示展开图标。</p>
|
||||
<p>表格属性 <code>expandConfig.showIcon</code> 配置是否显示展开图标，默认为 <code>true</code> 表示显示展开图标。
|
||||
`,
|
||||
'en-US': '<p>Table property<code>expand-config</code>Set the configuration item of the expanded line. </p>\n'
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ export default {
|
|||
'name': { 'zh-CN': '表格列头与单元格错位', 'en-US': 'Table column headers and cells are misplaced' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>当出现grid表头与表体单元格错位时，可以选择性地做以下尝试\n1.给每列设置列宽\n2.将<code>show-overflow</code>、<code>show-header-overflow</code> 都设置为 <code>true</code>\n3.将 <code>table-layout</code> 设置为 <code>auto</code>。</p>\n',
|
||||
'<p>当出现 <code>grid</code> 表头与表体单元格错位时，可以选择性地做以下尝试。1.给每列设置列宽。2.将<code>show-overflow</code>、<code>show-header-overflow</code> 都设置为 <code>true</code>。3.将 <code>table-layout</code> 设置为 <code>auto</code>。</p>',
|
||||
'en-US':
|
||||
'<p>When the grid table header is misplaced with the table body cell, You can perform the following operations as required.\n1. Set the column width for each column.\n2. Set <code>show-overflow</code> and <code>show-header-overflow</code> to <code>true</code>\n3. Set <code>table-layout</ Set this parameter to <code>auto</code></p>\n'
|
||||
},
|
||||
|
|
@ -18,7 +18,7 @@ export default {
|
|||
'name': { 'zh-CN': '弹窗中的表格编辑器无法正常失焦', 'en-US': '' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>当可以编辑的表格出现在DialogBox弹出框中，编辑器无法正常失去焦点时需要配置<code>blurOutside</code>。</p>\n',
|
||||
'<p>当可以编辑的表格出现在 <code>DialogBox</code>弹出框中，编辑器无法正常失去焦点时需要配置 <code>blurOutside</code>。</p>\n',
|
||||
'en-US': ''
|
||||
},
|
||||
'codeFiles': ['faq/grid-in-dialog-box.vue']
|
||||
|
|
@ -26,7 +26,7 @@ export default {
|
|||
{
|
||||
'demoId': 'faq-op-slot',
|
||||
'name': { 'zh-CN': '配置式表格如何使用插槽', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '<p>具体可以参考以下代码：</p>\n', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '<p>通过表格列属性的 <code>slots</code> 属性对象配置对应的插槽。</p>', 'en-US': '' },
|
||||
'codeFiles': ['faq/op-slot.vue']
|
||||
},
|
||||
{
|
||||
|
|
@ -34,7 +34,7 @@ export default {
|
|||
'name': { 'zh-CN': '列默认插槽中不建议使用 Tooltip 或 Poppover', 'en-US': '' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>因为在表格渲染时，列的默认插槽会执行很多次，在数据量大的场景下，会因为创建大量 Tooltip 实例而产生性能问题，也有其他状态共享问题。\n所以建议使用表格内置 Tooltip，参考示例中城市字段，参考【Tip 提示】章节。</p>\n',
|
||||
'<p>因为在表格渲染时，列的默认插槽会执行很多次，在数据量大的场景下，会因为创建大量 <code>Tooltip</code> 实例而产生性能问题，也有其他状态共享问题。所以建议使用表格内置 <code>Tooltip</code>，参考示例中城市字段，参考【Tip 提示】章节。</p>\n',
|
||||
'en-US': ''
|
||||
},
|
||||
'codeFiles': ['faq/many-poppover.vue']
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export default {
|
|||
'demoId': 'filter-dynamic-filter',
|
||||
'name': { 'zh-CN': '动态改变筛选项', 'en-US': 'Filter' },
|
||||
'desc': {
|
||||
'zh-CN': `<p>通过改变自定义的 <code>filter</code> 自定义筛选的规则中的 <code>values</code> 数组，或者将 <code>values</code> 定义成方法可以动态的返回筛选项`,
|
||||
'zh-CN': `<p>通过改变自定义的 <code>filter</code> 自定义筛选的规则中的 <code>values</code> 数组，或者将 <code>values</code> 定义成方法可以动态的返回筛选项。`,
|
||||
'en-US': ''
|
||||
},
|
||||
'codeFiles': ['filter/dynamic-filter.vue']
|
||||
|
|
@ -41,7 +41,7 @@ export default {
|
|||
'name': { 'zh-CN': '简化版筛选-单选/多选菜单', 'en-US': 'Custom Parameter' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>layout</code> 设置需要使用的筛选项为<code>simple</code>,其中<code>layout</code>可选项包括<code>input,enum,default,extends,base,simple</code></p>\n',
|
||||
'<p>通过 <code>layout</code> 设置需要使用的筛选项为<code>simple</code>,其中<code>layout</code>可选项包括<code>input,enum,default,extends,base,simple</code> 。</p>\n',
|
||||
'en-US': '<p>Add custom parameters by <code>params</code>。</p>\n'
|
||||
},
|
||||
'codeFiles': ['filter/simple-filter.vue']
|
||||
|
|
@ -71,14 +71,14 @@ export default {
|
|||
'name': { 'zh-CN': '过滤高级设置', 'en-US': 'Custom Filter' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>inputFilter</code> 可以给input过滤区域配置自定义组件与条件，通过 <code>extends</code> 可以增加快捷过滤列表。</p>\n',
|
||||
'<p>通过 <code>inputFilter</code> 可以给 <code>input</code> 过滤区域配置自定义组件与条件，通过 <code>extends</code> 可以增加快捷过滤列表。</p>',
|
||||
'en-US': '<p>Set additional parameters through the <code>params</code> attribute</p>\n'
|
||||
},
|
||||
'codeFiles': ['filter/advanced-filter.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'filter-custom-filter',
|
||||
'name': { 'zh-CN': '设置列筛选规则', 'en-US': 'Server Filter' },
|
||||
'name': { 'zh-CN': '列筛选规则', 'en-US': 'Server Filter' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>filter</code> 属性设置列筛选规则。</p>\n',
|
||||
'en-US':
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export default {
|
|||
},
|
||||
{
|
||||
'demoId': 'footer-configuration-summary',
|
||||
'name': { 'zh-CN': '设置配置式的统计', 'en-US': 'Set Profile Statistics' },
|
||||
'name': { 'zh-CN': '配置式的统计', 'en-US': 'Set Profile Statistics' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>summary-config</code> 设置配置式的统计。</p>\n',
|
||||
'en-US': '<p>Set the profile statistics using <code>summary-config</code>. </p>\n'
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export default {
|
|||
},
|
||||
{
|
||||
'demoId': 'highlight-set-current-row',
|
||||
'name': { 'zh-CN': '设置指定行高亮', 'en-US': 'Highlight a specified line' },
|
||||
'name': { 'zh-CN': '指定行高亮', 'en-US': 'Highlight a specified line' },
|
||||
'desc': {
|
||||
'zh-CN': '<p> <code>setCurrentRow(row)</code> 可设置某一行为高亮状态。</p>\n',
|
||||
'en-US': 'The <p> <code>setCurrentRow(row)</code> can be used to set the highlight status of a line. </p>\n'
|
||||
|
|
@ -27,7 +27,7 @@ export default {
|
|||
'name': { 'zh-CN': '开启选中行高亮', 'en-US': 'Enable the selected row to be highlighted' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>设置 <code>highlight-current-row</code> 属性控制鼠标选中行是否开启高亮</p>\n<p>\n带有斑马线的行无高亮效果。\n</p>\n',
|
||||
'<p>设置 <code>highlight-current-row</code> 属性控制鼠标选中行是否开启高亮。</p>\n<p>\n带有斑马线的行无高亮效果。\n</p>\n',
|
||||
'en-US':
|
||||
'<p>Set the <code>highlight-current-row</code> attribute to control whether to highlight selected lines.</p>\n<p>\nThe lines with zebra crossings are not highlighted.\n</p>\n'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -5,7 +5,10 @@ export default {
|
|||
{
|
||||
'demoId': 'import-export-export-excel',
|
||||
'name': { 'zh-CN': '表格导出功能', 'en-US': 'Basic Usage' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例：', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>调用表格的 <code>exportCsv</code> 方法导出表格数据。</p>',
|
||||
'en-US': 'For details, see the following example.'
|
||||
},
|
||||
'codeFiles': ['import-export/export-excel.vue']
|
||||
}
|
||||
],
|
||||
|
|
|
|||
|
|
@ -15,11 +15,12 @@ export default {
|
|||
<li><code>scrollX</code>：横向 X 虚拟滚动配置（用于特殊场景手动调优）例如：{ gt: 100 }</li>
|
||||
<li><code>scrollY</code>：纵向 Y 虚拟滚动配置（用于特殊场景手动调优）例如：{ gt: 500 }</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="tip custom-block">
|
||||
<p class="custom-block-title">开启虚拟滚动注意事项</p>
|
||||
<p>1、开启虚拟滚动的前提是需要保证每列的宽度一样，可以通过在 <code><tiny-grid></code> 标签上的 <code>column-width</code> 属性配置统一的宽度。\n2、开启虚拟滚动将会禁用列宽调整功能，因为列拖拽会改变列宽度，导致虚拟滚动渲染的列数计算有误从而引起表格样式错乱，所以禁止列拖拽。</p>\n
|
||||
</div>`,
|
||||
</div>
|
||||
<div class="tip custom-block">
|
||||
<p class="custom-block-title">开启虚拟滚动注意事项</p>
|
||||
<p>1、开启虚拟滚动的前提是需要保证每列的宽度一样，可以通过在 <code><tiny-grid></code> 标签上的 <code>column-width</code> 属性配置统一的宽度。\n2、开启虚拟滚动将会禁用列宽调整功能，因为列拖拽会改变列宽度，导致虚拟滚动渲染的列数计算有误从而引起表格样式错乱，所以禁止列拖拽。</p>\n
|
||||
</div>
|
||||
`,
|
||||
'en-US': ''
|
||||
},
|
||||
'codeFiles': ['large-data/virtual-rolling.vue']
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ export default {
|
|||
},
|
||||
{
|
||||
'demoId': 'mouse-keyboard-keyboard-config',
|
||||
'name': { 'zh-CN': '设置按键配置项', 'en-US': 'Set key configuration items' },
|
||||
'name': { 'zh-CN': '按键配置项', 'en-US': 'Set key configuration items' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>表格属性 <code>keyboard-config</code> 设置按键配置项。\n</p>\n',
|
||||
'en-US': '<p>Table property<code>keyboard-config</code>Set key configuration items. \n</p>\n'
|
||||
|
|
@ -43,7 +43,7 @@ export default {
|
|||
},
|
||||
{
|
||||
'demoId': 'mouse-keyboard-mouse-config',
|
||||
'name': { 'zh-CN': '设置鼠标配置项', 'en-US': 'Setting Mouse Configuration Items' },
|
||||
'name': { 'zh-CN': '鼠标配置项', 'en-US': 'Setting Mouse Configuration Items' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>表格属性 <code>mouse-config</code> 设置鼠标配置项。\n</p>\n',
|
||||
'en-US': '<p>Table property<code>mouse-config</code>Set the mouse configuration item. \n</p>\n'
|
||||
|
|
|
|||
|
|
@ -15,8 +15,17 @@ export default {
|
|||
'demoId': 'pager-inner-pager',
|
||||
'name': { 'zh-CN': '使用第三方分页组件', 'en-US': 'The system prompts you to save data.' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
"<p>第三方分页组件配置步骤：\n1、<code>import</code> 引入自己引入的分页组件（这里使用官方的分页组件示范） <code>Pager</code> 组件，即 <code>import Pager from '@opentiny/vue-pager'</code> 或者 <code>{ Pager } from '@opentiny/vue'</code> 。\n2、<code>Pager</code> 传入给 <code>data()</code> 函数存储起来以便模板中使用。\n3、表格属性设置 <code>pager</code> 进行分页相关配置，通过 <code>pager</code> 的属性 <code>{component: Pager}</code> 注入分页组件。\n4、配置 seq-serial 属性可以设置翻页后序号连续显示，默认是不连续显示的。</p>\n",
|
||||
'zh-CN': `<p>
|
||||
<div class="tip custom-block">
|
||||
<p class="custom-block-title">第三方分页组件配置步骤：</p>
|
||||
<ul>
|
||||
<li> 1、<code>import</code> 引入自定义的分页组件（这里使用官方的分页组件示范） <code>Pager</code> 组件，即 <code>import Pager from '@opentiny/vue-pager'</code> 或者 <code>{ Pager } from '@opentiny/vue'</code> 。</li>
|
||||
<li>2、<code>Pager</code> 传入给 <code>data()</code> 函数存储起来以便模板中使用。</li>
|
||||
<li>3、表格属性设置 <code>pager</code> 进行分页相关配置，通过 <code>pager</code> 的属性 <code>{component: Pager}</code> 注入分页组件。</li>
|
||||
<li>4、配置 seq-serial 属性可以设置翻页后序号连续显示，默认是不连续显示的。</li>
|
||||
</ul>
|
||||
</div>
|
||||
`,
|
||||
'en-US':
|
||||
'<p>Configure the <code>showSaveMsg</code> attribute. When the table data is modified, the system prompts you to save the modification.</p>\n'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -14,17 +14,17 @@ export default {
|
|||
<li><code>integer</code>：显示成整数。</li>
|
||||
<li><code>number</code>：显示成小数。</li>
|
||||
<li><code>money</code>：显示成钱数。</li>
|
||||
<li>rate：显示成百分比的数据。</li>
|
||||
<li>filesize：显示成文件大小的数据。</li>
|
||||
<li>boole：显示成对号或者叉号的图标。</li>
|
||||
<li>date：显示成年月日。</li>
|
||||
<li>dateTime：显示成年月日时分。</li>
|
||||
<li>longDateTime：显示成年月日时分秒。</li>
|
||||
<li>time：显示成时分。</li>
|
||||
<li>longTime：显示成时分秒。</li>
|
||||
<li>yearMonth：显示成年月。</li>
|
||||
<li>enum：通过数据的值，查询出要显示的文本。</li>
|
||||
<li>ellipsis：显示成省略的内容，鼠标移到该单元格上，显示完整内容的提示信息。需要同时配置 format 的 len 属性。</li>
|
||||
<li><code>rate</code>：显示成百分比的数据。</li>
|
||||
<li><code>filesize</code>：显示成文件大小的数据。</li>
|
||||
<li><code>boole</code>：显示成对号或者叉号的图标。</li>
|
||||
<li><code>date</code>：显示成年月日。</li>
|
||||
<li><code>dateTime</code>：显示成年月日时分。</li>
|
||||
<li><code>longDateTime</code>：显示成年月日时分秒。</li>
|
||||
<li><code>time</code>：显示成时分。</li>
|
||||
<li><code>longTime</code>：显示成时分秒。</li>
|
||||
<li><code>yearMonth</code>：显示成年月。</li>
|
||||
<li><code>enum</code>：通过数据的值，查询出要显示的文本。</li>
|
||||
<li><code>ellipsis</code>：显示成省略的内容，鼠标移到该单元格上，显示完整内容的提示信息。需要同时配置 format 的 len 属性。</li>
|
||||
</ul>
|
||||
</div>
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ export default {
|
|||
'demoId': 'row-grouping-row-grouping',
|
||||
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
|
||||
'desc': {
|
||||
'zh-CN': '<p> <code>row-group</code> 属性可以配置行分组，行分组会将具有相同值的列进行分组展示。</p>\n',
|
||||
'zh-CN': '<p>通过 <code>row-group</code> 属性可以配置行分组，行分组会将具有相同值的列进行分组展示。</p>\n',
|
||||
'en-US':
|
||||
'Row groups can be configured for the <p> <code>row-group</code> attribute. Columns with the same value are displayed in groups. </p>\n'
|
||||
},
|
||||
|
|
@ -17,7 +17,7 @@ export default {
|
|||
'name': { 'zh-CN': '自定义分组', 'en-US': 'Customized Group' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p> <code>row-group</code> 配置项 <code>render</code> 可以自定义渲染分组内容， <code>closeable</code> 可以控制分组行是否可以折叠。</p>\n',
|
||||
'<p>通过 <code>row-group</code> 配置项 <code>render</code> 可以自定义渲染分组内容， <code>closeable</code> 可以控制分组行是否可以折叠。</p>\n',
|
||||
'en-US':
|
||||
'The <p> <code>row-group</code> configuration item <code>render</code> can be used to customize group content rendering, and <code>closeable</code> can be used to control whether group lines can be collapsed. </p>\n'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ export default {
|
|||
demos: [
|
||||
{
|
||||
'demoId': 'size-fixed-column-width',
|
||||
'name': { 'zh-CN': '列属性设置宽度', 'en-US': 'Table column attribute width' },
|
||||
'name': { 'zh-CN': '列属性宽度', 'en-US': 'Table column attribute width' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>表格列属性设置 width 固定宽度，支持数值和百分比。</p>\n',
|
||||
'en-US': '<p>The fixed width of the table column attribute is set. Values and percentages are supported. </p>\n'
|
||||
|
|
@ -13,7 +13,7 @@ export default {
|
|||
},
|
||||
{
|
||||
'demoId': 'size-column-min-width',
|
||||
'name': { 'zh-CN': '设置总体列宽', 'en-US': 'Minimum width of this column' },
|
||||
'name': { 'zh-CN': '总体列宽', 'en-US': 'Minimum width of this column' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>通过属性 <code>column-min-width</code> 设置总体列可以调整到的最小宽度，不设置时默认为列头 span 的宽度 + 36（头部固定宽度）。\n</p>\n',
|
||||
|
|
@ -34,7 +34,7 @@ export default {
|
|||
},
|
||||
{
|
||||
'demoId': 'size-column-width',
|
||||
'name': { 'zh-CN': '设置所有列宽度', 'en-US': 'Recalculate Table' },
|
||||
'name': { 'zh-CN': '所有列宽度', 'en-US': 'Recalculate Table' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过属性 <code>column-width</code> 设置所有列宽度，默认值为均匀分配。\n</p>\n',
|
||||
'en-US':
|
||||
|
|
@ -44,7 +44,7 @@ export default {
|
|||
},
|
||||
{
|
||||
'demoId': 'size-fixed-grid-height',
|
||||
'name': { 'zh-CN': '表格属性设置高度', 'en-US': 'Table Attribute Setting Height' },
|
||||
'name': { 'zh-CN': '表格属性高度', 'en-US': 'Table Attribute Setting Height' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>表格属性设置 height 固定表格高度。</p>\n',
|
||||
'en-US': '<p>Table attribute setting height Fixed table height. </p>\n'
|
||||
|
|
@ -53,7 +53,7 @@ export default {
|
|||
},
|
||||
{
|
||||
'demoId': 'size-max-min-grid-height',
|
||||
'name': { 'zh-CN': '设置最大、最小高度', 'en-US': 'Set the maximum height of maxHeight' },
|
||||
'name': { 'zh-CN': '最大、最小高度', 'en-US': 'Set the maximum height of maxHeight' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>表格属性设置 minHeight 限制最小高度，maxHeight 限制最大高度。</p>\n',
|
||||
'en-US': 'For details, see the following example.'
|
||||
|
|
@ -75,7 +75,7 @@ export default {
|
|||
'demoId': 'size-resize-column-width',
|
||||
'name': { 'zh-CN': '开启列宽拖拽', 'en-US': 'Enable column width dragging' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>列宽默认开启，如需禁用需要设置<code>resizable</code>为<code>false</code>。</p>\n',
|
||||
'zh-CN': '<p>列宽拖拽默认开启，如需禁用需要设置 <code>resizable</code> 为 <code>false</code>。</p>\n',
|
||||
'en-US':
|
||||
'<p>Column width is enabled by default. To disable this function, set <code>resizable</code> to <code>false</code></p>\n'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -5,19 +5,28 @@ export default {
|
|||
{
|
||||
'demoId': 'slot-default-slot',
|
||||
'name': { 'zh-CN': '默认插槽', 'en-US': 'Default slot' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例：', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN': `<p>通过 <code>template</code> 标签并配置 <code>#default</code> 添加表格列的默认插槽。</p>`,
|
||||
'en-US': 'For details, see the following example.'
|
||||
},
|
||||
'codeFiles': ['slot/default-slot.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'slot-buttons-slot',
|
||||
'name': { 'zh-CN': '工具栏插槽', 'en-US': 'Toolbar slot' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例：', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN': `<p>通过 <code>template</code> 标签并配置 <code>#toolbar</code> 添加表格的工具栏插槽。</p>`,
|
||||
'en-US': 'For details, see the following example.'
|
||||
},
|
||||
'codeFiles': ['slot/buttons-slot.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'slot-empty-slot',
|
||||
'name': { 'zh-CN': '空数据显示插槽', 'en-US': 'Empty data display slot' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例：', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN': `<p>通过 <code>template</code> 标签并配置 <code>#empty</code> 添加表格的空数据插槽。</p>`,
|
||||
'en-US': 'For details, see the following example.'
|
||||
},
|
||||
'codeFiles': ['slot/empty-slot.vue']
|
||||
},
|
||||
{
|
||||
|
|
@ -32,7 +41,10 @@ export default {
|
|||
{
|
||||
'demoId': 'slot-header-slot',
|
||||
'name': { 'zh-CN': '表头插槽', 'en-US': 'Table header slot' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例：', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN': `<p>通过 <code>template</code> 标签并配置 <code>#header</code> 添加表格列的表头插槽。</p>`,
|
||||
'en-US': 'For details, see the following example.'
|
||||
},
|
||||
'codeFiles': ['slot/header-slot.vue']
|
||||
}
|
||||
],
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ export default {
|
|||
'demoId': 'tip-column-header-tip',
|
||||
'name': { 'zh-CN': '列头提示', 'en-US': 'Column Header Prompt' },
|
||||
'desc': {
|
||||
'zh-CN': `<p>列头提示有2种，一种是 <code>show-header-tip</code> 提示（内容是否超出都会提示），另一种是 <code>show-header-overflow</code> 内容超出当前行时隐藏并提示。</p>
|
||||
'zh-CN': `<p>列头提示有两种，一种是 <code>show-header-tip</code> 提示（内容是否超出都会提示），另一种是 <code>show-header-overflow</code> 内容超出当前行时隐藏并提示。</p>
|
||||
<div class="tip custom-block">
|
||||
<p class="custom-block-title">TIP</p>\n<p> <code>show-header-overflow</code> 可选值有：</p>
|
||||
<ul>
|
||||
|
|
@ -25,14 +25,14 @@ export default {
|
|||
'name': { 'zh-CN': '单元格提示', 'en-US': 'Cell Prompt' },
|
||||
'desc': {
|
||||
'zh-CN': `
|
||||
<p>单元格提示有2种，一种是 <code>show-tip</code> 提示（内容是否超出都会提示），另一种是 <code>show-overflow</code> 内容超出当前行时隐藏并提示。</p>
|
||||
<p>单元格提示有两种，一种是 <code>show-tip</code> 提示（内容是否超出都会提示），另一种是 <code>show-overflow</code> 内容超出当前行时隐藏并提示。</p>
|
||||
<div class="tip custom-block">
|
||||
<p class="custom-block-title">TIP</p>
|
||||
<p> <code>show-overflow</code> 可选值有：</p>
|
||||
<ul>
|
||||
<li><code>tooltip</code>：内容超出部分显示 <code>...</code>，左侧/右侧弹出提示层显示全部信息</li>
|
||||
<li><code>title</code>：和原生标签的 <code>title</code> 属性一致</li>
|
||||
<li><code>ellipsis</code>：内容超出部分显示 <code>...</code>，没有提示</li>
|
||||
<li><code>tooltip</code>：内容超出部分显示 <code>...</code>，左侧/右侧弹出提示层显示全部信息</li>
|
||||
</ul>
|
||||
</div>\n`,
|
||||
'en-US':
|
||||
|
|
|
|||
|
|
@ -7,7 +7,14 @@ export default {
|
|||
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
|
||||
'desc': {
|
||||
'zh-CN': `
|
||||
<p>工具栏配置步骤：\n1、表格以插槽方式引入表格工具栏组件 <code>GridToolbar</code>，并设置工具栏组件属性 <code>slot="toolbar"</code> 。\n2、设置工具栏组件属性 <code>buttons</code> 进行按钮组相关配置。\n3、表格事件设置 <code>@toolbar-button-click</code> 获取工具栏 <code>buttons</code> 的事件，用户可自定义实现增删改操作的业务逻辑。</p>
|
||||
<div class="tip custom-block">
|
||||
<p class="custom-block-title">工具栏配置步骤：</p>
|
||||
<ul>
|
||||
<li>1、表格以插槽方式引入表格工具栏组件 <code>GridToolbar</code>，并设置工具栏组件属性 <code>slot="toolbar"</code> 。</li>
|
||||
<li>2、设置工具栏组件属性 <code>buttons</code> 进行按钮组相关配置。</li>
|
||||
<li>3、表格事件设置 <code>@toolbar-button-click</code> 获取工具栏 <code>buttons</code> 的事件，用户可自定义实现增删改操作的业务逻辑。</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="tip custom-block">
|
||||
<p class="custom-block-title">新增的行需要标记新增状态的样式时需要配置 edit-config 的 markInsert 项为 true。</p>
|
||||
</div>`,
|
||||
|
|
@ -65,10 +72,10 @@ export default {
|
|||
},
|
||||
{
|
||||
'demoId': 'toolbar-copy-row-data',
|
||||
'name': { 'zh-CN': '设置工具栏尺寸大小', 'en-US': 'Set the toolbar size' },
|
||||
'name': { 'zh-CN': '工具栏尺寸大小', 'en-US': 'Set the toolbar size' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>工具栏配置步骤：\n1、表格以插槽方式引入表格工具栏组件 <code>GridToolbar</code>，并设置工具栏组件属性 <code>slot="toolbar"</code> 。\n2、设置工具栏组件属性 <code>buttons</code> 进行按钮组相关配置。\n3、表格事件设置 <code>@toolbar-button-click</code> 获取工具栏 <code>buttons</code> 的事件，用户可自定义实现复制行操作的业务逻辑。</p>\n<ul>\n<li><code>size</code> 属性设置工具栏尺寸大小,包括 large、medium、small、mini 四种不同大小。不设置时为默认尺寸。</li>\n</ul>\n',
|
||||
'<p>通过 <code>size</code> 属性设置工具栏尺寸大小,包括 large、medium、small、mini 四种不同大小。不设置时为默认尺寸。</p>',
|
||||
'en-US':
|
||||
'<p>Toolbar configuration procedure:\n1. Import the table toolbar component <code>GridToolbar</code> in slot mode and set the toolbar component attribute <code>slot="toolbar"</code> . \n2. Set the toolbar component attribute <code>buttons</code> and configure the button group. \n3. Set the table event <code>@toolbar-button-click</code> to obtain the <code>buttons</code> event on the toolbar. You can customize the service logic for copying rows. The </p>\n<ul>\n<li><code>size</code> property specifies the size of the toolbar. The options are large, medium, small, and mini. If this parameter is not set, the default size is used. </li>\n</ul>\n'
|
||||
},
|
||||
|
|
@ -79,7 +86,7 @@ export default {
|
|||
'name': { 'zh-CN': '开启表格刷新功能', 'en-US': 'Enable the table refresh function' },
|
||||
'desc': {
|
||||
'zh-CN': `
|
||||
<p>工具栏配置步骤：\n1、表格以插槽方式引入表格工具栏组件 <code>GridToolbar</code>，并设置工具栏组件属性 <code>slot="toolbar"</code> 。\n2、设置工具栏组件属性 <code>refresh</code> 开启表格刷新功能。</p>
|
||||
<p>设置工具栏组件属性 <code>refresh</code> 开启表格刷新功能。</p>
|
||||
<ul>
|
||||
<li>设置表格属性 <code>loading</code> 开启/关闭加载中。\n自定义实现刷新时直接调用<code>handleFetch('reload')</code></li>
|
||||
</ul>`,
|
||||
|
|
@ -92,8 +99,7 @@ export default {
|
|||
'demoId': 'toolbar-grid-full-screen',
|
||||
'name': { 'zh-CN': '开启表格全屏功能', 'en-US': 'Enable the full-screen function of the table.' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>工具栏配置步骤：\n1、表格以插槽方式引入表格工具栏组件 <code>GridToolbar</code>，并设置工具栏组件属性 <code>slot="toolbar"</code> 。\n2、设置工具栏组件属性 <code>full-screen</code> 开启表格全屏功能。</p>\n',
|
||||
'zh-CN': '<p>设置工具栏组件属性 <code>full-screen</code> 开启表格全屏功能。</p>\n',
|
||||
'en-US':
|
||||
'<p>Toolbar configuration procedure:\n1. Import the table toolbar component <code>GridToolbar</code> in slot mode and set the toolbar component attribute <code>slot="toolbar"</code> . \n2. Set the toolbar component attribute <code>full-screen</code> to enable the full-screen function. </p>\n'
|
||||
},
|
||||
|
|
@ -102,15 +108,17 @@ export default {
|
|||
{
|
||||
'demoId': 'toolbar-grid-full-screen-height',
|
||||
'name': { 'zh-CN': '全屏时改变表格高度', 'en-US': 'Change the table height in full screen mode' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例：', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过表格属性<code>height</code> 在全屏是动态改变表格高度。</p>',
|
||||
'en-US': 'For details, see the following example.'
|
||||
},
|
||||
'codeFiles': ['toolbar/grid-full-screen-height.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'toolbar-custom-toolbar',
|
||||
'name': { 'zh-CN': '工具栏自定义插槽', 'en-US': 'Toolbar Custom Slot' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>工具栏配置步骤：\n1、表格以插槽方式引入表格工具栏组件 <code>GridToolbar</code>，并设置工具栏组件插槽 <code>#toolbar</code> 。\n2、通过工具栏组件的插槽 <code>#buttons</code> 自定义内容。</p>\n',
|
||||
'zh-CN': '<p>通过工具栏组件的插槽 <code>#buttons</code> 自定义内容。</p>',
|
||||
'en-US':
|
||||
'<p>Toolbar configuration procedure:\n1. Import the table toolbar component <code>GridToolbar</code> in slot mode and set the toolbar component slot <code>#toolbar</code>. \n2. Customize content through the slot <code>#buttons</code> of the toolbar component. </p>\n'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export default {
|
|||
},
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
"<p>在 grid 标签上配置 tree-config={children: 'children',renderIcon},其中renderIcon可以自定义树表的展开收缩图标。以树的形式来展示数据,还需要在展示树节点的字段上配置 tree-node 属性。</p>\n",
|
||||
"<p>在 <code>grid</code> 标签上配置 <code>tree-config={children: 'children',renderIcon}</code>，其中 <code>renderIcon</code> 可以自定义树表的展开收缩图标。以树的形式来展示数据,还需要在展示树节点的字段上配置 <code>tree-node</code> 属性。</p>\n",
|
||||
'en-US':
|
||||
"<p>Configure tree-config="{children:'children'}" on the grid tab to display data in a tree. In addition, you need to configure the tree-node attribute</p>\n on the field that displays the tree node"
|
||||
},
|
||||
|
|
@ -21,7 +21,7 @@ export default {
|
|||
'name': { 'zh-CN': '扁平化数据结构', 'en-US': 'Flat Data Structure' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>注意：扁平化的数据结构需要调用 aggregateTableData 方法把数据转换成带有子级的数据才能正常的显示出树表的结构。</p>\n',
|
||||
'<p>注意：扁平化的数据结构需要调用 <code>aggregateTableData</code> 方法把数据转换成带有子级的数据才能正常的显示出树表的结构。</p>\n',
|
||||
'en-US':
|
||||
'<p>Note: For a flattened data structure, you need to invoke the aggregateTableData method to convert data into data with sublevels to display the tree table structure.</p>\n'
|
||||
},
|
||||
|
|
@ -41,7 +41,8 @@ export default {
|
|||
'demoId': 'tree-table-tree-grid-operation-column',
|
||||
'name': { 'zh-CN': '操作列', 'en-US': 'Operation Column' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>列通过配置 type="radio" 实现单选，配置 type="selection" 实现多选。</p>\n',
|
||||
'zh-CN':
|
||||
'<p>列通过配置 <code>type="radio"</code>; 实现单选，配置 <code>type="selection"</code>; 实现多选。</p>\n',
|
||||
'en-US':
|
||||
'In the <p> column, you can set type="radio" to enable single selection and type="selection" to enable multiple selection</p>\n'
|
||||
},
|
||||
|
|
@ -66,7 +67,7 @@ export default {
|
|||
'name': { 'zh-CN': '冻结列', 'en-US': 'Frozen Column' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>在列的标签上可以通过配置 fixed="left" 属性把该列固定在左侧，配置 fixed="right" 属性把该列固定在右侧。</p>\n',
|
||||
'<p>在列的标签上可以通过配置 <code>fixed="left"</code>; 属性把该列固定在左侧，配置 <code>fixed="right"</code>; 属性把该列固定在右侧。</p>',
|
||||
'en-US':
|
||||
'<p>On the column label, you can set the fixed="left" attribute to fix the column on the left, and set the fixed="right" attribute to fix the column on the right</p>\n'
|
||||
},
|
||||
|
|
@ -76,7 +77,8 @@ export default {
|
|||
'demoId': 'tree-table-has-tree-expand',
|
||||
'name': { 'zh-CN': '检查树节点是否已展开', 'en-US': 'Check whether the tree node is expanded.' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>hasTreeExpand(row)</code> 方法可以检查树节点是否已展开，参数 row 为行数据对象。</p>\n',
|
||||
'zh-CN':
|
||||
'<p>通过 <code>hasTreeExpand(row)</code> 方法可以检查树节点是否已展开，参数 <code>row</code> 为行数据对象。</p>\n',
|
||||
'en-US':
|
||||
'<p>You can use the <code>hasTreeExpand(row)</code> method to check whether a tree node is expanded. The row parameter indicates the row data object. </p>\n'
|
||||
},
|
||||
|
|
@ -98,7 +100,7 @@ export default {
|
|||
'name': { 'zh-CN': '增删改', 'en-US': 'Add, Delete, and Modify' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>在 grid-toolbar 标签上配置 slot="toolbar" 插槽，配置相关的操作按钮 ，注意：新增数据需要在 grid 标签上配置 edit-config 编辑框的配置信息，并通过 ref 获取到组件实例调用方法进行相关操作，findTree、filterTree 是工具类里的查找和过滤方法。由于tree数据节构的特殊性，grid的<code>getInsertRecords</code>与<code>getRecordset</code>方法无法获取到新增数据，此类数据需要用户自行处理。</p>\n',
|
||||
'<p>在 <code>grid-toolbar</code> 标签上配置 <code>slot="toolbar"</code>; 插槽，配置相关的操作按钮 ，注意：新增数据需要在 <code>grid</code> 标签上配置 <code>edit-config</code> 编辑框的配置信息，并通过 <code>ref</code> 获取到组件实例调用方法进行相关操作，<code>findTree、filterTree</code> 是工具类里的查找和过滤方法。由于tree</code> 数据节构的特殊性，<code>grid</code> 的 <code>getInsertRecords</code> 与 <code>getRecordset</code> 方法无法获取到新增数据，此类数据需要用户自行处理。</p>\n',
|
||||
'en-US':
|
||||
'<p>Set slot="toolbar" on the grid-toolbar tab, and configure related operation buttons. Note: To add data, you need to configure the edit-config text box on the grid tab. In addition, the component instance invokes methods through ref to perform related operations. findTree and filterTree are search and filter methods in the tool class. Due to the special structure of tree data, the <code>getInsertRecords</code> and <code>getRecordset</code> methods of the grid cannot obtain new data. Such data needs to be processed by users. </p>\n'
|
||||
},
|
||||
|
|
@ -109,7 +111,7 @@ export default {
|
|||
'name': { 'zh-CN': '键盘操作', 'en-US': 'Keyboard operation' },
|
||||
'desc': {
|
||||
'zh-CN': `
|
||||
<p>键盘移动高亮行,设置斑马线属性 stripe 为 false,鼠标悬停高亮行 highlight-hover-row 为 false,高亮当前行 highlight-current-row ,并配置 keyboard-config={isArrow: true} 属性启用方向键功能。</p>
|
||||
<p>键盘移动高亮行,设置斑马线属性 <code>stripe</code> 为 <code>false</code>,鼠标悬停高亮行 <code>highlight-hover-row</code> 为 <code>false</code>,高亮当前行 <code>highlight-current-row</code> ,并配置 <code>keyboard-config={isArrow: true}</code> 属性启用方向键功能。</p>
|
||||
<div class="tip custom-block">
|
||||
<p class="custom-block-title">按键说明：</p>
|
||||
<ul>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ export default {
|
|||
'name': { 'zh-CN': '编辑时校验', 'en-US': 'Verify during editing' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>grid 标签配置 edit-config 对象，并配置 edit-rules 对象来设置校验对象和校验规则。具体参考下面示例。</p>\n',
|
||||
'<p><code>grid</code> 标签配置 <code>edit-config</code> 对象，并配置 <code>edit-rules</code> 对象来设置校验对象和校验规则。</p>\n',
|
||||
'en-US':
|
||||
'The <p>grid tag configures the edit-config object, and configures the edit-rules object to set the validation object and validation rule. For details, see the following example. </p>\n'
|
||||
},
|
||||
|
|
@ -18,7 +18,7 @@ export default {
|
|||
'name': { 'zh-CN': '常显编辑器校验', 'en-US': 'Verify hidden columns during editing' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>grid 标签配置 edit-config 对象且列配置type：visible 且配置isValidAlways属性时, 即列总是显示可编辑状态时，支持编辑时校验,并配置 edit-rules 对象来设置校验对象和校验规则。具体参考下面示例。</p>\n',
|
||||
'<p><code>grid</code> 标签配置 <code>edit-config</code> 对象且列配置 <code>type：visible</code> 且配置 <code>isValidAlways</code> 属性时, 即列总是显示可编辑状态时，支持编辑时校验,并配置 <code>edit-rules</code> 对象来设置校验对象和校验规则。</p>\n',
|
||||
'en-US':
|
||||
'<p>When the edit-config object is configured for the grid tag, type is set to visible, and isValidAlways is configured for the column, that is, the column is always editable, verification during editing is supported. Configure the edit-rules object to set the verification object and verification rule. For details, see the following example. </p>\n'
|
||||
},
|
||||
|
|
@ -54,7 +54,7 @@ export default {
|
|||
'name': { 'zh-CN': '选中时校验', 'en-US': 'Verify when selected' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>grid 标签配置 edit-config 对象，并配置 edit-rules 对象来设置校验对象和校验规则，通过按钮点击事件调用 this.$refs.basicGrid.validate()方法来触发表格校验，具体参考下面示例。</p>\n',
|
||||
'<p><code>grid</code> 标签配置 <code>edit-config</code> 对象，并配置 <code>edit-rules</code> 对象来设置校验对象和校验规则，通过按钮点击事件调用 <code>this.$refs.basicGrid.validate()</code> 方法来触发表格校验，具体参考下面示例。</p>\n',
|
||||
'en-US':
|
||||
'The <p>grid tag configures the edit-config object, configures the edit-rules object to set the validation object and validation rule, and invokes the this.$refs.basicGrid.validate() method to trigger table validation through the button click event. For details, see the following example. </p>\n'
|
||||
},
|
||||
|
|
@ -65,7 +65,7 @@ export default {
|
|||
'name': { 'zh-CN': '提交前校验', 'en-US': 'Verify Before Submission' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>grid 标签配置 edit-config 对象，并配置 edit-rules 对象来设置校验对象和校验规则，通过按钮点击事件调用 this.$refs.basicGrid.validate()方法来触发表格校验，具体参考下面示例。注意：如果传递了 callback 回调就不能正常 catch 到 validate 捕获到的错误。</p>\n',
|
||||
'<p><code>grid</code> 标签配置 <code>edit-config</code> 对象，并配置 <code>edit-rules</code> 对象来设置校验对象和校验规则，通过按钮点击事件调用 <code>this.$refs.basicGrid.validate()</code> 方法来触发表格校验，具体参考下面示例。注意：如果传递了 callback 回调就不能正常 catch 到 validate 捕获到的错误。</p>\n',
|
||||
'en-US':
|
||||
'The <p>grid tag configures the edit-config object, configures the edit-rules object to set the validation object and validation rule, and invokes the this.$refs.basicGrid.validate() method to trigger table validation through the button click event. For details, see the following example. </p>\n'
|
||||
},
|
||||
|
|
@ -79,7 +79,7 @@ export default {
|
|||
},
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>通过配置 tooltipConfig.popperOptions.bubbling 为 true ，可实现表格的校验提示跟随其外部的滚动条滚动。</p>\n',
|
||||
'<p>通过配置 <code>tooltipConfig.popperOptions.bubbling</code> 为 <code>true</code> ，可实现表格的校验提示跟随其外部的滚动条滚动。</p>\n',
|
||||
'en-US':
|
||||
'<p>The grid editor introduces the tiny.0 component, configures the edit-config object in the tag, and configures the edit-rules object to set the verification object and verification rule. Invoke the this.$refs.basicGrid.validate() method through the button click event to trigger table validation. For details, see the following example. </p>\n'
|
||||
},
|
||||
|
|
@ -90,7 +90,7 @@ export default {
|
|||
'name': { 'zh-CN': '触发校验时自动定位到当前校验的单元格', 'en-US': 'Error prompt configuration item' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>grid 编辑器引入 tiny 组件，标签配置 edit-config 对象，并配置 edit-rules 对象来设置校验对象和校验规则，通过按钮点击事件调用 this.$refs.basicGrid.validate()方法来触发表格校验，具体参考下面示例。</p>\n',
|
||||
'<p><code>grid</code> 编辑器引入 <code>TinyVue</code> 组件，标签配置 <code>edit-config</code> 对象，并配置 <code>edit-rules</code> 对象来设置校验对象和校验规则，通过按钮点击事件调用 <code>this.$refs.basicGrid.validate()</code> 方法来触发表格校验，具体参考下面示例。</p>\n',
|
||||
'en-US':
|
||||
'<p>The default error message is displayed on <code>body</code>. You can set <code>appendTobody</code> in <code>tooltip-config</code> to <code>false</code> to solve the problem that the tip position is incorrect during page scrolling. Set the <code>placement</code> property to adjust the default display direction. For details about the <code>tooltip-config</code> configuration, see the tooltip component</p>\n'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -5,13 +5,19 @@ export default {
|
|||
{
|
||||
'demoId': 'base-basic-usage',
|
||||
'name': { 'zh-CN': '标签式', 'en-US': 'Label' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN': '通过 <code>tiny-grid-column</code> 标签配置表格列。',
|
||||
'en-US': 'For details, see the following example.'
|
||||
},
|
||||
'codeFiles': ['base/basic-usage.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'base-basic-usage-conf',
|
||||
'name': { 'zh-CN': '配置式', 'en-US': 'Profile' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN': '通过 <code>columns</code> 属性描述表格列。',
|
||||
'en-US': 'For details, see the following example.'
|
||||
},
|
||||
'codeFiles': ['base/basic-usage-conf.vue']
|
||||
}
|
||||
],
|
||||
|
|
@ -64,7 +70,7 @@ export default {
|
|||
'typeAnchorName': 'IRowGroup',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': 'row-group 属性可以配置行分组，行分组会将具有相同值的列进行分组展示。',
|
||||
'zh-CN': 'row-group 属性可以配置行分组，行分组会将具有相同值的列进行分组展示',
|
||||
'en-US':
|
||||
'The row group attribute can be configured. Columns with the same value are displayed in a row group.'
|
||||
},
|
||||
|
|
@ -83,7 +89,7 @@ export default {
|
|||
'type': `'left' | 'center' | 'right'`,
|
||||
'defaultValue': `'left'`,
|
||||
'desc': {
|
||||
'zh-CN': '所有的列对齐方式;该属性的可选值为 left（左对齐）, center（居中对齐）, right（右对齐）',
|
||||
'zh-CN': '所有表格列的对齐方式',
|
||||
'en-US':
|
||||
'All column alignment mode; The optional values of this attribute are left (left-aligned), center (center-aligned), and right (right-aligned)'
|
||||
},
|
||||
|
|
@ -113,7 +119,7 @@ export default {
|
|||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'是否打开页面改变时的前置处理特性。在值为true时，翻页操作或者改变页大小操作不会立即生效，留给用户处理业务逻辑，之后通过调用预留的callback或者rollback使之生效或者失效，详看事件before-page-change',
|
||||
'是否打开页面改变时的前置处理特性。在值为 true 时，翻页操作或者改变页大小操作不会立即生效，留给用户处理业务逻辑，之后通过调用预留的 callback 或者 rollback 使之生效或者失效，详看事件 before-page-change ',
|
||||
'en-US':
|
||||
'Whether to enable the preprocessing feature when the page changes. If the value is true, the page turning operation or page size change operation does not take effect immediately. The service logic is left for the user to process. Then, the reserved callback or rollback is invoked to make the operation take effect or invalid. For details, see the before-page-change event'
|
||||
},
|
||||
|
|
@ -146,7 +152,7 @@ export default {
|
|||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'设置可以调整到的最小宽度，不设置时默认为列头 span 的宽度 + 36（头部固定宽度）。 ;所有最小列宽度；会自动将剩余空间按比例分配;该属性的可选值为 整数, px，%',
|
||||
'设置可以调整到的最小宽度，不设置时默认为列头 span 的宽度 + 36（头部固定宽度） ；所有最小列宽度；会自动将剩余空间按比例分配；该属性的可选值为 整数, px，%',
|
||||
'en-US':
|
||||
'Minimum width that can be adjusted. If this parameter is not set, the default value is the width of the column head span plus 36 (fixed width of the head).; all minimum column widths; The remaining space will be allocated in proportion automatically. The optional values of this attribute are integers, px,%'
|
||||
},
|
||||
|
|
@ -157,7 +163,7 @@ export default {
|
|||
'type': 'number | string',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '所有列宽度;该属性的可选值为 整数, px，%',
|
||||
'zh-CN': '所有列宽度；该属性的可选值为 整数, px，%',
|
||||
'en-US': 'Width of all columns; The optional values of this attribute are integers, px,%'
|
||||
},
|
||||
'demoId': 'grid-size#size-column-width'
|
||||
|
|
@ -204,7 +210,7 @@ export default {
|
|||
'type': `'left' | 'center' | 'right'`,
|
||||
'defaultValue': `'left'`,
|
||||
'desc': {
|
||||
'zh-CN': '所有的表尾列的对齐方式;该属性的可选值为 left（左对齐）, center（居中对齐）, right（右对齐）',
|
||||
'zh-CN': '所有的表尾列的对齐方式',
|
||||
'en-US':
|
||||
'Alignment mode of all table tail columns; The optional values of this attribute are left (left-aligned), center (center-aligned), and right (right-aligned)'
|
||||
},
|
||||
|
|
@ -232,6 +238,7 @@ export default {
|
|||
{
|
||||
'name': 'footer-method',
|
||||
'type': '({columns: IColumnConfig[], data: IRow[]}) => string[][]',
|
||||
'typeAnchorName': 'IColumnConfig',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '表尾合计的计算方法 columns:所有的列配置数据, data： 当前所有的表格数据',
|
||||
|
|
@ -258,7 +265,7 @@ export default {
|
|||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'表尾合并行或列，该函数返回计算后的值;通过 footer-method 和 footer-span-method 设置表尾合计行或列逻辑 必须配置 show-footer',
|
||||
'表尾合并行或列，该函数返回计算后的值；通过 footer-method 和 footer-span-method 设置表尾合计行或列逻辑 必须配置 show-footer',
|
||||
'en-US': ''
|
||||
},
|
||||
'demoId': 'grid-footer#footer-footer-row-or-column-span'
|
||||
|
|
@ -268,7 +275,7 @@ export default {
|
|||
'type': `'left' | 'center' | 'right'`,
|
||||
'defaultValue': `'left'`,
|
||||
'desc': {
|
||||
'zh-CN': '所有的表头列的对齐方式;该属性的可选值为 left（左对齐）, center（居中对齐）, right（右对齐）',
|
||||
'zh-CN': '所有的表头列的对齐方式',
|
||||
'en-US':
|
||||
'Alignment mode of all table header columns; The optional values of this attribute are left (left-aligned), center (center-aligned), and right (right-aligned)'
|
||||
},
|
||||
|
|
@ -302,7 +309,7 @@ export default {
|
|||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'设置表格内容区域（不含表格头部，底部）的高度。 不设置时，表格内容区域的高度度自适应；表格的高度；支持铺满父容器或者固定宽高;该属性的可选值为 整数, px，%',
|
||||
'设置表格内容区域（不含表格头部，底部）的高度。 不设置时，表格内容区域的高度度自适应；表格的高度；支持铺满父容器或者固定宽高；该属性的可选值为 整数, px，%',
|
||||
'en-US':
|
||||
'Set the height of the table content area (excluding the table header and bottom). If this parameter is not set, the height of the table content area is adaptive.; height of table; Supports full parent containers or fixed width and height. The optional values of this attribute are integers, px,%'
|
||||
},
|
||||
|
|
@ -375,7 +382,7 @@ export default {
|
|||
'name': 'loading-component',
|
||||
'type': 'Component',
|
||||
'defaultValue': '--',
|
||||
'desc': { 'zh-CN': '自定义表格loading', 'en-US': 'Whether the table is being loaded.' },
|
||||
'desc': { 'zh-CN': '自定义表格 loading ', 'en-US': 'Whether the table is being loaded.' },
|
||||
'demoId': 'grid-loading#loading-grid-custom-loading'
|
||||
},
|
||||
{
|
||||
|
|
@ -383,7 +390,7 @@ export default {
|
|||
'type': 'number | string',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '设置表格内容区域（不含表格头部，底部）的最大高度。;该属性的可选值为 整数, px，%',
|
||||
'zh-CN': '设置表格内容区域（不含表格头部，底部）的最大高度；该属性的可选值为：整数, px，%',
|
||||
'en-US':
|
||||
'Set the maximum height of the table content area (excluding the table header and bottom).; The optional values of this attribute are integers, px,%'
|
||||
},
|
||||
|
|
@ -428,7 +435,7 @@ export default {
|
|||
'type': 'boolean',
|
||||
'defaultValue': 'false',
|
||||
'desc': {
|
||||
'zh-CN': '是否将服务端的全部数据进行排序。默认为 false 不进行服务端排序。',
|
||||
'zh-CN': '是否将服务端的全部数据进行排序。默认为 false 不进行服务端排序',
|
||||
'en-US':
|
||||
'Whether to sort all data on the server. The default value is false. The server-side sorting is not performed.'
|
||||
},
|
||||
|
|
@ -495,7 +502,7 @@ export default {
|
|||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'设置表头所有内容过长时显示为省略号;该属性的可选值为 ellipsis（只显示省略号）,title（并且显示为原生 title）,tooltip（并且显示为 tooltip 提示）',
|
||||
'设置表头所有内容过长时显示为省略号；该属性的可选值为 ellipsis（只显示省略号）,title（并且显示为原生 title）,tooltip（并且显示为 tooltip 提示）',
|
||||
'en-US':
|
||||
'Sets the display of all contents in the table header as ellipsis if the length is too long. The optional values for this property are ellipsis (only the ellipsis is displayed), title (and the native title is displayed), and tooltip (and tooltip is displayed)'
|
||||
},
|
||||
|
|
@ -507,7 +514,7 @@ export default {
|
|||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'设置所有内容过长时显示为省略号（如果是固定列建议设置该值，提升渲染速度）;该属性的可选值为 ellipsis（只显示省略号）,title（并且显示为原生 title）,tooltip（并且显示为 tooltip 提示）',
|
||||
'设置所有内容过长时显示为省略号（如果是固定列建议设置该值，提升渲染速度）；该属性的可选值为 ellipsis（只显示省略号）,title（并且显示为原生 title）,tooltip（并且显示为 tooltip 提示）',
|
||||
'en-US':
|
||||
'Set the display of all content as ellipsis when the content is too long. (If the column is fixed, you are advised to set this parameter to improve the rendering speed.) The optional values for this property are ellipsis (only the ellipsis is displayed), title (and the native title is displayed), tooltip (and the tooltip prompt is displayed)'
|
||||
},
|
||||
|
|
@ -518,7 +525,7 @@ export default {
|
|||
'type': `'medium' | 'small' | 'mini'`,
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '表格的尺寸;该属性的可选值为 medium, small, mini',
|
||||
'zh-CN': '表格的尺寸',
|
||||
'en-US': 'Table size; The options of this attribute are medium, small, and mini'
|
||||
},
|
||||
'demoId': 'grid-size#size-grid-size'
|
||||
|
|
@ -537,10 +544,11 @@ export default {
|
|||
{
|
||||
'name': 'sort-method',
|
||||
'type': '(row1: IRow, row2: IRow)=> boolean',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'自定义所有列的排序方法，当触发排序时会调用该函数返回排序后的结果;自定义排序方法，类似原生的sort排序',
|
||||
'自定义所有列的排序方法，当触发排序时会调用该函数返回排序后的结果；自定义排序方法，类似原生的sort排序',
|
||||
'en-US':
|
||||
'Customize the sorting method of all columns. When sorting is triggered, the function is invoked to return the sorting result. User-defined sorting method, similar to the native sort sorting method'
|
||||
},
|
||||
|
|
@ -641,7 +649,7 @@ export default {
|
|||
'type': 'boolean',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '设置表格的列是否延迟加载;是否开启异步列功能，配合 scrollLoad 一起使用',
|
||||
'zh-CN': '设置表格的列是否延迟加载；是否开启异步列功能，配合 scrollLoad 一起使用',
|
||||
'en-US':
|
||||
'Sets whether to delay the loading of columns in the table. Indicates whether to enable the asynchronous column function. This parameter is used together with scrollLoad'
|
||||
},
|
||||
|
|
@ -650,6 +658,7 @@ export default {
|
|||
{
|
||||
'name': 'columns',
|
||||
'type': 'IColumnConfig[]',
|
||||
'typeAnchorName': 'IColumnConfig',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '表格列的配置信息，具体参考列配置项',
|
||||
|
|
@ -686,8 +695,9 @@ export default {
|
|||
{
|
||||
'name': 'data',
|
||||
'type': 'Row[]',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': { 'zh-CN': '设置表格的数据;', 'en-US': 'Set table data.' },
|
||||
'desc': { 'zh-CN': '设置表格的数据', 'en-US': 'Set table data.' },
|
||||
'demoId': 'grid-data-source#data-source-static-data'
|
||||
},
|
||||
{
|
||||
|
|
@ -727,7 +737,7 @@ export default {
|
|||
'type': 'boolean',
|
||||
'defaultValue': 'false',
|
||||
'desc': {
|
||||
'zh-CN': '设置行序号是否连续，开启分页时有效,seqSerial 当 showSeq 为 true 时有效。',
|
||||
'zh-CN': '设置行序号是否连续，开启分页时有效, seqSerial 当 showSeq 为 true 时有效',
|
||||
'en-US':
|
||||
'Whether to set the row sequence number consecutive. This parameter is valid only when showSeq is set to true.'
|
||||
},
|
||||
|
|
@ -827,6 +837,7 @@ export default {
|
|||
{
|
||||
'name': 'clearData',
|
||||
'type': '(rows?: IRow | IRow[], field?: string)=> void',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
|
|
@ -938,6 +949,7 @@ export default {
|
|||
{
|
||||
'name': 'createRow',
|
||||
'type': '(records: IRow | IRow[])=> Promise',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '创建 IRow | IRows 对象（对于某些特殊场景需要对数据进行手动插入时可能会用到）',
|
||||
|
|
@ -961,6 +973,7 @@ export default {
|
|||
{
|
||||
'name': 'fullValidate',
|
||||
'type': '(rows: IRow[], callback: ()=> void)=> Promise',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '表格完整校验函数，和 validate 的区别就是会对全量数据的所有规则进行完整校验',
|
||||
|
|
@ -972,6 +985,7 @@ export default {
|
|||
{
|
||||
'name': 'getActiveRow',
|
||||
'type': '()=> IRow',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': { 'zh-CN': '获取已激活的行数据', 'en-US': 'Obtain activated row data' },
|
||||
'demoId': 'grid-edit#edit-trigger-mode-hm-editing'
|
||||
|
|
@ -979,6 +993,7 @@ export default {
|
|||
{
|
||||
'name': 'getColumnByField',
|
||||
'type': '(field: string)=> IColumnConfig',
|
||||
'typeAnchorName': 'IColumnConfig',
|
||||
'defaultValue': '--',
|
||||
'desc': { 'zh-CN': '根据列的字段名获取列', 'en-US': 'Obtain columns based on column field names.' },
|
||||
'demoId': 'grid-large-data#large-data-scroll-to'
|
||||
|
|
@ -986,6 +1001,7 @@ export default {
|
|||
{
|
||||
'name': 'getColumnById',
|
||||
'type': '(colid: string)=> IColumnConfig',
|
||||
'typeAnchorName': 'IColumnConfig',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '根据列的唯一主键获取列',
|
||||
|
|
@ -996,6 +1012,7 @@ export default {
|
|||
{
|
||||
'name': 'getColumnIndex',
|
||||
'type': '(column: IColumnConfig)=> number',
|
||||
'typeAnchorName': 'IColumnConfig',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '根据 column 获取相对于 columns 中的索引',
|
||||
|
|
@ -1006,6 +1023,7 @@ export default {
|
|||
{
|
||||
'name': 'getColumnNode',
|
||||
'type': '(cell: HTMLElement)=> IColumnConfig',
|
||||
'typeAnchorName': 'IColumnConfig',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '根据 th/td 元素获取对应的 column 信息',
|
||||
|
|
@ -1016,6 +1034,7 @@ export default {
|
|||
{
|
||||
'name': 'getColumns',
|
||||
'type': '(columnIndex?: number)=> IColumnConfig | IColumnConfig[]',
|
||||
'typeAnchorName': 'IColumnConfig',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '获取表格的可视列，也可以指定索引获取列',
|
||||
|
|
@ -1026,6 +1045,7 @@ export default {
|
|||
{
|
||||
'name': 'getCurrentRow',
|
||||
'type': '()=> IRow',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '用于当前行，获取当前行的数据',
|
||||
|
|
@ -1036,6 +1056,7 @@ export default {
|
|||
{
|
||||
'name': 'getData',
|
||||
'type': '(rowIndex?: number)=> IRow | IRow[]',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '获取数据，和 data 的行为一致，也可以指定索引获取数据',
|
||||
|
|
@ -1047,6 +1068,7 @@ export default {
|
|||
{
|
||||
'name': 'getInsertRecords',
|
||||
'type': '()=> IRow[]',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': { 'zh-CN': '获取新增的数据', 'en-US': 'Obtain the new data' },
|
||||
'demoId': 'grid-toolbar#toolbar-insert-delete-update'
|
||||
|
|
@ -1054,6 +1076,7 @@ export default {
|
|||
{
|
||||
'name': 'getRadioRow',
|
||||
'type': '()=> IRow',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '用于单选行，获取当已选中的数据',
|
||||
|
|
@ -1076,6 +1099,7 @@ export default {
|
|||
{
|
||||
'name': 'getRemoveRecords',
|
||||
'type': '()=> IRow[]',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': { 'zh-CN': '获取已删除的数据', 'en-US': 'Obtain deleted data' },
|
||||
'demoId': 'grid-toolbar#toolbar-insert-delete-update'
|
||||
|
|
@ -1083,6 +1107,7 @@ export default {
|
|||
{
|
||||
'name': 'getRowById',
|
||||
'type': '(rowid: string)=> IRow',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '根据行的唯一主键获取行',
|
||||
|
|
@ -1093,6 +1118,7 @@ export default {
|
|||
{
|
||||
'name': 'getRowIndex',
|
||||
'type': '(row: IRow)=> number',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '根据 row 获取相对于 data 中的索引',
|
||||
|
|
@ -1103,6 +1129,7 @@ export default {
|
|||
{
|
||||
'name': 'getRowNode',
|
||||
'type': '(tr: HTMLElement)=> IRow',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '根据 tr 元素获取对应的 row 信息',
|
||||
|
|
@ -1113,6 +1140,7 @@ export default {
|
|||
{
|
||||
'name': 'getSelectRecords',
|
||||
'type': '()=> IRow[]',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '用于多选行，获取已选中的数据',
|
||||
|
|
@ -1123,6 +1151,7 @@ export default {
|
|||
{
|
||||
'name': 'getTableColumn',
|
||||
'type': '()=> IRow[]',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '获取当前表格的列（完整的全量表头列、处理条件之后的全量表头列、当前渲染中的表头列）',
|
||||
|
|
@ -1134,6 +1163,7 @@ export default {
|
|||
{
|
||||
'name': 'getTableData',
|
||||
'type': '()=> IRow[]',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
|
|
@ -1146,6 +1176,7 @@ export default {
|
|||
{
|
||||
'name': 'getUpdateRecords',
|
||||
'type': '()=> IRow[]',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': { 'zh-CN': '获取已修改的数据', 'en-US': 'Obtain modified data' },
|
||||
'demoId': 'grid-toolbar#toolbar-insert-delete-update'
|
||||
|
|
@ -1154,12 +1185,13 @@ export default {
|
|||
'name': 'handleFetch',
|
||||
'type': '()=> Promise',
|
||||
'defaultValue': '--',
|
||||
'desc': { 'zh-CN': '触发表格的fetch-data', 'en-US': 'Fetch-data of the trigger table' },
|
||||
'desc': { 'zh-CN': '触发表格的 fetch-data ', 'en-US': 'Fetch-data of the trigger table' },
|
||||
'demoId': 'grid-data-source#data-source-request-service'
|
||||
},
|
||||
{
|
||||
'name': 'hasActiveRow',
|
||||
'type': '(row: IRow)=> boolean',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '检查行是否已激活为编辑状态',
|
||||
|
|
@ -1170,6 +1202,7 @@ export default {
|
|||
{
|
||||
'name': 'hasRowChange',
|
||||
'type': '(row: IRow, field: string)=> boolean',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '检查行或列数据是否发生改变',
|
||||
|
|
@ -1180,6 +1213,7 @@ export default {
|
|||
{
|
||||
'name': 'hasRowExpand',
|
||||
'type': '(row: IRow)=> boolean',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': { 'zh-CN': '检查行是否已展开', 'en-US': 'Check whether the row is expanded.' },
|
||||
'demoId': 'grid-expand#expand-has-row-expand'
|
||||
|
|
@ -1187,6 +1221,7 @@ export default {
|
|||
{
|
||||
'name': 'hasTreeExpand',
|
||||
'type': '(row: IRow)=> boolean',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': { 'zh-CN': '检查树节点是否已展开', 'en-US': 'Check whether the tree node is expanded.' },
|
||||
'demoId': 'grid-tree-table#tree-table-has-tree-expand'
|
||||
|
|
@ -1194,6 +1229,7 @@ export default {
|
|||
{
|
||||
'name': 'hideColumn',
|
||||
'type': '(column: IColumnConfig)=> Promise',
|
||||
'typeAnchorName': 'IColumnConfig',
|
||||
'defaultValue': '--',
|
||||
'desc': { 'zh-CN': '隐藏指定列', 'en-US': 'Hide a specified column.' },
|
||||
'demoId': 'grid-custom#custom-hide-column'
|
||||
|
|
@ -1201,9 +1237,10 @@ export default {
|
|||
{
|
||||
'name': 'insert',
|
||||
'type': '(records: IRow | IRow[])=> Promise',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '在表格中新增数据;往表格插入数据，从第一行新增一行或多行新数据',
|
||||
'zh-CN': '在表格中新增数据；往表格插入数据，从第一行新增一行或多行新数据',
|
||||
'en-US':
|
||||
'Add data to the table.; Insert data into the table, add one or more rows of data from the first row'
|
||||
},
|
||||
|
|
@ -1212,6 +1249,7 @@ export default {
|
|||
{
|
||||
'name': 'insertAt',
|
||||
'type': '(records: IRow | IRow[], row: IRow | null | -1)=> Promise',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
|
|
@ -1224,6 +1262,7 @@ export default {
|
|||
{
|
||||
'name': 'loadColumn',
|
||||
'type': '(columns: IColumnConfig[])=> Promise',
|
||||
'typeAnchorName': 'IColumnConfig',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '加载列配置（对于表格列需要重载、局部递增场景下可能会用到）',
|
||||
|
|
@ -1235,6 +1274,7 @@ export default {
|
|||
{
|
||||
'name': 'loadData',
|
||||
'type': '(data: IRow[])=> Promise',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '加载数据（对于表格数据需要重载、局部递增场景下可能会用到）',
|
||||
|
|
@ -1280,6 +1320,7 @@ export default {
|
|||
{
|
||||
'name': 'reloadCustoms',
|
||||
'type': '(customs: IColumnConfig[], sortable?: boolean)=> Promise',
|
||||
'typeAnchorName': 'IColumnConfig',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
|
|
@ -1292,6 +1333,7 @@ export default {
|
|||
{
|
||||
'name': 'remove',
|
||||
'type': '(rows: IRow | IRow[])=> Promise',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '删除指定行数据，指定 row 或 [row, ...] 删除多条数据，如果为空则删除所有数据',
|
||||
|
|
@ -1343,6 +1385,7 @@ export default {
|
|||
{
|
||||
'name': 'revertData',
|
||||
'type': '(rows: IRow | IRow[], field?: string)=> Promise',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '还原更改，还原指定行 row 或者整个表格的数据',
|
||||
|
|
@ -1363,6 +1406,7 @@ export default {
|
|||
{
|
||||
'name': 'scrollToColumn',
|
||||
'type': '(column: IColumnConfig)=> Promise',
|
||||
'typeAnchorName': 'IColumnConfig',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '如果有滚动条，则滚动到对应的列',
|
||||
|
|
@ -1373,6 +1417,7 @@ export default {
|
|||
{
|
||||
'name': 'scrollToRow',
|
||||
'type': '(row: IRow)=> Promise',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '如果有滚动条，则滚动到对应的行',
|
||||
|
|
@ -1383,6 +1428,7 @@ export default {
|
|||
{
|
||||
'name': 'setActiveCell',
|
||||
'type': '(row: IRow, field: string)=> Promise',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': { 'zh-CN': '激活单元格编辑', 'en-US': 'Activate cell editing' },
|
||||
'demoId': 'grid-edit#edit-trigger-mode-hm-editing'
|
||||
|
|
@ -1390,6 +1436,7 @@ export default {
|
|||
{
|
||||
'name': 'setActiveRow',
|
||||
'type': '(row: IRow)=> Promise',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '激活行编辑，如果是 mode=cell 则默认激活第一个单元格',
|
||||
|
|
@ -1425,6 +1472,7 @@ export default {
|
|||
{
|
||||
'name': 'setCurrentRow',
|
||||
'type': '(row: IRow)=> Promise',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '用于当前行，设置某一行为高亮状态',
|
||||
|
|
@ -1435,6 +1483,7 @@ export default {
|
|||
{
|
||||
'name': 'setRadioRow',
|
||||
'type': '(row: IRow)=> Promise',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '用于单选行，设置某一行为选中状态',
|
||||
|
|
@ -1445,6 +1494,7 @@ export default {
|
|||
{
|
||||
'name': 'setRowExpansion',
|
||||
'type': '(rows: IRow | IRow[], checked: boolean)=> Promise',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '设置展开行，第二个参数设置这一行展开与否',
|
||||
|
|
@ -1455,6 +1505,7 @@ export default {
|
|||
{
|
||||
'name': 'setSelection',
|
||||
'type': '(rows: IRow | IRow[], checked: boolean)=> Promise',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '用于多选行，设置行为选中状态，第二个参数为选中与否',
|
||||
|
|
@ -1466,6 +1517,7 @@ export default {
|
|||
{
|
||||
'name': 'setTreeExpansion',
|
||||
'type': '(rows: IRow | IRow[], checked: boolean)=> Promise',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '设置展开树形节点，第二个参数设置这一行展开与否',
|
||||
|
|
@ -1476,6 +1528,7 @@ export default {
|
|||
{
|
||||
'name': 'showColumn',
|
||||
'type': '(column: IColumnConfig)=> Promise',
|
||||
'typeAnchorName': 'IColumnConfig',
|
||||
'defaultValue': '--',
|
||||
'desc': { 'zh-CN': '显示指定列', 'en-US': 'Display the specified column.' },
|
||||
'demoId': 'grid-custom#custom-hide-column'
|
||||
|
|
@ -1503,6 +1556,7 @@ export default {
|
|||
{
|
||||
'name': 'toggleRowExpansion',
|
||||
'type': '(row: IRow)=> Promise',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': { 'zh-CN': '用于可展开表格，切换展开行', 'en-US': 'For expanding tables or switching rows.' },
|
||||
'demoId': 'grid-expand#expand-set-row-expansion'
|
||||
|
|
@ -1510,6 +1564,7 @@ export default {
|
|||
{
|
||||
'name': 'toggleRowSelection',
|
||||
'type': '(row: IRow)=> Promise',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '用于多选行，切换某一行的选中状态',
|
||||
|
|
@ -1520,6 +1575,7 @@ export default {
|
|||
{
|
||||
'name': 'toggleTreeExpansion',
|
||||
'type': '(row: IRow)=> Promise',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '用于可树形表格，切换展开树形节点',
|
||||
|
|
@ -1530,6 +1586,7 @@ export default {
|
|||
{
|
||||
'name': 'validate',
|
||||
'type': '(rows: IRow | IRow[], callback: ()=> void)=> Promise',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
|
|
@ -1895,9 +1952,9 @@ export default {
|
|||
{
|
||||
'name': 'align',
|
||||
'type': `'left' | 'center' | 'right'`,
|
||||
'defaultValue': '继承 table 的 align',
|
||||
'defaultValue': `'left'`,
|
||||
'desc': {
|
||||
'zh-CN': '列对其方式;该属性的可选值为 left（左对其）, center（居中对其）, right（右对齐）',
|
||||
'zh-CN': '列对其方式',
|
||||
'en-US': 'Column pair mode; The optional values for this property are left, center, right'
|
||||
},
|
||||
'demoId': 'grid-align#align-grid-align'
|
||||
|
|
@ -1919,7 +1976,7 @@ export default {
|
|||
'defaultValue': 'true',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
"是 filter 对象内置的属性，筛选是否允许多选;设置选择列是否显示复选框。当 columnType 为 'select' 时有效。",
|
||||
'是 filter 对象内置的属性，筛选是否允许多选；设置选择列是否显示复选框。当 columnType 为 select 时有效',
|
||||
'en-US':
|
||||
"is an attribute built in the filter object. Whether multiple selections are allowed for filtering. Sets whether to display the check box in the selected column. This parameter is valid only when columnType is set to'select'."
|
||||
},
|
||||
|
|
@ -1927,11 +1984,11 @@ export default {
|
|||
},
|
||||
{
|
||||
'name': 'fixed',
|
||||
'type': 'string',
|
||||
'type': `'left' | 'right'`,
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'将列固定在左侧，其中 freezable 可冻结可解冻，在表格个性化面板中可操作，而 frozen 只能冻结不能解冻，在个性化面板中不可操作;将列固定在左侧或者右侧（注意：固定列应该放在左右两侧的位置）;该属性的可选值为 left（固定左侧）, right（固定右侧）',
|
||||
'将列固定在左侧，其中 freezable 可冻结可解冻，在表格个性化面板中可操作，而 frozen 只能冻结不能解冻，在个性化面板中不可操作；将列固定在左侧或者右侧（注意：固定列应该放在左右两侧的位置）',
|
||||
'en-US':
|
||||
'Fix columns on the left. Freezable can be frozen or unfrozen, but can be operated in the table personalized panel. Frozen can only be frozen but cannot be operated in the personalized panel. Fix the column to the left or right (Note: The fixed columns should be placed on the left and right sides.) The optional values of this attribute are left (fixed left) and right (fixed right)'
|
||||
},
|
||||
|
|
@ -1942,7 +1999,7 @@ export default {
|
|||
'type': `'left' | 'center' | 'right'`,
|
||||
'defaultValue': `'left'`,
|
||||
'desc': {
|
||||
'zh-CN': '表尾列的对齐方式;该属性的可选值为 left（左对其）, center（居中对其）, right（右对齐）',
|
||||
'zh-CN': '表尾列的对齐方式）',
|
||||
'en-US':
|
||||
'Alignment mode of the column at the end of the table; The optional values for this property are left, center, right'
|
||||
},
|
||||
|
|
@ -1964,7 +2021,7 @@ export default {
|
|||
'type': "'left' | 'center' | 'right'",
|
||||
'defaultValue': `'left'`,
|
||||
'desc': {
|
||||
'zh-CN': '表头列的对齐方式;该属性的可选值为 left（左对其）, center（居中对其）, right（右对齐）',
|
||||
'zh-CN': '表头列的对齐方式',
|
||||
'en-US':
|
||||
'The alignment mode of the table header column; The optional values for this property are left, center, right'
|
||||
},
|
||||
|
|
@ -1976,7 +2033,7 @@ export default {
|
|||
'typeAnchorName': 'IClassNameArgs',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '设置列头样式名称;给表头的单元格附加 className，也可以是函数',
|
||||
'zh-CN': '设置列头样式名称；给表头的单元格附加 className，也可以是函数',
|
||||
'en-US': 'Set the column header style name. Add className to the cell in the table header, or the function'
|
||||
},
|
||||
'demoId': 'grid-custom-style#custom-style-header-style'
|
||||
|
|
@ -1995,9 +2052,9 @@ export default {
|
|||
{
|
||||
'name': 'min-width',
|
||||
'type': 'number | string',
|
||||
'defaultValue': '继承 table 的 column-min-width',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '最小列宽度；会自动将剩余空间按比例分配;该属性的可选值为 整数, px，%',
|
||||
'zh-CN': '最小列宽度；会自动将剩余空间按比例分配；该属性的可选值为 整数, px，%',
|
||||
'en-US':
|
||||
'Minimum column width; The remaining space will be allocated in proportion. The optional values of this property are integers, px,%'
|
||||
},
|
||||
|
|
@ -2026,7 +2083,7 @@ export default {
|
|||
{
|
||||
'name': 'remote-sort',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '继承 table 的 remote-sort',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '是否使用服务端排序，如果设置为 true 则不会对数据进行处理',
|
||||
'en-US': 'Whether to use server sorting. If this parameter is set to true, data will not be processed.'
|
||||
|
|
@ -2036,9 +2093,9 @@ export default {
|
|||
{
|
||||
'name': 'resizable',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '继承 table 的 resizable',
|
||||
'defaultValue': 'true',
|
||||
'desc': {
|
||||
'zh-CN': '设置该列是否可以调整列宽;列是否允许拖动列宽调整大小',
|
||||
'zh-CN': '设置该列是否可以调整列宽；列是否允许拖动列宽调整大小',
|
||||
'en-US':
|
||||
'Set whether the column width can be adjusted. Allows you to drag the column width to adjust the column size.'
|
||||
},
|
||||
|
|
@ -2047,10 +2104,10 @@ export default {
|
|||
{
|
||||
'name': 'show-header-overflow',
|
||||
'type': 'string | boolean',
|
||||
'defaultValue': '继承 table 的 show-header-overflow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'当表头内容过长时显示为省略号;该属性的可选值为 ellipsis（只显示省略号）, title（并且显示为原生 title）, tooltip（并且显示为 tooltip 提示）',
|
||||
'当表头内容过长时显示为省略号；该属性的可选值为 ellipsis （只显示省略号）， title （并且显示为原生 title ）， tooltip （并且显示为 tooltip 提示）',
|
||||
'en-US':
|
||||
'When the table header content is too long, the ellipsis is displayed. The optional values for this property are ellipsis (only the ellipsis is displayed), title (and the native title is displayed), tooltip (and the tooltip prompt is displayed)'
|
||||
},
|
||||
|
|
@ -2059,10 +2116,10 @@ export default {
|
|||
{
|
||||
'name': 'show-overflow',
|
||||
'type': 'string | boolean',
|
||||
'defaultValue': '继承 table 的 show-overflow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'当内容过长时显示为省略号;该属性的可选值为 ellipsis（只显示省略号）, title（并且显示为原生 title）, tooltip（并且显示为 tooltip 提示）',
|
||||
'当内容过长时显示为省略号；该属性的可选值为 ellipsis（只显示省略号）, title（并且显示为原生 title）, tooltip（并且显示为 tooltip 提示）',
|
||||
'en-US':
|
||||
'When the content is too long, an ellipsis is displayed. The optional values for this property are ellipsis (only the ellipsis is displayed), title (and the native title is displayed), tooltip (and the tooltip is displayed)'
|
||||
},
|
||||
|
|
@ -2100,7 +2157,7 @@ export default {
|
|||
{
|
||||
'name': 'sort-method',
|
||||
'type': '(row1: IRow, row2: IRow)=> boolean',
|
||||
'typeAnchorName': 'IValidRules',
|
||||
'typeAnchorName': 'IRow',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '自定义所有列的排序方法，当触发排序时会调用该函数',
|
||||
|
|
@ -2113,7 +2170,7 @@ export default {
|
|||
'type': 'boolean',
|
||||
'defaultValue': 'false',
|
||||
'desc': {
|
||||
'zh-CN': '设置该列数据是否可以排序。;是否允许列排序',
|
||||
'zh-CN': '设置该列数据是否可以排序',
|
||||
'en-US': 'Whether the data in the column can be sorted.; Allow Sorting Columns'
|
||||
},
|
||||
'demoId': 'grid-sort#sort-default-sort'
|
||||
|
|
@ -2140,11 +2197,11 @@ export default {
|
|||
},
|
||||
{
|
||||
'name': 'format-text',
|
||||
'type': `'money' | 'enum' | 'select' | 'number' | 'integer' | 'filesize' | 'date' | 'dateTime' | 'longDateTime' | 'time' | 'longTime' | 'yearMonth' | 'ellipsis' | 'rate' | 'boole' | (params)=> string`,
|
||||
'type': 'IFormatText',
|
||||
'typeAnchorName': 'IFormatText',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'设置当前表格列的显示获取编辑类型;设置当前表格列的显示获取编辑类型，也可以是函数;该属性的可选值为 ',
|
||||
'zh-CN': '设置当前表格列的显示获取编辑类型；设置当前表格列的显示获取编辑类型，也可以是函数',
|
||||
'en-US':
|
||||
'Sets the display and editing mode of the current table column. Sets the display and obtaining editing type of the current table column. It can also be the function'
|
||||
},
|
||||
|
|
@ -2155,7 +2212,7 @@ export default {
|
|||
'type': `'index' | 'selection' | 'radio' | 'expand'`,
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '设置内置列的类型;设置内置列的类型',
|
||||
'zh-CN': '设置内置列的类型',
|
||||
'en-US': 'Set the type of the built-in column'
|
||||
},
|
||||
'demoId': 'grid-serial-column#serial-column-default-serial-column'
|
||||
|
|
@ -2163,10 +2220,10 @@ export default {
|
|||
{
|
||||
'name': 'width',
|
||||
'type': 'number | string',
|
||||
'defaultValue': '继承 table 的 column-width',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
"设置列的宽度，可以是像素或者百分比或者'auto'，设置为'auto'时，列宽会自动适应。;列宽度;该属性的可选值为 整数 / px /%",
|
||||
'设置列的宽度，可以是像素或者百分比或者 auto ，设置为 auto 时，列宽会自动适应；该属性的可选值为 整数 ， px ，%',
|
||||
'en-US':
|
||||
'Set the column width. The value can be pixel, percentage, or auto. If the value is auto, the column width automatically adapts.; column width; The optional value of this property is integer/px/%'
|
||||
},
|
||||
|
|
@ -2200,7 +2257,7 @@ export default {
|
|||
'typeAnchorName': 'IEditorConfig',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '单元格编辑渲染配置项，也可以是函数 Function(h, params);设置表格列的编辑类型',
|
||||
'zh-CN': '单元格编辑渲染配置项，也可以是函数返回 Vue 组件',
|
||||
'en-US':
|
||||
'Cell editing rendering configuration item, which can also be the function Function(h, params). Sets the editing type of the table column'
|
||||
},
|
||||
|
|
@ -2211,7 +2268,7 @@ export default {
|
|||
'type': 'boolean | IFilterConfig',
|
||||
'defaultValue': 'false',
|
||||
'desc': {
|
||||
'zh-CN': '设置表格列的筛选配置信息。默认值为 false 不配置筛选信息。',
|
||||
'zh-CN': '设置表格列的筛选配置信息。默认值为 false 不配置筛选信息',
|
||||
'en-US':
|
||||
'Set the filtering configuration of the table column. The default value is false. No filtering information is configured.'
|
||||
},
|
||||
|
|
@ -2224,7 +2281,7 @@ export default {
|
|||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'设置表格列的渲染类型。其优先级高于列的 type 属性配置;单元格渲染配置项，其优先级高于列的 formatText 属性配置',
|
||||
'设置表格列的渲染类型。其优先级高于列的 type 属性配置；单元格渲染配置项，其优先级高于列的 formatText 属性配置',
|
||||
'en-US':
|
||||
'Set the rendering type of the table column. The priority of the column is higher than that of the column type attribute. Cell rendering configuration item. Its priority is higher than that of the formatText attribute of the column'
|
||||
},
|
||||
|
|
@ -2325,7 +2382,7 @@ export default {
|
|||
},
|
||||
{
|
||||
'name': 'resizable',
|
||||
'type': 'boolean | object',
|
||||
'type': 'boolean | {storage: boolean}',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '列宽拖动配置（需要设置 id）',
|
||||
|
|
@ -2335,11 +2392,12 @@ export default {
|
|||
},
|
||||
{
|
||||
'name': 'setting',
|
||||
'type': 'boolean | object',
|
||||
'type': `boolean | IToolbarSetting`,
|
||||
'typeAnchorName': 'IToolbarSetting',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'设置表格属性是否显示个性化面板，当设置表格的name属性时有效;设置工具栏属性是否显示个性化配置（需要设置 id）',
|
||||
'设置表格属性是否显示个性化面板，当设置表格的 name 属性时有效；设置工具栏属性是否显示个性化配置（需要设置 id ）',
|
||||
'en-US':
|
||||
'Whether to display the table attribute on the personalized panel. This parameter is valid only when the name attribute of the table is set. Set whether to display personalized configuration for toolbar attributes (id needs to be set)'
|
||||
},
|
||||
|
|
@ -2350,7 +2408,7 @@ export default {
|
|||
'type': 'boolean',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '设置表格是否可以全屏，或者需要全屏的容器。;设置工具栏属性是否显示全屏按钮',
|
||||
'zh-CN': '设置表格是否可以全屏，或者需要全屏的容器；设置工具栏属性是否显示全屏按钮',
|
||||
'en-US':
|
||||
'Sets whether the table can be displayed in full screen mode or whether the container needs to be displayed in full screen mode.; Sets whether to display the full-screen button on the toolbar.'
|
||||
},
|
||||
|
|
@ -2361,7 +2419,7 @@ export default {
|
|||
'type': `'medium' | 'small' | 'mini'`,
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '尺寸;该属性的可选值为 medium,small,mini',
|
||||
'zh-CN': '表格的尺寸',
|
||||
'en-US': 'Dimension; The options of this attribute are medium, small, and mini'
|
||||
},
|
||||
'demoId': 'grid-toolbar#toolbar-copy-row-data'
|
||||
|
|
@ -2423,7 +2481,7 @@ export default {
|
|||
'typeAnchorName': 'ISettingConfigs',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '点击个性化面板的确认按钮触发该事件;settingConfigs:表格的个性化数据',
|
||||
'zh-CN': '点击个性化面板的确认按钮触发该事件',
|
||||
'en-US':
|
||||
'Click the OK button on the personalized panel to trigger the event. settingConfigs: personalized data of the table'
|
||||
},
|
||||
|
|
@ -2435,7 +2493,7 @@ export default {
|
|||
'typeAnchorName': 'ISettingConfigs',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '点击个性化面板的取消按钮触发该事件;settingConfigs:表格的个性化数据',
|
||||
'zh-CN': '点击个性化面板的取消按钮触发该事件',
|
||||
'en-US':
|
||||
'Click the Cancel button on the personalized panel to trigger the event. settingConfigs: personalized data of the table'
|
||||
},
|
||||
|
|
@ -2714,7 +2772,7 @@ interface ISortConfig {
|
|||
type: 'type',
|
||||
code: `
|
||||
interface ITreeConfig {
|
||||
// 展开子级触发方式：'default'(点击按钮触发)；'cell'(点击单元格触发);'row'(点击行触发)
|
||||
// 展开子级触发方式：'default'(点击按钮触发)；'cell'(点击单元格触发)；'row'(点击行触发)
|
||||
trigger?: 'default' | 'cell' | 'row'
|
||||
// 子级索引是否按数字递增显示：true(子级索引按数字递增显示，父级1，子级2)；false(子级索引在父级索引基础上增加，父级1，子级1.1)
|
||||
ordered?: boolean
|
||||
|
|
@ -3375,13 +3433,30 @@ interface IFilterConfig {
|
|||
type: 'type',
|
||||
code: `
|
||||
interface IOPConfig {
|
||||
editConfig: IEditConfig
|
||||
pagerConfig: IPagerConfig
|
||||
editConfig?: IEditConfig
|
||||
pagerConfig?: IPagerConfig
|
||||
columns: IColumnConfig[]
|
||||
data: IRow[]
|
||||
}[]
|
||||
}
|
||||
`
|
||||
},
|
||||
{
|
||||
name: 'IFormatText',
|
||||
type: 'type',
|
||||
code: `
|
||||
'money' | 'enum' | 'select' | 'number' | 'integer' | 'filesize' | 'date' | 'dateTime' | 'longDateTime' | 'time' | 'longTime' | 'yearMonth' | 'ellipsis' | 'rate' | 'boole' | (params)=> string
|
||||
`
|
||||
},
|
||||
{
|
||||
name: 'IToolbarSetting',
|
||||
type: 'type',
|
||||
code: `
|
||||
interface IToolbarSetting {
|
||||
remote?: boolean
|
||||
storage?: string
|
||||
sortable?: Sortable
|
||||
}
|
||||
`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -197,6 +197,7 @@ export const Cell = {
|
|||
renderHeader: this.renderHeader,
|
||||
renderCell: getCellRender(isTreeNode, 'renderTreeCell', 'renderCell', this)
|
||||
}
|
||||
// eslint-disable-next-line @typescript-eslint/no-this-alias
|
||||
let _vm = this
|
||||
|
||||
let ruleChains = [
|
||||
|
|
@ -770,9 +771,7 @@ export const Cell = {
|
|||
|
||||
let vNodes = [
|
||||
isRequired && showAsterisk ? h('i', { class: `tiny-icon ${icon.required}` }) : null,
|
||||
editConfig && !editConfig.showIcon && !column.showIcon
|
||||
? null
|
||||
: h(icon.edit, { class: 'tiny-grid-edit-icon tiny-svg-size' })
|
||||
!editConfig || !column.showIcon ? null : h(icon.edit, { class: 'tiny-grid-edit-icon tiny-svg-size' })
|
||||
]
|
||||
|
||||
vNodes = vNodes.concat(Cell.renderHeader(h, params))
|
||||
|
|
|
|||
Loading…
Reference in New Issue