lxm_front/vxe-table
1
0
Fork 0
mirror of https://gitee.com/xuliangzhan_admin/vxe-table.git synced 2026-01-21 05:27:57 +08:00
Code Issues Projects Releases Wiki Activity

优化重构

Browse Source
This commit is contained in:
xuliangzhan
2020-05-10 21:01:28 +08:00
parent 6c9e882185
commit 1dcc4e1ea5
52 changed files with 288 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
examples/views/table/base/Border.vue
View File

@@ -3,6 +3,7 @@
<p class="tip">通过设置 <table-api-link prop="border"/>=false|default 默认显示边框</p>
<vxe-table
height="200"
:data="tableData">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name"></vxe-table-column>
@@ -22,6 +23,7 @@
<vxe-table
border
height="200"
:data="tableData">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name"></vxe-table-column>
@@ -40,6 +42,7 @@
<p class="tip">通过设置 <table-api-link prop="border"/>=outer 显示外边框</p>
<vxe-table
height="200"
border="outer"
:data="tableData">
<vxe-table-column type="seq" width="60"></vxe-table-column>
@@ -59,6 +62,7 @@
<p class="tip">通过设置 <table-api-link prop="border"/>=inner 显示内边框</p>
<vxe-table
height="200"
border="inner"
:data="tableData">
<vxe-table-column type="seq" width="60"></vxe-table-column>
@@ -78,6 +82,7 @@
<p class="tip">通过设置 <table-api-link prop="border"/>=none 去掉所有边框</p>
<vxe-table
height="200"
border="none"
:data="tableData">
<vxe-table-column type="seq" width="60"></vxe-table-column>
@@ -106,6 +111,7 @@ export default {
demoCodes: [
`
<vxe-table
height="200"
:data="tableData">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name"></vxe-table-column>
@@ -122,13 +128,14 @@ export default {
}
},
created () {
this.tableData = window.MOCK_DATA_LIST.slice(0, 3)
this.tableData = window.MOCK_DATA_LIST.slice(0, 10)
}
}
`,
`
<vxe-table
border
height="200"
:data="tableData">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name"></vxe-table-column>
@@ -145,12 +152,13 @@ export default {
}
},
created () {
this.tableData = window.MOCK_DATA_LIST.slice(0, 3)
this.tableData = window.MOCK_DATA_LIST.slice(0, 10)
}
}
`,
`
<vxe-table
height="200"
border="outer"
:data="tableData">
<vxe-table-column type="seq" width="60"></vxe-table-column>
@@ -168,12 +176,13 @@ export default {
}
},
created () {
this.tableData = window.MOCK_DATA_LIST.slice(0, 3)
this.tableData = window.MOCK_DATA_LIST.slice(0, 10)
}
}
`,
`
<vxe-table
height="200"
border="inner"
:data="tableData">
<vxe-table-column type="seq" width="60"></vxe-table-column>
@@ -191,12 +200,13 @@ export default {
}
},
created () {
this.tableData = window.MOCK_DATA_LIST.slice(0, 3)
this.tableData = window.MOCK_DATA_LIST.slice(0, 10)
}
}
`,
`
<vxe-table
height="200"
border="none"
:data="tableData">
<vxe-table-column type="seq" width="60"></vxe-table-column>
@@ -214,7 +224,7 @@ export default {
}
},
created () {
this.tableData = window.MOCK_DATA_LIST.slice(0, 3)
this.tableData = window.MOCK_DATA_LIST.slice(0, 10)
}
}
`
@@ -222,7 +232,7 @@ export default {
}
},
created () {
this.tableData = window.MOCK_DATA_LIST.slice(0, 3)
this.tableData = window.MOCK_DATA_LIST.slice(0, 10)
},
mounted () {
Array.from(this.$el.querySelectorAll('pre code')).forEach((block) => {

12
examples/views/table/edit/CellDisable.vue
View File

@@ -31,8 +31,10 @@
@edit-disabled="editDisabledEvent">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name" :edit-render="{name: 'input'}"></vxe-table-column>
<vxe-table-column field="sex" title="Sex" :edit-render="{name: '$select', options: sexList}"></vxe-table-column>
<vxe-table-column field="date" title="Date" :edit-render="{name: '$input', props: {type: 'date'}}"></vxe-table-column>
<vxe-table-column title="分组">
<vxe-table-column field="sex" title="Sex" :edit-render="{name: '$select', options: sexList}"></vxe-table-column>
<vxe-table-column field="date" title="Date" :edit-render="{name: '$input', props: {type: 'date'}}"></vxe-table-column>
</vxe-table-column>
</vxe-table>
<p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
@@ -106,8 +108,10 @@ export default {
@edit-disabled="editDisabledEvent">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name" :edit-render="{name: 'input'}"></vxe-table-column>
<vxe-table-column field="sex" title="Sex" :edit-render="{name: '$select', options: sexList}"></vxe-table-column>
<vxe-table-column field="date" title="Date" :edit-render="{name: '$input', props: {type: 'date'}}"></vxe-table-column>
<vxe-table-column title="分组">
<vxe-table-column field="sex" title="Sex" :edit-render="{name: '$select', options: sexList}"></vxe-table-column>
<vxe-table-column field="date" title="Date" :edit-render="{name: '$input', props: {type: 'date'}}"></vxe-table-column>
</vxe-table-column>
</vxe-table>
`,
`

32
examples/views/table/edit/CellValid.vue
View File

@@ -27,11 +27,17 @@
:edit-config="{trigger: 'click', mode: 'cell', showStatus: true}">
<vxe-table-column type="checkbox" width="60"></vxe-table-column>
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name" :edit-render="{name: 'input'}"></vxe-table-column>
<vxe-table-column field="role" title="Role" :edit-render="{name: 'input'}"></vxe-table-column>
<vxe-table-column field="sex" title="Sex" :edit-render="{name: 'input'}"></vxe-table-column>
<vxe-table-column field="age" title="Age" :edit-render="{name: '$input', props: {type: 'integer'}}"></vxe-table-column>
<vxe-table-column field="date" title="Date" :edit-render="{name: '$input', props: {type: 'date'}}"></vxe-table-column>
<vxe-table-column title="分组1">
<vxe-table-column field="name" title="Name" :edit-render="{name: 'input'}"></vxe-table-column>
<vxe-table-column field="role" title="Role" :edit-render="{name: 'input'}"></vxe-table-column>
</vxe-table-column>
<vxe-table-column title="分组2">
<vxe-table-column title="分组21">
<vxe-table-column field="sex" title="Sex" :edit-render="{name: 'input'}"></vxe-table-column>
<vxe-table-column field="age" title="Age" :edit-render="{name: '$input', props: {type: 'integer'}}"></vxe-table-column>
<vxe-table-column field="date" title="Date" :edit-render="{name: '$input', props: {type: 'date'}}"></vxe-table-column>
</vxe-table-column>
</vxe-table-column>
</vxe-table>
<p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
@@ -106,11 +112,17 @@ export default {
:edit-config="{trigger: 'click', mode: 'cell', showStatus: true}">
<vxe-table-column type="checkbox" width="60"></vxe-table-column>
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name" :edit-render="{name: 'input'}"></vxe-table-column>
<vxe-table-column field="role" title="Role" :edit-render="{name: 'input'}"></vxe-table-column>
<vxe-table-column field="sex" title="Sex" :edit-render="{name: 'input'}"></vxe-table-column>
<vxe-table-column field="age" title="Age" :edit-render="{name: '$input', props: {type: 'integer'}}"></vxe-table-column>
<vxe-table-column field="date" title="Date" :edit-render="{name: '$input', props: {type: 'date'}}"></vxe-table-column>
<vxe-table-column title="分组1">
<vxe-table-column field="name" title="Name" :edit-render="{name: 'input'}"></vxe-table-column>
<vxe-table-column field="role" title="Role" :edit-render="{name: 'input'}"></vxe-table-column>
</vxe-table-column>
<vxe-table-column title="分组2">
<vxe-table-column title="分组21">
<vxe-table-column field="sex" title="Sex" :edit-render="{name: 'input'}"></vxe-table-column>
<vxe-table-column field="age" title="Age" :edit-render="{name: '$input', props: {type: 'integer'}}"></vxe-table-column>
<vxe-table-column field="date" title="Date" :edit-render="{name: '$input', props: {type: 'date'}}"></vxe-table-column>
</vxe-table-column>
</vxe-table-column>
</vxe-table>
`,
`

32
examples/views/table/edit/Click.vue
View File

@@ -34,12 +34,16 @@
:data="tableData"
:edit-config="{trigger: 'click', mode: 'row'}">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name" :edit-render="{name: 'input', attrs: {type: 'text'}}"></vxe-table-column>
<vxe-table-column field="role" title="Role" :edit-render="{name: 'input', attrs: {type: 'text'}}"></vxe-table-column>
<vxe-table-column field="sex2" title="Sex" :edit-render="{name: '$select', options: sexList, optionProps: {value: 'value', label: 'spell'}}"></vxe-table-column>
<vxe-table-column field="num6" title="Number" :edit-render="{name: '$input', props: {type: 'number'}}"></vxe-table-column>
<vxe-table-column field="date12" title="Date" :edit-render="{name: '$input', props: {type: 'date'}}"></vxe-table-column>
<vxe-table-column field="date13" title="Week" :edit-render="{name: '$input', props: {type: 'week'}}"></vxe-table-column>
<vxe-table-column title="分组1">
<vxe-table-column field="name" title="Name" :edit-render="{name: 'input', attrs: {type: 'text'}}"></vxe-table-column>
<vxe-table-column field="role" title="Role" :edit-render="{name: 'input', attrs: {type: 'text'}}"></vxe-table-column>
<vxe-table-column field="sex2" title="Sex" :edit-render="{name: '$select', options: sexList, optionProps: {value: 'value', label: 'spell'}}"></vxe-table-column>
</vxe-table-column>
<vxe-table-column title="分组2">
<vxe-table-column field="num6" title="Number" :edit-render="{name: '$input', props: {type: 'number'}}"></vxe-table-column>
<vxe-table-column field="date12" title="Date" :edit-render="{name: '$input', props: {type: 'date'}}"></vxe-table-column>
<vxe-table-column field="date13" title="Week" :edit-render="{name: '$input', props: {type: 'week'}}"></vxe-table-column>
</vxe-table-column>
<vxe-table-column field="address" title="Address" :edit-render="{name: 'textarea'}"></vxe-table-column>
</vxe-table>
@@ -114,12 +118,16 @@ export default {
:data="tableData"
:edit-config="{trigger: 'click', mode: 'row'}">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name" :edit-render="{name: 'input', attrs: {type: 'text'}}"></vxe-table-column>
<vxe-table-column field="role" title="Role" :edit-render="{name: 'input', attrs: {type: 'text'}}"></vxe-table-column>
<vxe-table-column field="sex2" title="Sex" :edit-render="{name: '$select', options: sexList, optionProps: {value: 'value', label: 'spell'}}"></vxe-table-column>
<vxe-table-column field="num6" title="Number" :edit-render="{name: '$input', props: {type: 'number'}}"></vxe-table-column>
<vxe-table-column field="date12" title="Date" :edit-render="{name: '$input', props: {type: 'date'}}"></vxe-table-column>
<vxe-table-column field="date13" title="Week" :edit-render="{name: '$input', props: {type: 'week'}}"></vxe-table-column>
<vxe-table-column title="分组1">
<vxe-table-column field="name" title="Name" :edit-render="{name: 'input', attrs: {type: 'text'}}"></vxe-table-column>
<vxe-table-column field="role" title="Role" :edit-render="{name: 'input', attrs: {type: 'text'}}"></vxe-table-column>
<vxe-table-column field="sex2" title="Sex" :edit-render="{name: '$select', options: sexList, optionProps: {value: 'value', label: 'spell'}}"></vxe-table-column>
</vxe-table-column>
<vxe-table-column title="分组2">
<vxe-table-column field="num6" title="Number" :edit-render="{name: '$input', props: {type: 'number'}}"></vxe-table-column>
<vxe-table-column field="date12" title="Date" :edit-render="{name: '$input', props: {type: 'date'}}"></vxe-table-column>
<vxe-table-column field="date13" title="Week" :edit-render="{name: '$input', props: {type: 'week'}}"></vxe-table-column>
</vxe-table-column>
<vxe-table-column field="address" title="Address" :edit-render="{name: 'textarea'}"></vxe-table-column>
</vxe-table>
`,

20
examples/views/table/edit/FooterImmediately.vue
View File

@@ -28,10 +28,12 @@
:data="tableData"
:edit-config="{trigger: 'click', mode: 'row'}">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name" :edit-render="{name: 'input'}"></vxe-table-column>
<vxe-table-column field="age1" title="Age" :edit-render="{name: '$input', props: {type: 'number', min: 1, max: 120}, events: {input: updateFooterEvent}}"></vxe-table-column>
<vxe-table-column field="num6" title="Num" :edit-render="{name: 'input', immediate: true, events: {input: updateFooterEvent}}"></vxe-table-column>
<vxe-table-column field="rate1" title="Rate" :edit-render="{name: 'input', immediate: true, events: {input: updateFooterEvent}}"></vxe-table-column>
<vxe-table-column title="统计信息">
<vxe-table-column field="name" title="Name" :edit-render="{name: 'input'}"></vxe-table-column>
<vxe-table-column field="age1" title="Age" :edit-render="{name: '$input', props: {type: 'number', min: 1, max: 120}, events: {input: updateFooterEvent}}"></vxe-table-column>
<vxe-table-column field="num6" title="Num" :edit-render="{name: 'input', immediate: true, events: {input: updateFooterEvent}}"></vxe-table-column>
<vxe-table-column field="rate1" title="Rate" :edit-render="{name: 'input', immediate: true, events: {input: updateFooterEvent}}"></vxe-table-column>
</vxe-table-column>
</vxe-table>
<p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
@@ -75,10 +77,12 @@ export default {
:data="tableData"
:edit-config="{trigger: 'click', mode: 'row'}">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name" :edit-render="{name: 'input'}"></vxe-table-column>
<vxe-table-column field="age1" title="Age" :edit-render="{name: '$input', props: {type: 'number', min: 1, max: 120}, events: {input: updateFooterEvent}}"></vxe-table-column>
<vxe-table-column field="num6" title="Num" :edit-render="{name: 'input', immediate: true, events: {input: updateFooterEvent}}"></vxe-table-column>
<vxe-table-column field="rate1" title="Rate" :edit-render="{name: 'input', immediate: true, events: {input: updateFooterEvent}}"></vxe-table-column>
<vxe-table-column title="统计信息">
<vxe-table-column field="name" title="Name" :edit-render="{name: 'input'}"></vxe-table-column>
<vxe-table-column field="age1" title="Age" :edit-render="{name: '$input', props: {type: 'number', min: 1, max: 120}, events: {input: updateFooterEvent}}"></vxe-table-column>
<vxe-table-column field="num6" title="Num" :edit-render="{name: 'input', immediate: true, events: {input: updateFooterEvent}}"></vxe-table-column>
<vxe-table-column field="rate1" title="Rate" :edit-render="{name: 'input', immediate: true, events: {input: updateFooterEvent}}"></vxe-table-column>
</vxe-table-column>
</vxe-table>
`,
`

50
examples/views/table/edit/Select.vue
View File

@@ -9,9 +9,13 @@
:data="tableData"
:edit-config="{trigger: 'click', mode: 'cell'}">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name" :edit-render="{name: 'input', autoselect: true}"></vxe-table-column>
<vxe-table-column field="sex5" title="Sex" :edit-render="{name: '$select', optionGroups: sexGriupList}"></vxe-table-column>
<vxe-table-column field="date13" title="Date" :edit-render="{name: '$input', props: {type: 'date'}, autoselect: true}"></vxe-table-column>
<vxe-table-column title="分组1">
<vxe-table-column field="name" title="Name" :edit-render="{name: 'input', autoselect: true}"></vxe-table-column>
<vxe-table-column field="sex5" title="Sex" :edit-render="{name: '$select', optionGroups: sexGriupList}"></vxe-table-column>
</vxe-table-column>
<vxe-table-column title="分组1">
<vxe-table-column field="date13" title="Date" :edit-render="{name: '$input', props: {type: 'date'}, autoselect: true}"></vxe-table-column>
</vxe-table-column>
</vxe-table>
<p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
@@ -34,28 +38,19 @@ export default {
{
label: '第一分组',
options: [
{
value: '1',
label: '男'
}
{ value: '0', label: '女' }
]
},
{
label: '第二分组',
options: [
{
value: '0',
label: '女'
}
{ value: '1', label: '男' }
]
},
{
label: '其他',
options: [
{
value: '',
label: '无'
}
{ value: '2', label: '无' }
]
}
],
@@ -68,9 +63,13 @@ export default {
:data="tableData"
:edit-config="{trigger: 'click', mode: 'cell'}">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name" :edit-render="{name: 'input', autoselect: true}"></vxe-table-column>
<vxe-table-column field="sex5" title="Sex" :edit-render="{name: '$select', optionGroups: sexGriupList}"></vxe-table-column>
<vxe-table-column field="date13" title="Date" :edit-render="{name: '$input', props: {type: 'date'}, autoselect: true}"></vxe-table-column>
<vxe-table-column title="分组1">
<vxe-table-column field="name" title="Name" :edit-render="{name: 'input', autoselect: true}"></vxe-table-column>
<vxe-table-column field="sex5" title="Sex" :edit-render="{name: '$select', optionGroups: sexGriupList}"></vxe-table-column>
</vxe-table-column>
<vxe-table-column title="分组1">
<vxe-table-column field="date13" title="Date" :edit-render="{name: '$input', props: {type: 'date'}, autoselect: true}"></vxe-table-column>
</vxe-table-column>
</vxe-table>
`,
`
@@ -82,28 +81,19 @@ export default {
{
label: '第一分组',
options: [
{
value: '1',
label: '男'
}
{ value: '0', label: '女' }
]
},
{
label: '第二分组',
options: [
{
value: '0',
label: '女'
}
{ value: '1', label: '男' }
]
},
{
label: '其他',
options: [
{
value: '',
label: '无'
}
{ value: '2', label: '无' }
]
}
]

44
examples/views/table/edit/Template.vue
View File

@@ -31,16 +31,18 @@
<input type="text" v-model="row.name" class="custom-input">
</template>
</vxe-table-column>
<vxe-table-column field="age" title="Age" :edit-render="{autofocus: '.vxe-input--inner'}">
<template v-slot:edit="{ row }">
<vxe-input type="number" v-model="row.age"></vxe-input>
</template>
</vxe-table-column>
<vxe-table-column field="num" title="Money" :edit-render="{autofocus: '.vxe-input--inner'}">
<template v-slot:edit="{ row }">
<vxe-input type="number" v-model="row.num"></vxe-input>
</template>
<template v-slot="{ row }">￥{{ row.num }}</template>
<vxe-table-column title="分组">
<vxe-table-column field="age" title="Age" :edit-render="{autofocus: '.vxe-input--inner'}">
<template v-slot:edit="{ row }">
<vxe-input type="number" v-model="row.age"></vxe-input>
</template>
</vxe-table-column>
<vxe-table-column field="num" title="Money" :edit-render="{autofocus: '.vxe-input--inner'}">
<template v-slot:edit="{ row }">
<vxe-input type="number" v-model="row.num"></vxe-input>
</template>
<template v-slot="{ row }">￥{{ row.num }}</template>
</vxe-table-column>
</vxe-table-column>
<vxe-table-column field="attr1" title="不同行渲染" :edit-render="{type: 'default'}">
<template v-slot:edit="{ row, rowIndex }">
@@ -141,16 +143,18 @@ export default {
<input type="text" v-model="row.name" class="custom-input">
</template>
</vxe-table-column>
<vxe-table-column field="age" title="Age" :edit-render="{autofocus: '.vxe-input--inner'}">
<template v-slot:edit="{ row }">
<vxe-input type="number" v-model="row.age"></vxe-input>
</template>
</vxe-table-column>
<vxe-table-column field="num" title="Money" :edit-render="{autofocus: '.vxe-input--inner'}">
<template v-slot:edit="{ row }">
<vxe-input type="number" v-model="row.num"></vxe-input>
</template>
<template v-slot="{ row }">￥{{ row.num }}</template>
<vxe-table-column title="分组">
<vxe-table-column field="age" title="Age" :edit-render="{autofocus: '.vxe-input--inner'}">
<template v-slot:edit="{ row }">
<vxe-input type="number" v-model="row.age"></vxe-input>
</template>
</vxe-table-column>
<vxe-table-column field="num" title="Money" :edit-render="{autofocus: '.vxe-input--inner'}">
<template v-slot:edit="{ row }">
<vxe-input type="number" v-model="row.num"></vxe-input>
</template>
<template v-slot="{ row }">￥{{ row.num }}</template>
</vxe-table-column>
</vxe-table-column>
<vxe-table-column field="attr1" title="不同行渲染" :edit-render="{type: 'default'}">
<template v-slot:edit="{ row, rowIndex }">

2
examples/views/table/start/Global.vue
View File

@@ -167,7 +167,7 @@
// lockView: true,
// mask: true,
// duration: 3000,
// marginSize: 8,
// marginSize: 5,
// dblclickZoom: true,
// showTitleOverflow: true
// storage: false