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
Files
c36e869d85d64016bf2d4eef7230ebc29cc66826
vxe-table/docs/static/js/scroll.77696467.js
xuliangzhan c36e869d85 update
2019-08-24 14:49:42 +08:00

1 line
46 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
(window["webpackJsonpVXETable"]=window["webpackJsonpVXETable"]||[]).push([["scroll"],{4467:function(e,t,l){"use strict";l.r(t);var n=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",{staticClass:"tip"},[e._v("\n 虚拟滚动渲染，加载 10 万行 1 万列，左右固定列"),l("br"),e._v("\n 大数据不建议使用双向绑定的 "),l("table-api-link",{attrs:{name:"data"}}),e._v(" 属性（vue 监听会大数据会短暂的卡顿），建议使用 "),l("table-api-link",{attrs:{prop:"loadData"}}),e._v("/"),l("table-api-link",{attrs:{prop:"loadColumn"}}),e._v(" 函数"),l("br"),e._v("\n 对于多选 type="),l("table-column-api-link",{attrs:{prop:"selection"}}),e._v(" 当数据量海量时应该绑定 "),l("table-api-link",{attrs:{prop:"checkField"}}),e._v(" 属性渲染速度更快"),l("br"),e._v("\n 注意：如果要启用横向虚拟滚动，所有的列宽度必须一致，否则无法兼容\n ")],1),l("vxe-grid",{ref:"xTable",attrs:{border:"","show-overflow":"","show-header-overflow":"","highlight-hover-row":"","highlight-current-row":"",height:"600",loading:e.loading,"select-config":{checkField:"checked"}}}),e._m(0),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v(" "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},a=[function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("pre",[e._v(" "),l("code",[e._v("\n | Arrow Up ↑ | 匀速向上滚动数据 |\n | Arrow Down ↓ | 匀速向下滚动数据 |\n | Arrow Left ← | 匀速向左滚动数据 |\n | Arrow Right → | 匀速向右滚动数据 |\n ")]),e._v("\n ")])}],i=(l("5df3"),l("1c4c"),l("ac6a"),l("1487")),o=l.n(i),r={data:function(){return{loading:!1,demoCodes:['\n <vxe-grid\n border\n show-overflow\n show-header-overflow\n highlight-hover-row\n highlight-current-row\n ref="xTable"\n height="600"\n :loading="loading"\n :select-config="{checkField: \'checked\'}">\n </vxe-grid>\n ',"\n export default {\n data () {\n return {\n loading: false\n }\n },\n created () {\n this.loading = true\n setTimeout(() => {\n let tableData = window.MOCK_DATA_LIST.slice(0, 100000)\n let tableColumn = window.MOCK_COLUMN_LIST.slice(0, 10000)\n // 使用函数式加载，阻断 vue 对大数组的双向绑定，大数据性能翻倍提升\n if (this.$refs.xTable) {\n this.$refs.xTable.loadColumn(tableColumn)\n this.$refs.xTable.loadData(tableData)\n }\n this.loading = false\n }, 300)\n }\n }\n "]}},created:function(){var e=this;this.loading=!0,setTimeout(function(){var t=window.MOCK_DATA_LIST.slice(0,1e5),l=window.MOCK_COLUMN_LIST.slice(0,1e4);e.$refs.xTable&&(e.$refs.xTable.loadColumn(l),e.$refs.xTable.loadData(t)),e.loading=!1},300)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){o.a.highlightBlock(e)})}},s=r,d=l("2877"),c=Object(d["a"])(s,n,a,!1,null,null,null);t["default"]=c.exports},"9b96":function(e,t,l){"use strict";l.r(t);var n=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",{staticClass:"tip"},[e._v("\n 虚拟滚动渲染，加载 1 万行 1 万列"),l("br"),e._v("\n 大数据不建议使用双向绑定的 "),l("table-api-link",{attrs:{name:"data"}}),e._v(" 属性（vue 监听会大数据会短暂的卡顿），建议使用 "),l("table-api-link",{attrs:{prop:"loadData"}}),e._v("/"),l("table-api-link",{attrs:{prop:"loadColumn"}}),e._v(" 函数"),l("br"),e._v("\n 注意：如果要启用横向虚拟滚动，所有的列宽度必须一致，否则无法兼容\n ")],1),l("vxe-grid",{ref:"xTable",attrs:{border:"","show-overflow":"","show-header-overflow":"",height:"300",loading:e.loading,"select-config":{checkField:"checked"}}}),e._m(0),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v(" "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},a=[function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("pre",[e._v(" "),l("code",[e._v("\n | Arrow Up ↑ | 匀速向上滚动数据 |\n | Arrow Down ↓ | 匀速向下滚动数据 |\n | Arrow Left ← | 匀速向左滚动数据 |\n | Arrow Right → | 匀速向右滚动数据 |\n ")]),e._v("\n ")])}],i=(l("5df3"),l("1c4c"),l("ac6a"),l("1487")),o=l.n(i),r={data:function(){return{loading:!1,demoCodes:['\n <vxe-grid\n border\n show-overflow\n show-header-overflow\n ref="xTable"\n height="300"\n :loading="loading"\n :select-config="{checkField: \'checked\'}">\n </vxe-grid>\n ',"\n export default {\n data () {\n return {\n loading: false\n }\n },\n created () {\n this.loading = true\n setTimeout(() => {\n let tableData = window.MOCK_DATA_LIST.slice(0, 10000)\n let tableColumn = window.MOCK_COLUMN_LIST.slice(0, 10000).map(item => Object.assign({}, item, { fixed: undefined }))\n // 使用函数式加载，阻断 vue 对大数组的双向绑定，大数据性能翻倍提升\n if (this.$refs.xTable) {\n this.$refs.xTable.loadColumn(tableColumn)\n this.$refs.xTable.loadData(tableData)\n }\n this.loading = false\n }, 500)\n }\n }\n "]}},created:function(){var e=this;this.loading=!0,setTimeout(function(){var t=window.MOCK_DATA_LIST.slice(0,1e4),l=window.MOCK_COLUMN_LIST.slice(0,1e4).map(function(e){return Object.assign({},e,{fixed:void 0})});e.$refs.xTable&&(e.$refs.xTable.loadColumn(l),e.$refs.xTable.loadData(t)),e.loading=!1},500)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){o.a.highlightBlock(e)})}},s=r,d=l("2877"),c=Object(d["a"])(s,n,a,!1,null,null,null);t["default"]=c.exports},a515:function(e,t,l){"use strict";l.r(t);var n=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",{staticClass:"tip"},[e._v("虚拟滚动渲染，键盘移动高亮行，设置 "),l("table-api-link",{attrs:{prop:"keyboard-config"}}),e._v("={isArrow: true} 启用方向键功能")],1),l("vxe-table",{ref:"xTable",attrs:{border:"",resizable:"","show-overflow":"","highlight-current-row":"",height:"300",loading:e.loading,"keyboard-config":{isArrow:!0}}},[l("vxe-table-column",{attrs:{type:"index",width:"100"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:"",width:"200"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age",width:"200"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex",width:"200"}}),l("vxe-table-column",{attrs:{field:"rate",title:"Rate",width:"200"}}),l("vxe-table-column",{attrs:{field:"region",title:"Region",width:"200"}}),l("vxe-table-column",{attrs:{field:"time",title:"Time",width:"200"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address",width:"300","show-overflow":""}}),l("vxe-table-column",{attrs:{field:"updateTime",title:"UpdateTime",width:"200"}}),l("vxe-table-column",{attrs:{field:"createTime",title:"CreateTime",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr1",title:"Attr1",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr2",title:"Attr2",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr3",title:"Attr3",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr4",title:"Attr4",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr5",title:"Attr5",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr6",title:"Attr6",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr7",title:"Attr7",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr8",title:"Attr8",width:"200"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr9",title:"Attr9",width:"200"}}),l("vxe-table-column",{attrs:{field:"createTime",title:"CreateTime",width:"200"}})],1),e._m(0),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v(" "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},a=[function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("pre",[e._v(" "),l("code",[e._v("\n | Arrow Up ↑ | 移动到高亮行的上一行 |\n | Arrow Down ↓ | 移动到高亮行的下一行 |\n ")]),e._v("\n ")])}],i=(l("5df3"),l("1c4c"),l("ac6a"),l("1487")),o=l.n(i),r={data:function(){return{loading:!1,demoCodes:['\n <vxe-table\n border\n resizable\n show-overflow\n highlight-current-row\n ref="xTable"\n height="300"\n :loading="loading"\n :keyboard-config="{isArrow: true}">\n <vxe-table-column type="index" width="100"></vxe-table-column>\n <vxe-table-column field="name" title="Name" sortable width="200"></vxe-table-column>\n <vxe-table-column field="age" title="Age" width="200"></vxe-table-column>\n <vxe-table-column field="sex" title="Sex" width="200"></vxe-table-column>\n <vxe-table-column field="rate" title="Rate" width="200"></vxe-table-column>\n <vxe-table-column field="region" title="Region" width="200"></vxe-table-column>\n <vxe-table-column field="time" title="Time" width="200"></vxe-table-column>\n <vxe-table-column field="address" title="Address" width="300" show-overflow></vxe-table-column>\n <vxe-table-column field="updateTime" title="UpdateTime" width="200"></vxe-table-column>\n <vxe-table-column field="createTime" title="CreateTime" width="200"></vxe-table-column>\n <vxe-table-column field="attr1" title="Attr1" width="200"></vxe-table-column>\n <vxe-table-column field="attr2" title="Attr2" width="200"></vxe-table-column>\n <vxe-table-column field="attr3" title="Attr3" width="200"></vxe-table-column>\n <vxe-table-column field="attr4" title="Attr4" width="200"></vxe-table-column>\n <vxe-table-column field="attr5" title="Attr5" width="200"></vxe-table-column>\n <vxe-table-column field="attr6" title="Attr6" width="200"></vxe-table-column>\n <vxe-table-column field="attr7" title="Attr7" width="200"></vxe-table-column>\n <vxe-table-column field="attr8" title="Attr8" width="200"></vxe-table-column>\n <vxe-table-column field="name" title="Name" width="200"></vxe-table-column>\n <vxe-table-column field="attr9" title="Attr9" width="200"></vxe-table-column>\n <vxe-table-column field="createTime" title="CreateTime" width="200"></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n loading: false\n }\n },\n created () {\n this.loading = true\n setTimeout(() => {\n let tableData = window.MOCK_DATA_LIST.slice(0, 5000)\n // 使用函数式加载，阻断 vue 对大数组的双向绑定，大数据性能翻倍提升\n if (this.$refs.xTable) {\n this.$refs.xTable.loadData(tableData)\n }\n this.loading = false\n }, 300)\n }\n }\n "]}},created:function(){var e=this;this.loading=!0,setTimeout(function(){var t=window.MOCK_DATA_LIST.slice(0,5e3);e.$refs.xTable&&e.$refs.xTable.loadData(t),e.loading=!1},300)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){o.a.highlightBlock(e)})}},s=r,d=l("2877"),c=Object(d["a"])(s,n,a,!1,null,null,null);t["default"]=c.exports},ac09:function(e,t,l){"use strict";l.r(t);var n=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",{staticClass:"tip"},[e._v("\n 虚拟滚动渲染，加载 10 万行，左右固定列"),l("br"),e._v("\n 大数据不建议使用双向绑定的 data 属性（vue 监听会大数据会短暂的卡顿），建议使用 "),l("table-api-link",{attrs:{prop:"loadData"}}),e._v("/"),l("table-api-link",{attrs:{prop:"reloadData"}}),e._v(" 函数"),l("br"),e._v("\n 对于多选 type="),l("table-column-api-link",{attrs:{prop:"selection"}}),e._v(" 当数据量海量时应该绑定 "),l("table-api-link",{attrs:{prop:"checkField"}}),e._v(" 属性渲染速度更快"),l("br")],1),l("vxe-table",{ref:"xTable",attrs:{border:"",resizable:"","show-overflow":"","show-header-overflow":"","highlight-hover-row":"","highlight-current-row":"",height:"600",loading:e.loading,"select-config":{checkField:"checked"}}},[l("vxe-table-column",{attrs:{type:"selection",width:"60",fixed:"left"}}),l("vxe-table-column",{attrs:{type:"index",width:"100",fixed:"left"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:"",width:"200"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex",width:"200"}}),l("vxe-table-column",{attrs:{field:"rate",title:"Rate",width:"200"}}),l("vxe-table-column",{attrs:{field:"region",title:"Region",width:"200"}}),l("vxe-table-column",{attrs:{field:"time",title:"Time",width:"200"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address",width:"300"}}),l("vxe-table-column",{attrs:{field:"updateTime",title:"UpdateTime",width:"200"}}),l("vxe-table-column",{attrs:{field:"createTime",title:"CreateTime",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr1",title:"Attr1",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr2",title:"Attr2",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr3",title:"Attr3",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr4",title:"Attr4",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr5",title:"Attr5",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr6",title:"Attr6",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr7",title:"Attr7",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr8",title:"Attr8",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr9",title:"Attr9",width:"200"}}),l("vxe-table-column",{attrs:{field:"createTime",title:"CreateTime",width:"200"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age",width:"200",fixed:"right"}})],1),e._m(0),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v(" "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},a=[function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("pre",[e._v(" "),l("code",[e._v("\n | Arrow Up ↑ | 匀速向上滚动数据 |\n | Arrow Down ↓ | 匀速向下滚动数据 |\n | Arrow Left ← | 匀速向左滚动数据 |\n | Arrow Right → | 匀速向右滚动数据 |\n ")]),e._v("\n ")])}],i=(l("5df3"),l("1c4c"),l("ac6a"),l("1487")),o=l.n(i),r={data:function(){return{loading:!1,demoCodes:['\n <vxe-table\n ref="xTable"\n border\n resizable\n show-overflow\n show-header-overflow\n highlight-hover-row\n highlight-current-row\n height="600"\n :loading="loading"\n :select-config="{checkField: \'checked\'}">\n <vxe-table-column type="selection" width="60" fixed="left"></vxe-table-column>\n <vxe-table-column type="index" width="100" fixed="left"></vxe-table-column>\n <vxe-table-column field="name" title="Name" sortable width="200"></vxe-table-column>\n <vxe-table-column field="sex" title="Sex" width="200"></vxe-table-column>\n <vxe-table-column field="rate" title="Rate" width="200"></vxe-table-column>\n <vxe-table-column field="region" title="Region" width="200"></vxe-table-column>\n <vxe-table-column field="time" title="Time" width="200"></vxe-table-column>\n <vxe-table-column field="address" title="Address" width="300"></vxe-table-column>\n <vxe-table-column field="updateTime" title="UpdateTime" width="200"></vxe-table-column>\n <vxe-table-column field="createTime" title="CreateTime" width="200"></vxe-table-column>\n <vxe-table-column field="attr1" title="Attr1" width="200"></vxe-table-column>\n <vxe-table-column field="attr2" title="Attr2" width="200"></vxe-table-column>\n <vxe-table-column field="attr3" title="Attr3" width="200"></vxe-table-column>\n <vxe-table-column field="attr4" title="Attr4" width="200"></vxe-table-column>\n <vxe-table-column field="attr5" title="Attr5" width="200"></vxe-table-column>\n <vxe-table-column field="attr6" title="Attr6" width="200"></vxe-table-column>\n <vxe-table-column field="attr7" title="Attr7" width="200"></vxe-table-column>\n <vxe-table-column field="attr8" title="Attr8" width="200"></vxe-table-column>\n <vxe-table-column field="attr9" title="Attr9" width="200"></vxe-table-column>\n <vxe-table-column field="createTime" title="CreateTime" width="200"></vxe-table-column>\n <vxe-table-column field="age" title="Age" width="200" fixed="right"></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n loading: false\n }\n },\n created () {\n this.loading = true\n setTimeout(() => {\n let tableData = window.MOCK_DATA_LIST.slice(0, 100000)\n // 使用函数式加载，阻断 vue 对大数组的双向绑定，大数据性能翻倍提升\n if (this.$refs.xTable) {\n this.$refs.xTable.reloadData(tableData)\n }\n this.loading = false\n }, 500)\n }\n }\n "]}},created:function(){var e=this;this.loading=!0,setTimeout(function(){var t=window.MOCK_DATA_LIST.slice(0,1e5);e.$refs.xTable&&e.$refs.xTable.reloadData(t),e.loading=!1},500)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){o.a.highlightBlock(e)})}},s=r,d=l("2877"),c=Object(d["a"])(s,n,a,!1,null,null,null);t["default"]=c.exports},accd:function(e,t,l){"use strict";l.r(t);var n=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",{staticClass:"tip"},[e._v("虚拟滚动渲染，可编辑表格，数据量非常大时，由于需要进行大量数据运算，所以数据校验或者获取数据...等函数执行会比较慢的")]),l("vxe-toolbar",{attrs:{refresh:{query:e.findList}},scopedSlots:e._u([{key:"buttons",fn:function(){return[l("vxe-button",{scopedSlots:e._u([{key:"dropdowns",fn:function(){return[l("vxe-button",{on:{click:function(t){return e.insertEvent(null)}}},[e._v("从第一行插入")]),l("vxe-button",{on:{click:function(t){return e.insertEvent(-1)}}},[e._v("从最后插入")]),l("vxe-button",{on:{click:function(t){e.insertEvent(e.$refs.xTable.getData(100))}}},[e._v("插入到 100 行")]),l("vxe-button",{on:{click:function(t){e.insertEvent(e.$refs.xTable.getData(2e3))}}},[e._v("插入到 2000 行")])]},proxy:!0}])},[[e._v("新增操作")]],2),l("vxe-button",{scopedSlots:e._u([{key:"dropdowns",fn:function(){return[l("vxe-button",{on:{click:function(t){return e.$refs.xTable.removeSelecteds()}}},[e._v("删除选中")]),l("vxe-button",{on:{click:function(t){e.$refs.xTable.remove(e.$refs.xTable.getData(0))}}},[e._v("删除第一行")]),l("vxe-button",{on:{click:function(t){e.$refs.xTable.remove(e.$refs.xTable.getData(e.$refs.xTable.getData().length-1))}}},[e._v("删除最后一行")]),l("vxe-button",{on:{click:function(t){e.$refs.xTable.remove(e.$refs.xTable.getData(100))}}},[e._v("删除第 100 行")])]},proxy:!0}])},[[e._v("删除操作")]],2),l("vxe-button",{scopedSlots:e._u([{key:"dropdowns",fn:function(){return[l("vxe-button",{on:{click:e.validEvent}},[e._v("基本校验")]),l("vxe-button",{on:{click:e.fullValidEvent}},[e._v("完整校验")]),l("vxe-button",{on:{click:e.selectValidEvent}},[e._v("选中校验")])]},proxy:!0}])},[[e._v("校验操作")]],2),l("vxe-button",{on:{click:e.getInsertEvent}},[e._v("获取新增")]),l("vxe-button",{on:{click:e.getRemoveEvent}},[e._v("获取删除")]),l("vxe-button",{on:{click:e.getUpdateEvent}},[e._v("获取修改")]),l("vxe-button",{scopedSlots:e._u([{key:"dropdowns",fn:function(){return[l("vxe-button",{on:{click:function(t){e.$refs.xTable.scrollToRow(e.$refs.xTable.getData(10))}}},[e._v("滚动到第 10 行")]),l("vxe-button",{on:{click:function(t){e.$refs.xTable.scrollToRow(e.$refs.xTable.getData(4e3))}}},[e._v("滚动第 4000 行")]),l("vxe-button",{on:{click:function(t){e.$refs.xTable.scrollToColumn(e.$refs.xTable.getColumns(1))}}},[e._v("滚动第 1 列")]),l("vxe-button",{on:{click:function(t){e.$refs.xTable.scrollToColumn(e.$refs.xTable.getColumns(10))}}},[e._v("滚动第 10 列")])]},proxy:!0}])},[[e._v("滚动操作")]],2)]},proxy:!0}])}),l("vxe-table",{ref:"xTable",attrs:{border:"",resizable:"","show-overflow":"",height:"300",loading:e.loading,"edit-rules":e.validRules,"edit-config":{trigger:"click",mode:"row",showStatus:!0},"select-config":{checkField:"checked"}}},[l("vxe-table-column",{attrs:{type:"selection",width:"60"}}),l("vxe-table-column",{attrs:{type:"index",width:"100"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:"",width:"200","edit-render":{name:"input"}}}),l("vxe-table-column",{attrs:{field:"age",title:"Age",width:"200","edit-render":{name:"input"}}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex",width:"200","edit-render":{name:"input"}}}),l("vxe-table-column",{attrs:{field:"rate",title:"Rate",width:"200"}}),l("vxe-table-column",{attrs:{field:"region",title:"Region",width:"200"}}),l("vxe-table-column",{attrs:{field:"time",title:"Time",width:"200"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address",width:"300","show-overflow":""}}),l("vxe-table-column",{attrs:{field:"updateTime",title:"UpdateTime",width:"200"}}),l("vxe-table-column",{attrs:{field:"createTime",title:"CreateTime",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr1",title:"Attr1",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr2",title:"Attr2",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr3",title:"Attr3",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr4",title:"Attr4",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr5",title:"Attr5",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr6",title:"Attr6",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr7",title:"Attr7",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr8",title:"Attr8",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr9",title:"Attr9",width:"200"}}),l("vxe-table-column",{attrs:{field:"createTime",title:"CreateTime",width:"200"}})],1),e._m(0),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v(" "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},a=[function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("pre",[e._v(" "),l("code",[e._v("\n | Arrow Up ↑ | 匀速向上滚动数据 |\n | Arrow Down ↓ | 匀速向下滚动数据 |\n | Arrow Left ← | 匀速向左滚动数据 |\n | Arrow Right → | 匀速向右滚动数据 |\n ")]),e._v("\n ")])}],i=(l("8615"),l("5df3"),l("1c4c"),l("ac6a"),l("1487")),o=l.n(i),r={data:function(){return{loading:!1,validRules:{name:[{required:!0,message:"名称必须填写"},{min:3,max:50,message:"名称长度在 3 到 50 个字符"}],sex:[{required:!0,message:"性别必须填写"}]},demoCodes:['\n <vxe-toolbar :refresh="{query: findList}">\n <template v-slot:buttons>\n <vxe-button>\n <template>新增操作</template>\n <template v-slot:dropdowns>\n <vxe-button @click="insertEvent(null)">从第一行插入</vxe-button>\n <vxe-button @click="insertEvent(-1)">从最后插入</vxe-button>\n <vxe-button @click="insertEvent($refs.xTable.getData(100))">插入到 100 行</vxe-button>\n <vxe-button @click="insertEvent($refs.xTable.getData(2000))">插入到 2000 行</vxe-button>\n </template>\n </vxe-button>\n <vxe-button>\n <template>删除操作</template>\n <template v-slot:dropdowns>\n <vxe-button @click="$refs.xTable.removeSelecteds()">删除选中</vxe-button>\n <vxe-button @click="$refs.xTable.remove($refs.xTable.getData(0))">删除第一行</vxe-button>\n <vxe-button @click="$refs.xTable.remove($refs.xTable.getData($refs.xTable.getData().length - 1))">删除最后一行</vxe-button>\n <vxe-button @click="$refs.xTable.remove($refs.xTable.getData(100))">删除第 100 行</vxe-button>\n </template>\n </vxe-button>\n <vxe-button>\n <template>校验操作</template>\n <template v-slot:dropdowns>\n <vxe-button @click="validEvent">基本校验</vxe-button>\n <vxe-button @click="fullValidEvent">完整校验</vxe-button>\n <vxe-button @click="selectValidEvent">选中校验</vxe-button>\n </template>\n </vxe-button>\n <vxe-button @click="getInsertEvent">获取新增</vxe-button>\n <vxe-button @click="getRemoveEvent">获取删除</vxe-button>\n <vxe-button @click="getUpdateEvent">获取修改</vxe-button>\n <vxe-button>\n <template>滚动操作</template>\n <template v-slot:dropdowns>\n <vxe-button @click="$refs.xTable.scrollToRow($refs.xTable.getData(10))">滚动到第 10 行</vxe-button>\n <vxe-button @click="$refs.xTable.scrollToRow($refs.xTable.getData(4000))">滚动第 4000 行</vxe-button>\n <vxe-button @click="$refs.xTable.scrollToColumn($refs.xTable.getColumns(1))">滚动第 1 列</vxe-button>\n <vxe-button @click="$refs.xTable.scrollToColumn($refs.xTable.getColumns(10))">滚动第 10 列</vxe-button>\n </template>\n </vxe-button>\n </template>\n </vxe-toolbar>\n\n <vxe-table\n border\n resizable\n show-overflow\n ref="xTable"\n height="300"\n :loading="loading"\n :edit-rules="validRules"\n :edit-config="{trigger: \'click\', mode: \'row\', showStatus: true}"\n :select-config="{checkField: \'checked\'}">\n <vxe-table-column type="selection" width="60"></vxe-table-column>\n <vxe-table-column type="index" width="100"></vxe-table-column>\n <vxe-table-column field="name" title="Name" sortable width="200" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="age" title="Age" width="200" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="sex" title="Sex" width="200" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="rate" title="Rate" width="200"></vxe-table-column>\n <vxe-table-column field="region" title="Region" width="200"></vxe-table-column>\n <vxe-table-column field="time" title="Time" width="200"></vxe-table-column>\n <vxe-table-column field="address" title="Address" width="300" show-overflow></vxe-table-column>\n <vxe-table-column field="updateTime" title="UpdateTime" width="200"></vxe-table-column>\n <vxe-table-column field="createTime" title="CreateTime" width="200"></vxe-table-column>\n <vxe-table-column field="attr1" title="Attr1" width="200"></vxe-table-column>\n <vxe-table-column field="attr2" title="Attr2" width="200"></vxe-table-column>\n <vxe-table-column field="attr3" title="Attr3" width="200"></vxe-table-column>\n <vxe-table-column field="attr4" title="Attr4" width="200"></vxe-table-column>\n <vxe-table-column field="attr5" title="Attr5" width="200"></vxe-table-column>\n <vxe-table-column field="attr6" title="Attr6" width="200"></vxe-table-column>\n <vxe-table-column field="attr7" title="Attr7" width="200"></vxe-table-column>\n <vxe-table-column field="attr8" title="Attr8" width="200"></vxe-table-column>\n <vxe-table-column field="attr9" title="Attr9" width="200"></vxe-table-column>\n <vxe-table-column field="createTime" title="CreateTime" width="200"></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n loading: false,\n validRules: {\n name: [\n { required: true, message: '名称必须填写' },\n { min: 3, max: 50, message: '名称长度在 3 到 50 个字符' }\n ],\n sex: [\n { required: true, message: '性别必须填写' }\n ]\n }\n }\n },\n created () {\n this.findList()\n },\n methods: {\n findList () {\n this.loading = true\n return new Promise(resolve => {\n setTimeout(() => {\n let tableData = window.MOCK_DATA_LIST.slice(0, 5000)\n // 阻断 vue 对大数组的双向绑定，避免 vue 绑定大数据造成短暂的卡顿\n if (this.$refs.xTable) {\n this.$refs.xTable.loadData(tableData)\n }\n resolve()\n this.loading = false\n }, 300)\n })\n },\n validEvent () {\n this.$refs.xTable.validate(valid => {\n if (valid) {\n this.$XMsg.message({ status: 'success', message: '校验成功！' })\n } else {\n this.$XMsg.message({ status: 'error', message: '校验不通过！' })\n }\n })\n },\n fullValidEvent () {\n this.$refs.xTable.fullValidate((valid, errMap) => {\n if (valid) {\n this.$XMsg.message({ status: 'success', message: '校验成功！' })\n } else {\n let msgList = []\n Object.values(errMap).forEach(errList => {\n errList.forEach(params => {\n let { rowIndex, column, rules } = params\n rules.forEach(rule => {\n msgList.push(`第 ${rowIndex} 行 ${column.title} 校验错误：${rule.message}`)\n })\n })\n })\n this.$XMsg.message({\n status: 'error',\n message: () => {\n return [\n <div class=\"red\" style=\"max-height: 400px;overflow: auto;\">\n {\n msgList.map(msg => {\n return <div>{ msg }</div>\n })\n }\n </div>\n ]\n }\n })\n }\n })\n },\n selectValidEvent () {\n let selectRecords = this.$refs.xTable.getSelectRecords()\n if (selectRecords.length > 0) {\n this.$refs.xTable.validate(selectRecords, valid => {\n if (valid) {\n this.$XMsg.message({ status: 'success', message: '校验成功！' })\n } else {\n this.$XMsg.message({ status: 'error', message: '校验不通过！' })\n }\n })\n } else {\n this.$XMsg.message({ status: 'warning', message: '未选中数据！' })\n }\n },\n insertEvent (row) {\n let xTable = this.$refs.xTable\n let record = {}\n xTable.insertAt(record, row).then(({ row }) => {\n xTable.setActiveRow(row)\n })\n },\n getInsertEvent () {\n let insertRecords = this.$refs.xTable.getInsertRecords()\n this.$XMsg.alert(insertRecords.length)\n },\n getRemoveEvent () {\n let removeRecords = this.$refs.xTable.getRemoveRecords()\n this.$XMsg.alert(removeRecords.length)\n },\n getUpdateEvent () {\n let updateRecords = this.$refs.xTable.getUpdateRecords()\n this.$XMsg.alert(updateRecords.length)\n }\n }\n }\n "]}},created:function(){this.findList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){o.a.highlightBlock(e)})},methods:{findList:function(){var e=this;return this.loading=!0,new Promise(function(t){setTimeout(function(){var l=window.MOCK_DATA_LIST.slice(0,5e3);e.$refs.xTable&&e.$refs.xTable.loadData(l),t(),e.loading=!1},300)})},validEvent:function(){var e=this;this.$refs.xTable.validate(function(t){t?e.$XMsg.message({status:"success",message:"校验成功！"}):e.$XMsg.message({status:"error",message:"校验不通过！"})})},fullValidEvent:function(){var e=this,t=this.$createElement;this.$refs.xTable.fullValidate(function(l,n){if(l)e.$XMsg.message({status:"success",message:"校验成功！"});else{var a=[];Object.values(n).forEach(function(e){e.forEach(function(e){var t=e.rowIndex,l=e.column,n=e.rules;n.forEach(function(e){a.push("第 ".concat(t," 行 ").concat(l.title," 校验错误：").concat(e.message))})})}),e.$XMsg.message({status:"error",message:function(){return[t("div",{class:"red",style:"max-height: 400px;overflow: auto;"},[a.map(function(e){return t("div",[e])})])]}})}})},selectValidEvent:function(){var e=this,t=this.$refs.xTable.getSelectRecords();t.length>0?this.$refs.xTable.validate(t,function(t){t?e.$XMsg.message({status:"success",message:"校验成功！"}):e.$XMsg.message({status:"error",message:"校验不通过！"})}):this.$XMsg.message({status:"warning",message:"未选中数据！"})},insertEvent:function(e){var t=this.$refs.xTable,l={};t.insertAt(l,e).then(function(e){var l=e.row;t.setActiveRow(l)})},getInsertEvent:function(){var e=this.$refs.xTable.getInsertRecords();this.$XMsg.alert(e.length)},getRemoveEvent:function(){var e=this.$refs.xTable.getRemoveRecords();this.$XMsg.alert(e.length)},getUpdateEvent:function(){var e=this.$refs.xTable.getUpdateRecords();this.$XMsg.alert(e.length)}}},s=r,d=l("2877"),c=Object(d["a"])(s,n,a,!1,null,null,null);t["default"]=c.exports},bba7:function(e,t,l){"use strict";l.r(t);var n=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",{staticClass:"tip"},[e._v("\n 虚拟滚动渲染，加载 1 万行"),l("br"),e._v("\n 大数据不建议使用双向绑定的 "),l("table-api-link",{attrs:{name:"data"}}),e._v(" 属性（vue 监听会大数据会短暂的卡顿），建议使用 "),l("table-api-link",{attrs:{prop:"loadData"}}),e._v("/"),l("table-api-link",{attrs:{prop:"reloadData"}}),e._v(" 函数"),l("br"),l("table-api-link",{attrs:{prop:"data"}}),e._v(" 和 "),l("table-api-link",{attrs:{prop:"loadData"}}),e._v("/"),l("table-api-link",{attrs:{prop:"reloadData"}}),e._v(" 不应该同时使用，请根据数据量决定使用哪种方式，保证一致性\n ")],1),l("vxe-table",{ref:"xTable",attrs:{border:"",resizable:"","show-overflow":"",height:"300",loading:e.loading}},[l("vxe-table-column",{attrs:{type:"index",width:"100"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:"",width:"200"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age",width:"200"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex",width:"200"}}),l("vxe-table-column",{attrs:{field:"rate",title:"Rate",width:"200"}}),l("vxe-table-column",{attrs:{field:"region",title:"Region",width:"200"}}),l("vxe-table-column",{attrs:{field:"time",title:"Time",width:"200"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address",width:"300","show-overflow":""}}),l("vxe-table-column",{attrs:{field:"updateTime",title:"UpdateTime",width:"200"}}),l("vxe-table-column",{attrs:{field:"createTime",title:"CreateTime",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr1",title:"Attr1",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr2",title:"Attr2",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr3",title:"Attr3",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr4",title:"Attr4",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr5",title:"Attr5",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr6",title:"Attr6",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr7",title:"Attr7",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr8",title:"Attr8",width:"200"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",width:"200"}}),l("vxe-table-column",{attrs:{field:"attr9",title:"Attr9",width:"200"}}),l("vxe-table-column",{attrs:{field:"createTime",title:"CreateTime",width:"200"}})],1),e._m(0),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v(" "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},a=[function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("pre",[e._v(" "),l("code",[e._v("\n | Arrow Up ↑ | 匀速向上滚动数据 |\n | Arrow Down ↓ | 匀速向下滚动数据 |\n | Arrow Left ← | 匀速向左滚动数据 |\n | Arrow Right → | 匀速向右滚动数据 |\n ")]),e._v("\n ")])}],i=(l("5df3"),l("1c4c"),l("ac6a"),l("1487")),o=l.n(i),r={data:function(){return{loading:!1,demoCodes:['\n <vxe-table\n ref="xTable"\n border\n resizable\n show-overflow\n height="300"\n :loading="loading">\n <vxe-table-column type="index" width="100"></vxe-table-column>\n <vxe-table-column field="name" title="Name" sortable width="200"></vxe-table-column>\n <vxe-table-column field="age" title="Age" width="200"></vxe-table-column>\n <vxe-table-column field="sex" title="Sex" width="200"></vxe-table-column>\n <vxe-table-column field="rate" title="Rate" width="200"></vxe-table-column>\n <vxe-table-column field="region" title="Region" width="200"></vxe-table-column>\n <vxe-table-column field="time" title="Time" width="200"></vxe-table-column>\n <vxe-table-column field="address" title="Address" width="300" show-overflow></vxe-table-column>\n <vxe-table-column field="updateTime" title="UpdateTime" width="200"></vxe-table-column>\n <vxe-table-column field="createTime" title="CreateTime" width="200"></vxe-table-column>\n <vxe-table-column field="attr1" title="Attr1" width="200"></vxe-table-column>\n <vxe-table-column field="attr2" title="Attr2" width="200"></vxe-table-column>\n <vxe-table-column field="attr3" title="Attr3" width="200"></vxe-table-column>\n <vxe-table-column field="attr4" title="Attr4" width="200"></vxe-table-column>\n <vxe-table-column field="attr5" title="Attr5" width="200"></vxe-table-column>\n <vxe-table-column field="attr6" title="Attr6" width="200"></vxe-table-column>\n <vxe-table-column field="attr7" title="Attr7" width="200"></vxe-table-column>\n <vxe-table-column field="attr8" title="Attr8" width="200"></vxe-table-column>\n <vxe-table-column field="name" title="Name" width="200"></vxe-table-column>\n <vxe-table-column field="attr9" title="Attr9" width="200"></vxe-table-column>\n <vxe-table-column field="createTime" title="CreateTime" width="200"></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n loading: false\n }\n },\n created () {\n this.loading = true\n setTimeout(() => {\n let tableData = window.MOCK_DATA_LIST.slice(0, 10000)\n // 使用函数式加载，阻断 vue 对大数组的双向绑定，大数据性能翻倍提升\n if (this.$refs.xTable) {\n this.$refs.xTable.loadData(tableData)\n }\n this.loading = false\n }, 300)\n }\n }\n "]}},created:function(){var e=this;this.loading=!0,setTimeout(function(){var t=window.MOCK_DATA_LIST.slice(0,1e4);e.$refs.xTable&&e.$refs.xTable.loadData(t),e.loading=!1},300)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){o.a.highlightBlock(e)})}},s=r,d=l("2877"),c=Object(d["a"])(s,n,a,!1,null,null,null);t["default"]=c.exports},d291:function(e,t,l){"use strict";l.r(t);var n=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",{staticClass:"tip"},[e._v("\n 如果列较多请使用 "),l("grid-api-link",{attrs:{name:"vxe-grid"}}),e._v("，使渲染性能达到最优，虚拟滚动只会渲染可视区域的数据，对于海量数据的性能提升非常大"),l("br"),e._v("\n 数据超大情况下必须使用："),l("table-api-link",{attrs:{prop:"show-overflow"}}),e._v("，"),l("table-api-link",{attrs:{prop:"show-header-overflow"}}),e._v(" 参数"),l("br"),e._v("\n 相关参数说明 {seq: 序号, $rowIndex: 获取渲染中的行索引, rowIndex: 获取真实的行索引, row: 获取行数据, column: 获取列配置, columnIndex: 获取真实列索引，$columnIndex:获取渲染中的列索引}\n ")],1),l("vxe-table",{attrs:{border:"","highlight-hover-row":"",height:"300",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"100"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:""}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v(" "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")]),l("p",{staticClass:"tip"},[e._v("\n 手动调优，默认自动优化"),l("br"),e._v("\n 通过指定 "),l("table-api-link",{attrs:{prop:"optimization"}}),e._v(" ：{"),l("table-api-link",{attrs:{prop:"scrollX"}}),e._v(","),l("table-api-link",{attrs:{prop:"scrollY"}}),e._v("} 适合的参数可以手动调优"),l("br"),e._v("\n 数据超大情况下必须使用："),l("table-api-link",{attrs:{prop:"show-overflow"}}),e._v("，"),l("table-api-link",{attrs:{prop:"show-header-overflow"}}),e._v(" 参数\n ")],1),l("vxe-table",{ref:"xTable",attrs:{border:"","show-overflow":"",height:"300"}},[l("vxe-table-column",{attrs:{type:"index",width:"100"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:""}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),e._m(0),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v(" "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n ")])],1)},a=[function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("pre",[e._v(" "),l("code",[e._v("\n | Arrow Up ↑ | 匀速向上滚动数据 |\n | Arrow Down ↓ | 匀速向下滚动数据 |\n | Arrow Left ← | 匀速向左滚动数据 |\n | Arrow Right → | 匀速向右滚动数据 |\n ")]),e._v("\n ")])}],i=(l("5df3"),l("1c4c"),l("ac6a"),l("1487")),o=l.n(i),r={data:function(){return{tableData:[],demoCodes:['\n <vxe-table\n border\n highlight-hover-row\n height="300"\n :data.sync="tableData">\n <vxe-table-column type="index" width="100"></vxe-table-column>\n <vxe-table-column field="name" title="Name" sortable></vxe-table-column>\n <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n <vxe-table-column field="age" title="Age"></vxe-table-column>\n <vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n tableData: []\n }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 200)\n }\n }\n ",'\n <vxe-table\n border\n show-overflow\n ref="xTable"\n height="300">\n <vxe-table-column type="index" width="100"></vxe-table-column>\n <vxe-table-column field="name" title="Name" sortable></vxe-table-column>\n <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n <vxe-table-column field="age" title="Age"></vxe-table-column>\n <vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n created () {\n this.$nextTick(() => {\n this.$refs.xTable.reloadData(window.MOCK_DATA_LIST.slice(0, 10000))\n })\n }\n }\n "]}},created:function(){var e=this;this.tableData=window.MOCK_DATA_LIST.slice(0,200),this.$nextTick(function(){e.$refs.xTable.reloadData(window.MOCK_DATA_LIST.slice(0,1e4))})},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){o.a.highlightBlock(e)})}},s=r,d=l("2877"),c=Object(d["a"])(s,n,a,!1,null,null,null);t["default"]=c.exports}}]);
Reference in New Issue View Git Blame Copy Permalink