mirror of
https://gitee.com/xuliangzhan_admin/vxe-table.git
synced 2026-01-21 05:27:57 +08:00
更新文档
This commit is contained in:
xuliangzhan
@@ -13,4 +13,4 @@
|
||||
var s = document.getElementsByTagName("script")[0];
|
||||
s.parentNode.insertBefore(hm, s);
|
||||
}
|
||||
})();</script><link href=/vxe-table/static/css/advanced.bde6cece.css rel=prefetch><link href=/vxe-table/static/css/api.4e9ea0a5.css rel=prefetch><link href=/vxe-table/static/css/base.66df2255.css rel=prefetch><link href=/vxe-table/static/css/edit.f5b81221.css rel=prefetch><link href=/vxe-table/static/css/grid.27285c14.css rel=prefetch><link href=/vxe-table/static/css/module.46552a81.css rel=prefetch><link href=/vxe-table/static/css/other.e33c5cda.css rel=prefetch><link href=/vxe-table/static/css/scroll.38d9b5ec.css rel=prefetch><link href=/vxe-table/static/css/start.068236aa.css rel=prefetch><link href=/vxe-table/static/css/tree.0f96c29a.css rel=prefetch><link href=/vxe-table/static/css/virtual-tree.b140af59.css rel=prefetch><link href=/vxe-table/static/js/advanced.52516eab.js rel=prefetch><link href=/vxe-table/static/js/advanced~base~edit~excel~grid~module~other~plugin~scroll~start~tree~virtual-tree.10a1c01b.js rel=prefetch><link href=/vxe-table/static/js/api.3a491f02.js rel=prefetch><link href=/vxe-table/static/js/base.c02be151.js rel=prefetch><link href=/vxe-table/static/js/edit.1e59ea91.js rel=prefetch><link href=/vxe-table/static/js/excel.40cb7fef.js rel=prefetch><link href=/vxe-table/static/js/grid.edf6625e.js rel=prefetch><link href=/vxe-table/static/js/module.3e192803.js rel=prefetch><link href=/vxe-table/static/js/other.bcb8a432.js rel=prefetch><link href=/vxe-table/static/js/plugin.312ba633.js rel=prefetch><link href=/vxe-table/static/js/scroll.dfd3b914.js rel=prefetch><link href=/vxe-table/static/js/start.2869cc66.js rel=prefetch><link href=/vxe-table/static/js/tree.dba54afd.js rel=prefetch><link href=/vxe-table/static/js/virtual-tree.8fc755f4.js rel=prefetch><link href=/vxe-table/static/css/chunk-vendors.f408a629.css rel=preload as=style><link href=/vxe-table/static/css/index.970367f7.css rel=preload as=style><link href=/vxe-table/static/js/chunk-vendors.be4aa239.js rel=preload as=script><link href=/vxe-table/static/js/index.3bc2b4e6.js rel=preload as=script><link href=/vxe-table/static/css/chunk-vendors.f408a629.css rel=stylesheet><link href=/vxe-table/static/css/index.970367f7.css rel=stylesheet></head><body><noscript><strong>We're sorry but vxe-table doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vxe-table/static/js/chunk-vendors.be4aa239.js></script><script src=/vxe-table/static/js/index.3bc2b4e6.js></script></body></html>
|
||||
})();</script><link href=/vxe-table/static/css/advanced.e62b362f.css rel=prefetch><link href=/vxe-table/static/css/api.4e9ea0a5.css rel=prefetch><link href=/vxe-table/static/css/base.66df2255.css rel=prefetch><link href=/vxe-table/static/css/edit.f5b81221.css rel=prefetch><link href=/vxe-table/static/css/grid.27285c14.css rel=prefetch><link href=/vxe-table/static/css/module.46552a81.css rel=prefetch><link href=/vxe-table/static/css/other.e33c5cda.css rel=prefetch><link href=/vxe-table/static/css/scroll.38d9b5ec.css rel=prefetch><link href=/vxe-table/static/css/start.068236aa.css rel=prefetch><link href=/vxe-table/static/css/tree.0f96c29a.css rel=prefetch><link href=/vxe-table/static/css/virtual-tree.b140af59.css rel=prefetch><link href=/vxe-table/static/js/advanced.ee335b39.js rel=prefetch><link href=/vxe-table/static/js/advanced~base~edit~excel~grid~module~other~plugin~scroll~start~tree~virtual-tree.10a1c01b.js rel=prefetch><link href=/vxe-table/static/js/api.fd556478.js rel=prefetch><link href=/vxe-table/static/js/base.c02be151.js rel=prefetch><link href=/vxe-table/static/js/edit.1e59ea91.js rel=prefetch><link href=/vxe-table/static/js/excel.40cb7fef.js rel=prefetch><link href=/vxe-table/static/js/grid.edf6625e.js rel=prefetch><link href=/vxe-table/static/js/module.3e192803.js rel=prefetch><link href=/vxe-table/static/js/other.bcb8a432.js rel=prefetch><link href=/vxe-table/static/js/plugin.312ba633.js rel=prefetch><link href=/vxe-table/static/js/scroll.dfd3b914.js rel=prefetch><link href=/vxe-table/static/js/start.2869cc66.js rel=prefetch><link href=/vxe-table/static/js/tree.dba54afd.js rel=prefetch><link href=/vxe-table/static/js/virtual-tree.8fc755f4.js rel=prefetch><link href=/vxe-table/static/css/chunk-vendors.f408a629.css rel=preload as=style><link href=/vxe-table/static/css/index.970367f7.css rel=preload as=style><link href=/vxe-table/static/js/chunk-vendors.be4aa239.js rel=preload as=script><link href=/vxe-table/static/js/index.2bda156d.js rel=preload as=script><link href=/vxe-table/static/css/chunk-vendors.f408a629.css rel=stylesheet><link href=/vxe-table/static/css/index.970367f7.css rel=stylesheet></head><body><noscript><strong>We're sorry but vxe-table doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vxe-table/static/js/chunk-vendors.be4aa239.js></script><script src=/vxe-table/static/js/index.2bda156d.js></script></body></html>
|
||||
@@ -1 +1 @@
|
||||
.first-col[data-v-5322f2bc]{position:relative;height:20px}.first-col[data-v-5322f2bc]:before{content:"";position:absolute;left:-15px;top:10px;width:170px;height:1px;-webkit-transform:rotate(20deg);transform:rotate(20deg);background-color:#e8eaec}.first-col .first-col-top[data-v-5322f2bc]{position:absolute;right:4px;top:-10px}.first-col .first-col-bottom[data-v-5322f2bc]{position:absolute;left:4px;bottom:-10px}.my-sort .custom-sort{padding:0 4px}.my-sort .custom-sort.is-order{color:#409eff}.my-select[data-v-64ccba26]{width:100px;height:32px}.my-input[data-v-64ccba26]{width:140px;height:32px}.mytable-footer .vxe-footer--column.col-blue{background-color:#2db7f5;color:#fff}.mytable-footer .vxe-footer--column.col-red{background-color:red;color:#fff}.btns .link[data-v-63089e8a]{margin-right:20px;color:#333}.btns .link.router-link-exact-active[data-v-63089e8a]{color:#409eff}
|
||||
.first-col[data-v-2ceb099e]{position:relative;height:20px}.first-col[data-v-2ceb099e]:before{content:"";position:absolute;left:-15px;top:10px;width:170px;height:1px;-webkit-transform:rotate(20deg);transform:rotate(20deg);background-color:#e8eaec}.first-col .first-col-top[data-v-2ceb099e]{position:absolute;right:4px;top:-10px}.first-col .first-col-bottom[data-v-2ceb099e]{position:absolute;left:4px;bottom:-10px}.my-sort .custom-sort{padding:0 4px}.my-sort .custom-sort.is-order{color:#409eff}.my-select[data-v-64ccba26]{width:100px;height:32px}.my-input[data-v-64ccba26]{width:140px;height:32px}.mytable-footer .vxe-footer--column.col-blue{background-color:#2db7f5;color:#fff}.mytable-footer .vxe-footer--column.col-red{background-color:red;color:#fff}.btns .link[data-v-63089e8a]{margin-right:20px;color:#333}.btns .link.router-link-exact-active[data-v-63089e8a]{color:#409eff}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -13,4 +13,4 @@
|
||||
var s = document.getElementsByTagName("script")[0];
|
||||
s.parentNode.insertBefore(hm, s);
|
||||
}
|
||||
})();</script><link href=/vxe-table/v1/static/css/advanced.bde6cece.css rel=prefetch><link href=/vxe-table/v1/static/css/api.4e9ea0a5.css rel=prefetch><link href=/vxe-table/v1/static/css/base.66df2255.css rel=prefetch><link href=/vxe-table/v1/static/css/edit.15a98ac6.css rel=prefetch><link href=/vxe-table/v1/static/css/grid.27285c14.css rel=prefetch><link href=/vxe-table/v1/static/css/module.46552a81.css rel=prefetch><link href=/vxe-table/v1/static/css/other.e33c5cda.css rel=prefetch><link href=/vxe-table/v1/static/css/scroll.38d9b5ec.css rel=prefetch><link href=/vxe-table/v1/static/css/start.068236aa.css rel=prefetch><link href=/vxe-table/v1/static/css/tree.0f96c29a.css rel=prefetch><link href=/vxe-table/v1/static/css/virtual-tree.b140af59.css rel=prefetch><link href=/vxe-table/v1/static/js/advanced.385d3900.js rel=prefetch><link href=/vxe-table/v1/static/js/advanced~base~edit~excel~grid~module~other~plugin~scroll~start~tree~virtual-tree.288b8b09.js rel=prefetch><link href=/vxe-table/v1/static/js/api.9645633e.js rel=prefetch><link href=/vxe-table/v1/static/js/base.77a28641.js rel=prefetch><link href=/vxe-table/v1/static/js/edit.3cc5ab91.js rel=prefetch><link href=/vxe-table/v1/static/js/excel.6613e697.js rel=prefetch><link href=/vxe-table/v1/static/js/grid.4fb53a0e.js rel=prefetch><link href=/vxe-table/v1/static/js/module.fad19089.js rel=prefetch><link href=/vxe-table/v1/static/js/other.7f45e547.js rel=prefetch><link href=/vxe-table/v1/static/js/plugin.c1a39b3e.js rel=prefetch><link href=/vxe-table/v1/static/js/scroll.f29bb016.js rel=prefetch><link href=/vxe-table/v1/static/js/start.af1129df.js rel=prefetch><link href=/vxe-table/v1/static/js/tree.04bb6954.js rel=prefetch><link href=/vxe-table/v1/static/js/virtual-tree.807fcb22.js rel=prefetch><link href=/vxe-table/v1/static/css/chunk-vendors.3981e619.css rel=preload as=style><link href=/vxe-table/v1/static/css/index.216103de.css rel=preload as=style><link href=/vxe-table/v1/static/js/chunk-vendors.4711d9d0.js rel=preload as=script><link href=/vxe-table/v1/static/js/index.a1cb1b06.js rel=preload as=script><link href=/vxe-table/v1/static/css/chunk-vendors.3981e619.css rel=stylesheet><link href=/vxe-table/v1/static/css/index.216103de.css rel=stylesheet></head><body><noscript><strong>We're sorry but vxe-table doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vxe-table/v1/static/js/chunk-vendors.4711d9d0.js></script><script src=/vxe-table/v1/static/js/index.a1cb1b06.js></script></body></html>
|
||||
})();</script><link href=/vxe-table/v1/static/css/advanced.e62b362f.css rel=prefetch><link href=/vxe-table/v1/static/css/api.4e9ea0a5.css rel=prefetch><link href=/vxe-table/v1/static/css/base.66df2255.css rel=prefetch><link href=/vxe-table/v1/static/css/edit.15a98ac6.css rel=prefetch><link href=/vxe-table/v1/static/css/grid.27285c14.css rel=prefetch><link href=/vxe-table/v1/static/css/module.46552a81.css rel=prefetch><link href=/vxe-table/v1/static/css/other.e33c5cda.css rel=prefetch><link href=/vxe-table/v1/static/css/scroll.38d9b5ec.css rel=prefetch><link href=/vxe-table/v1/static/css/start.068236aa.css rel=prefetch><link href=/vxe-table/v1/static/css/tree.0f96c29a.css rel=prefetch><link href=/vxe-table/v1/static/css/virtual-tree.b140af59.css rel=prefetch><link href=/vxe-table/v1/static/js/advanced.d137b536.js rel=prefetch><link href=/vxe-table/v1/static/js/advanced~base~edit~excel~grid~module~other~plugin~scroll~start~tree~virtual-tree.288b8b09.js rel=prefetch><link href=/vxe-table/v1/static/js/api.9645633e.js rel=prefetch><link href=/vxe-table/v1/static/js/base.77a28641.js rel=prefetch><link href=/vxe-table/v1/static/js/edit.3cc5ab91.js rel=prefetch><link href=/vxe-table/v1/static/js/excel.6613e697.js rel=prefetch><link href=/vxe-table/v1/static/js/grid.4fb53a0e.js rel=prefetch><link href=/vxe-table/v1/static/js/module.fad19089.js rel=prefetch><link href=/vxe-table/v1/static/js/other.7f45e547.js rel=prefetch><link href=/vxe-table/v1/static/js/plugin.c1a39b3e.js rel=prefetch><link href=/vxe-table/v1/static/js/scroll.f29bb016.js rel=prefetch><link href=/vxe-table/v1/static/js/start.af1129df.js rel=prefetch><link href=/vxe-table/v1/static/js/tree.04bb6954.js rel=prefetch><link href=/vxe-table/v1/static/js/virtual-tree.807fcb22.js rel=prefetch><link href=/vxe-table/v1/static/css/chunk-vendors.3981e619.css rel=preload as=style><link href=/vxe-table/v1/static/css/index.216103de.css rel=preload as=style><link href=/vxe-table/v1/static/js/chunk-vendors.4711d9d0.js rel=preload as=script><link href=/vxe-table/v1/static/js/index.129898fd.js rel=preload as=script><link href=/vxe-table/v1/static/css/chunk-vendors.3981e619.css rel=stylesheet><link href=/vxe-table/v1/static/css/index.216103de.css rel=stylesheet></head><body><noscript><strong>We're sorry but vxe-table doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vxe-table/v1/static/js/chunk-vendors.4711d9d0.js></script><script src=/vxe-table/v1/static/js/index.129898fd.js></script></body></html>
|
||||
@@ -1 +1 @@
|
||||
.first-col[data-v-5322f2bc]{position:relative;height:20px}.first-col[data-v-5322f2bc]:before{content:"";position:absolute;left:-15px;top:10px;width:170px;height:1px;-webkit-transform:rotate(20deg);transform:rotate(20deg);background-color:#e8eaec}.first-col .first-col-top[data-v-5322f2bc]{position:absolute;right:4px;top:-10px}.first-col .first-col-bottom[data-v-5322f2bc]{position:absolute;left:4px;bottom:-10px}.my-sort .custom-sort{padding:0 4px}.my-sort .custom-sort.is-order{color:#409eff}.my-select[data-v-64ccba26]{width:100px;height:32px}.my-input[data-v-64ccba26]{width:140px;height:32px}.mytable-footer .vxe-footer--column.col-blue{background-color:#2db7f5;color:#fff}.mytable-footer .vxe-footer--column.col-red{background-color:red;color:#fff}.btns .link[data-v-63089e8a]{margin-right:20px;color:#333}.btns .link.router-link-exact-active[data-v-63089e8a]{color:#409eff}
|
||||
.first-col[data-v-2ceb099e]{position:relative;height:20px}.first-col[data-v-2ceb099e]:before{content:"";position:absolute;left:-15px;top:10px;width:170px;height:1px;-webkit-transform:rotate(20deg);transform:rotate(20deg);background-color:#e8eaec}.first-col .first-col-top[data-v-2ceb099e]{position:absolute;right:4px;top:-10px}.first-col .first-col-bottom[data-v-2ceb099e]{position:absolute;left:4px;bottom:-10px}.my-sort .custom-sort{padding:0 4px}.my-sort .custom-sort.is-order{color:#409eff}.my-select[data-v-64ccba26]{width:100px;height:32px}.my-input[data-v-64ccba26]{width:140px;height:32px}.mytable-footer .vxe-footer--column.col-blue{background-color:#2db7f5;color:#fff}.mytable-footer .vxe-footer--column.col-red{background-color:red;color:#fff}.btns .link[data-v-63089e8a]{margin-right:20px;color:#333}.btns .link.router-link-exact-active[data-v-63089e8a]{color:#409eff}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -3,6 +3,7 @@
|
||||
<p class="tip">使用 <table-column-api-link prop="slot"/> 自定义模板；可以实现自定义任意内容及 html 元素<br>
|
||||
<table-column-api-link prop="default"/>：自定义内容模板（提前格式化（最优） > <table-column-api-link prop="formatter"/>（值发生变化时） > <table-column-api-link prop="slots"/>（即时））<br>
|
||||
<table-column-api-link prop="header"/>：自定义表头模板<br>
|
||||
<table-column-api-link prop="footer"/>：自定义表尾模板<br>
|
||||
<table-column-api-link prop="filter"/>：自定义筛选模板（建议使用<router-link :to="{name: 'RendererAPI'}">渲染器</router-link>，可以更好的复用）<br>
|
||||
<table-column-api-link prop="edit"/>：自定义可编辑模板（建议使用<router-link :to="{name: 'RendererAPI'}">渲染器</router-link>，可以更好的复用）
|
||||
</p>
|
||||
@@ -26,6 +27,9 @@
|
||||
<vxe-table
|
||||
border
|
||||
resizable
|
||||
show-footer
|
||||
height="500"
|
||||
:footer-method="footerMethod"
|
||||
:data="tableData">
|
||||
<vxe-table-column type="seq" width="160" :resizable="false" show-overflow>
|
||||
<template v-slot:header>
|
||||
@@ -49,6 +53,9 @@
|
||||
<span style="color: red;" @click="showSexTip = !showSexTip">这样玩也行</span>
|
||||
</vxe-tooltip>
|
||||
</template>
|
||||
<template v-slot:footer="{ cells, cellIndex }">
|
||||
<span style="color: red">累计：{{ cells[cellIndex] }}</span>
|
||||
</template>
|
||||
<template v-slot:filter="{ column, context }">
|
||||
<template v-for="(option, index) in column.filters">
|
||||
<input type="type" v-model="option.data" :key="index" @input="changeFilterEvent($event, option, context)">
|
||||
@@ -76,10 +83,15 @@
|
||||
<a href="https://github.com/xuliangzhan/vxe-table">{{ row.name }}</a>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column field="html1" title="Html片段" width="160" show-overflow>
|
||||
<vxe-table-column field="html1" title="Html片段" width="200" show-overflow>
|
||||
<template v-slot="{ row }">
|
||||
<span v-html="row.html1"></span>
|
||||
</template>
|
||||
<template v-slot:footer>
|
||||
<span>
|
||||
<img src="static/other/img1.gif" style="width: 36px;">就是这么强大<img src="static/other/img2.gif" style="width: 30px;">
|
||||
</span>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column field="img1" title="图片路径" width="120">
|
||||
<template v-slot="{ row }">
|
||||
@@ -135,6 +147,9 @@ export default {
|
||||
<vxe-table
|
||||
border
|
||||
resizable
|
||||
show-footer
|
||||
height="500"
|
||||
:footer-method="footerMethod"
|
||||
:data="tableData">
|
||||
<vxe-table-column type="seq" width="160" :resizable="false" show-overflow>
|
||||
<template v-slot:header>
|
||||
@@ -158,6 +173,9 @@ export default {
|
||||
<span style="color: red;" @click="showSexTip = !showSexTip">这样玩也行</span>
|
||||
</vxe-tooltip>
|
||||
</template>
|
||||
<template v-slot:footer="{ cells, cellIndex }">
|
||||
<span style="color: red">累计：{{ cells[cellIndex] }}</span>
|
||||
</template>
|
||||
<template v-slot:filter="{ column, context }">
|
||||
<template v-for="(option, index) in column.filters">
|
||||
<input type="type" v-model="option.data" :key="index" @input="changeFilterEvent($event, option, context)">
|
||||
@@ -185,10 +203,15 @@ export default {
|
||||
<a href="https://github.com/xuliangzhan/vxe-table">{{ row.name }}</a>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column field="html1" title="Html片段" width="160" show-overflow>
|
||||
<vxe-table-column field="html1" title="Html片段" width="200" show-overflow>
|
||||
<template v-slot="{ row }">
|
||||
<span v-html="row.html1"></span>
|
||||
</template>
|
||||
<template v-slot:footer>
|
||||
<span>
|
||||
<img src="static/other/img1.gif" style="width: 36px;">就是这么强大<img src="static/other/img2.gif" style="width: 30px;">
|
||||
</span>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column field="img1" title="图片路径" width="120">
|
||||
<template v-slot="{ row }">
|
||||
@@ -213,7 +236,7 @@ export default {
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.tableData = window.MOCK_DATA_LIST.slice(0, 6)
|
||||
this.tableData = window.MOCK_DATA_LIST.slice(0, 10)
|
||||
},
|
||||
methods: {
|
||||
formatDate (value) {
|
||||
@@ -228,6 +251,16 @@ export default {
|
||||
showDetailEvent (row) {
|
||||
this.selectRow = row
|
||||
this.showDetails = true
|
||||
},
|
||||
footerMethod ({ columns, data }) {
|
||||
return [
|
||||
columns.map((column, columnIndex) => {
|
||||
if (['sex', 'num'].includes(column.property)) {
|
||||
return XEUtils.sum(data, column.property)
|
||||
}
|
||||
return null
|
||||
})
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -262,8 +295,7 @@ export default {
|
||||
}
|
||||
},
|
||||
created () {
|
||||
let list = window.MOCK_DATA_LIST.slice(0, 6)
|
||||
this.tableData = list
|
||||
this.tableData = window.MOCK_DATA_LIST.slice(0, 10)
|
||||
},
|
||||
mounted () {
|
||||
Array.from(this.$el.querySelectorAll('pre code')).forEach((block) => {
|
||||
@@ -283,6 +315,16 @@ export default {
|
||||
showDetailEvent (row) {
|
||||
this.selectRow = row
|
||||
this.showDetails = true
|
||||
},
|
||||
footerMethod ({ columns, data }) {
|
||||
return [
|
||||
columns.map((column, columnIndex) => {
|
||||
if (['sex', 'num'].includes(column.property)) {
|
||||
return XEUtils.sum(data, column.property)
|
||||
}
|
||||
return null
|
||||
})
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user