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
e3a080ef4fa4afb04367973ba9870a0bdafb8ff9
vxe-table/docs/static/js/scroll.c8db9fd9.js
xuliangzhan e3a080ef4f update
2019-10-16 19:16:39 +08:00

1 line
91 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
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"],{2810:function(e,t,n){"use strict";n.r(t);var l=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[e._m(0),n("vxe-toolbar",{attrs:{refresh:{query:e.findList}},scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{scopedSlots:e._u([{key:"dropdowns",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.insertEvent(null)}}},[e._v("从第一行插入")]),n("vxe-button",{on:{click:function(t){return e.insertEvent(-1)}}},[e._v("从最后插入")]),n("vxe-button",{on:{click:function(t){e.insertEvent(e.$refs.xTable.getData(100))}}},[e._v("插入到 100 行")]),n("vxe-button",{on:{click:function(t){e.insertEvent(e.$refs.xTable.getData(2e3))}}},[e._v("插入到 2000 行")])]},proxy:!0}])},[[e._v("新增操作")]],2),n("vxe-button",{scopedSlots:e._u([{key:"dropdowns",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.$refs.xTable.removeSelecteds()}}},[e._v("删除选中")]),n("vxe-button",{on:{click:function(t){e.$refs.xTable.remove(e.$refs.xTable.getData(0))}}},[e._v("删除第一行")]),n("vxe-button",{on:{click:function(t){e.$refs.xTable.remove(e.$refs.xTable.getData(e.$refs.xTable.getData().length-1))}}},[e._v("删除最后一行")]),n("vxe-button",{on:{click:function(t){e.$refs.xTable.remove(e.$refs.xTable.getData(100))}}},[e._v("删除第 100 行")])]},proxy:!0}])},[[e._v("删除操作")]],2),n("vxe-button",{scopedSlots:e._u([{key:"dropdowns",fn:function(){return[n("vxe-button",{on:{click:e.validEvent}},[e._v("基本校验")]),n("vxe-button",{on:{click:e.fullValidEvent}},[e._v("完整校验")]),n("vxe-button",{on:{click:e.selectValidEvent}},[e._v("选中校验")])]},proxy:!0}])},[[e._v("校验操作")]],2),n("vxe-button",{on:{click:e.getInsertEvent}},[e._v("获取新增")]),n("vxe-button",{on:{click:e.getRemoveEvent}},[e._v("获取删除")]),n("vxe-button",{on:{click:e.getUpdateEvent}},[e._v("获取修改")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable",attrs:{border:"",resizable:"","show-overflow":"",height:"300",loading:e.loading,"edit-rules":e.validRules,"edit-config":{trigger:"click",mode:"cell",showStatus:!0},"select-config":{checkField:"checked"}}},[n("vxe-table-column",{attrs:{type:"selection",width:"60"}}),n("vxe-table-column",{attrs:{type:"index",width:"100"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:"",width:"200","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"age",title:"Age",width:"200","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex",width:"200","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"rate",title:"Rate",width:"200"}}),n("vxe-table-column",{attrs:{field:"region",title:"Region",width:"200"}}),n("vxe-table-column",{attrs:{field:"time",title:"Time",width:"200"}}),n("vxe-table-column",{attrs:{field:"address",title:"Address",width:"300","show-overflow":""}}),n("vxe-table-column",{attrs:{field:"updateTime",title:"UpdateTime",width:"200"}}),n("vxe-table-column",{attrs:{field:"createTime",title:"CreateTime",width:"200"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},a=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",{staticClass:"tip"},[e._v("虚拟滚动渲染，可编辑表格"),n("br"),n("span",{staticClass:"red"},[e._v("当数据量非常大时，由于需要进行大量数据运算，所以数据校验或者获取数据...等函数执行会相对耗时")])])}],i=(n("8615"),n("5df3"),n("1c4c"),n("ac6a"),n("1487")),o=n.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 </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>\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.$XModal.message({ status: 'success', message: '校验成功！' })\n } else {\n this.$XModal.message({ status: 'error', message: '校验不通过！' })\n }\n })\n },\n fullValidEvent () {\n this.$refs.xTable.fullValidate((valid, errMap) => {\n if (valid) {\n this.$XModal.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.$XModal.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.$XModal.message({ status: 'success', message: '校验成功！' })\n } else {\n this.$XModal.message({ status: 'error', message: '校验不通过！' })\n }\n })\n } else {\n this.$XModal.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.$XModal.alert(insertRecords.length)\n },\n getRemoveEvent () {\n let removeRecords = this.$refs.xTable.getRemoveRecords()\n this.$XModal.alert(removeRecords.length)\n },\n getUpdateEvent () {\n let updateRecords = this.$refs.xTable.getUpdateRecords()\n this.$XModal.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 n=window.MOCK_DATA_LIST.slice(0,5e3);e.$refs.xTable&&e.$refs.xTable.loadData(n),t(),e.loading=!1}),300)}))},validEvent:function(){var e=this;this.$refs.xTable.validate((function(t){t?e.$XModal.message({status:"success",message:"校验成功！"}):e.$XModal.message({status:"error",message:"校验不通过！"})}))},fullValidEvent:function(){var e=this,t=this.$createElement;this.$refs.xTable.fullValidate((function(n,l){if(n)e.$XModal.message({status:"success",message:"校验成功！"});else{var a=[];Object.values(l).forEach((function(e){e.forEach((function(e){var t=e.rowIndex,n=e.column,l=e.rules;l.forEach((function(e){a.push("第 ".concat(t," 行 ").concat(n.title," 校验错误：").concat(e.message))}))}))})),e.$XModal.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.$XModal.message({status:"success",message:"校验成功！"}):e.$XModal.message({status:"error",message:"校验不通过！"})})):this.$XModal.message({status:"warning",message:"未选中数据！"})},insertEvent:function(e){var t=this.$refs.xTable,n={};t.insertAt(n,e).then((function(e){var n=e.row;t.setActiveRow(n)}))},getInsertEvent:function(){var e=this.$refs.xTable.getInsertRecords();this.$XModal.alert(e.length)},getRemoveEvent:function(){var e=this.$refs.xTable.getRemoveRecords();this.$XModal.alert(e.length)},getUpdateEvent:function(){var e=this.$refs.xTable.getUpdateRecords();this.$XModal.alert(e.length)}}},s=r,d=n("2877"),c=Object(d["a"])(s,l,a,!1,null,null,null);t["default"]=c.exports},3047:function(e,t,n){"use strict";n.r(t);var l=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[e._m(0),n("vxe-toolbar",{attrs:{refresh:{query:e.findList}},scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{scopedSlots:e._u([{key:"dropdowns",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.insertEvent(null)}}},[e._v("从第一行插入")]),n("vxe-button",{on:{click:function(t){return e.insertEvent(-1)}}},[e._v("从最后插入")]),n("vxe-button",{on:{click:function(t){e.insertEvent(e.$refs.xTable.getData(100))}}},[e._v("插入到 100 行")]),n("vxe-button",{on:{click:function(t){e.insertEvent(e.$refs.xTable.getData(2e3))}}},[e._v("插入到 2000 行")])]},proxy:!0}])},[[e._v("新增操作")]],2),n("vxe-button",{scopedSlots:e._u([{key:"dropdowns",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.$refs.xTable.removeSelecteds()}}},[e._v("删除选中")]),n("vxe-button",{on:{click:function(t){e.$refs.xTable.remove(e.$refs.xTable.getData(0))}}},[e._v("删除第一行")]),n("vxe-button",{on:{click:function(t){e.$refs.xTable.remove(e.$refs.xTable.getData(e.$refs.xTable.getData().length-1))}}},[e._v("删除最后一行")]),n("vxe-button",{on:{click:function(t){e.$refs.xTable.remove(e.$refs.xTable.getData(100))}}},[e._v("删除第 100 行")])]},proxy:!0}])},[[e._v("删除操作")]],2),n("vxe-button",{on:{click:e.getInsertEvent}},[e._v("获取新增")]),n("vxe-button",{on:{click:e.getRemoveEvent}},[e._v("获取删除")]),n("vxe-button",{on:{click:e.getUpdateEvent}},[e._v("获取修改")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable",attrs:{border:"",resizable:"","show-overflow":"",height:"300",loading:e.loading,"edit-config":{trigger:"click",mode:"row",showStatus:!0},"select-config":{checkField:"checked"}}},[n("vxe-table-column",{attrs:{type:"selection",width:"60"}}),n("vxe-table-column",{attrs:{type:"index",width:"100"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:"",width:"200","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"age",title:"Age",width:"200","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex",width:"200","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"rate",title:"Rate",width:"200"}}),n("vxe-table-column",{attrs:{field:"region",title:"Region",width:"200"}}),n("vxe-table-column",{attrs:{field:"time",title:"Time",width:"200"}}),n("vxe-table-column",{attrs:{field:"address",title:"Address",width:"300","show-overflow":""}}),n("vxe-table-column",{attrs:{field:"updateTime",title:"UpdateTime",width:"200"}}),n("vxe-table-column",{attrs:{field:"createTime",title:"CreateTime",width:"200"}}),n("vxe-table-column",{attrs:{field:"attr1",title:"Attr1",width:"200"}}),n("vxe-table-column",{attrs:{field:"attr2",title:"Attr2",width:"200"}}),n("vxe-table-column",{attrs:{field:"attr3",title:"Attr3",width:"200"}}),n("vxe-table-column",{attrs:{field:"attr4",title:"Attr4",width:"200"}}),n("vxe-table-column",{attrs:{field:"attr5",title:"Attr5",width:"200"}}),n("vxe-table-column",{attrs:{field:"attr6",title:"Attr6",width:"200"}}),n("vxe-table-column",{attrs:{field:"attr7",title:"Attr7",width:"200"}}),n("vxe-table-column",{attrs:{field:"attr8",title:"Attr8",width:"200"}}),n("vxe-table-column",{attrs:{field:"attr9",title:"Attr9",width:"200"}}),n("vxe-table-column",{attrs:{field:"createTime",title:"CreateTime",width:"200"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},a=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",{staticClass:"tip"},[e._v("虚拟滚动渲染，可编辑表格"),n("br"),n("span",{staticClass:"red"},[e._v("当数据量非常大时，由于需要进行大量数据运算，所以数据校验或者获取数据...等函数执行会相对耗时")])])}],i=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),o=n.n(i),r={data:function(){return{loading:!1,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 @click="getInsertEvent">获取新增</vxe-button>\n <vxe-button @click="getRemoveEvent">获取删除</vxe-button>\n <vxe-button @click="getUpdateEvent">获取修改</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-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>\n ',"\n export default {\n data () {\n return {\n loading: false\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 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.$XModal.alert(insertRecords.length)\n },\n getRemoveEvent () {\n let removeRecords = this.$refs.xTable.getRemoveRecords()\n this.$XModal.alert(removeRecords.length)\n },\n getUpdateEvent () {\n let updateRecords = this.$refs.xTable.getUpdateRecords()\n this.$XModal.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 n=window.MOCK_DATA_LIST.slice(0,5e3);e.$refs.xTable&&e.$refs.xTable.loadData(n),t(),e.loading=!1}),300)}))},insertEvent:function(e){var t=this.$refs.xTable,n={};t.insertAt(n,e).then((function(e){var n=e.row;t.setActiveRow(n)}))},getInsertEvent:function(){var e=this.$refs.xTable.getInsertRecords();this.$XModal.alert(e.length)},getRemoveEvent:function(){var e=this.$refs.xTable.getRemoveRecords();this.$XModal.alert(e.length)},getUpdateEvent:function(){var e=this.$refs.xTable.getUpdateRecords();this.$XModal.alert(e.length)}}},s=r,d=n("2877"),c=Object(d["a"])(s,l,a,!1,null,null,null);t["default"]=c.exports},"33d6":function(e,t,n){"use strict";n.r(t);var l=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div")},a=[],i=n("2877"),o={},r=Object(i["a"])(o,l,a,!1,null,null,null);t["default"]=r.exports},4467:function(e,t,n){"use strict";n.r(t);var l=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("\n 虚拟滚动渲染，加载 10 万行 1 万列，左右固定列"),n("br"),e._v("\n 大数据不建议使用双向绑定的 "),n("table-api-link",{attrs:{name:"data"}}),e._v(" 属性（vue 监听会大数据会短暂的卡顿），建议使用 "),n("table-api-link",{attrs:{prop:"loadData"}}),e._v("/"),n("table-api-link",{attrs:{prop:"loadColumn"}}),e._v(" 函数"),n("br"),e._v("\n 对于多选 type="),n("table-column-api-link",{attrs:{prop:"selection"}}),e._v(" 当数据量海量时应该绑定 "),n("table-api-link",{attrs:{prop:"checkField"}}),e._v(" 属性渲染速度更快"),n("br"),n("span",{staticClass:"red"},[e._v("注意：如果要启用横向虚拟滚动，所有的列宽度必须一致，否则无法兼容")])],1),n("vxe-grid",{ref:"xGrid",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),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},a=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("pre",[e._v(" "),n("code",[e._v("\n | Arrow Up ↑ | 匀速向上滚动数据 |\n | Arrow Down ↓ | 匀速向下滚动数据 |\n | Arrow Left ← | 匀速向左滚动数据 |\n | Arrow Right → | 匀速向右滚动数据 |\n | Page Up | 向上翻页滚动 |\n | Page Down | 向下翻页滚动 |\n | Spacebar | 翻页滚动 |\n | Home | 滚动到顶部 |\n | End | 滚动到底部 |\n ")]),e._v("\n ")])}],i=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),o=n.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="xGrid"\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.xGrid) {\n this.$refs.xGrid.loadColumn(tableColumn)\n this.$refs.xGrid.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),n=window.MOCK_COLUMN_LIST.slice(0,1e4);e.$refs.xGrid&&(e.$refs.xGrid.loadColumn(n),e.$refs.xGrid.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=n("2877"),c=Object(d["a"])(s,l,a,!1,null,null,null);t["default"]=c.exports},"9b96":function(e,t,n){"use strict";n.r(t);var l=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("\n 虚拟滚动渲染，加载 1 万行 1 万列"),n("br"),e._v("\n 大数据不建议使用双向绑定的 "),n("table-api-link",{attrs:{name:"data"}}),e._v(" 属性（vue 监听会大数据会短暂的卡顿），建议使用 "),n("table-api-link",{attrs:{prop:"loadData"}}),e._v("/"),n("table-api-link",{attrs:{prop:"loadColumn"}}),e._v(" 函数"),n("br"),n("span",{staticClass:"red"},[e._v("注意：如果要启用横向虚拟滚动，所有的列宽度必须一致，否则无法兼容")])],1),n("vxe-grid",{ref:"xGrid",attrs:{border:"","show-overflow":"","show-header-overflow":"",height:"300",loading:e.loading,"select-config":{checkField:"checked"}}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},a=[],i=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),o=n.n(i),r={data:function(){return{loading:!1,demoCodes:['\n <vxe-grid\n border\n show-overflow\n show-header-overflow\n ref="xGrid"\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.xGrid) {\n this.$refs.xGrid.loadColumn(tableColumn)\n this.$refs.xGrid.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),n=window.MOCK_COLUMN_LIST.slice(0,1e4).map((function(e){return Object.assign({},e,{fixed:void 0})}));e.$refs.xGrid&&(e.$refs.xGrid.loadColumn(n),e.$refs.xGrid.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=n("2877"),c=Object(d["a"])(s,l,a,!1,null,null,null);t["default"]=c.exports},a233:function(e,t,n){"use strict";n.r(t);var l=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[e._m(0),n("vxe-toolbar",{attrs:{refresh:{query:e.findList}},scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{scopedSlots:e._u([{key:"dropdowns",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.insertEvent(null)}}},[e._v("从第一行插入")]),n("vxe-button",{on:{click:function(t){return e.insertEvent(-1)}}},[e._v("从最后插入")]),n("vxe-button",{on:{click:function(t){e.insertEvent(e.$refs.xTable.getData(100))}}},[e._v("插入到 100 行")]),n("vxe-button",{on:{click:function(t){e.insertEvent(e.$refs.xTable.getData(2e3))}}},[e._v("插入到 2000 行")])]},proxy:!0}])},[[e._v("新增操作")]],2),n("vxe-button",{scopedSlots:e._u([{key:"dropdowns",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.$refs.xTable.removeSelecteds()}}},[e._v("删除选中")]),n("vxe-button",{on:{click:function(t){e.$refs.xTable.remove(e.$refs.xTable.getData(0))}}},[e._v("删除第一行")]),n("vxe-button",{on:{click:function(t){e.$refs.xTable.remove(e.$refs.xTable.getData(e.$refs.xTable.getData().length-1))}}},[e._v("删除最后一行")]),n("vxe-button",{on:{click:function(t){e.$refs.xTable.remove(e.$refs.xTable.getData(100))}}},[e._v("删除第 100 行")])]},proxy:!0}])},[[e._v("删除操作")]],2),n("vxe-button",{scopedSlots:e._u([{key:"dropdowns",fn:function(){return[n("vxe-button",{on:{click:e.validEvent}},[e._v("基本校验")]),n("vxe-button",{on:{click:e.fullValidEvent}},[e._v("完整校验")]),n("vxe-button",{on:{click:e.selectValidEvent}},[e._v("选中校验")])]},proxy:!0}])},[[e._v("校验操作")]],2),n("vxe-button",{on:{click:e.getInsertEvent}},[e._v("获取新增")]),n("vxe-button",{on:{click:e.getRemoveEvent}},[e._v("获取删除")]),n("vxe-button",{on:{click:e.getUpdateEvent}},[e._v("获取修改")])]},proxy:!0}])}),n("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"}}},[n("vxe-table-column",{attrs:{type:"selection",width:"60"}}),n("vxe-table-column",{attrs:{type:"index",width:"100"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:"",width:"200","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"age",title:"Age",width:"200","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex",width:"200","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"rate",title:"Rate",width:"200"}}),n("vxe-table-column",{attrs:{field:"region",title:"Region",width:"200"}}),n("vxe-table-column",{attrs:{field:"time",title:"Time",width:"200"}}),n("vxe-table-column",{attrs:{field:"address",title:"Address",width:"300","show-overflow":""}}),n("vxe-table-column",{attrs:{field:"updateTime",title:"UpdateTime",width:"200"}}),n("vxe-table-column",{attrs:{field:"createTime",title:"CreateTime",width:"200"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},a=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",{staticClass:"tip"},[e._v("虚拟滚动渲染，可编辑表格"),n("br"),n("span",{staticClass:"red"},[e._v("当数据量非常大时，由于需要进行大量数据运算，所以数据校验或者获取数据...等函数执行会相对耗时")])])}],i=(n("8615"),n("5df3"),n("1c4c"),n("ac6a"),n("1487")),o=n.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 </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>\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.$XModal.message({ status: 'success', message: '校验成功！' })\n } else {\n this.$XModal.message({ status: 'error', message: '校验不通过！' })\n }\n })\n },\n fullValidEvent () {\n this.$refs.xTable.fullValidate((valid, errMap) => {\n if (valid) {\n this.$XModal.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.$XModal.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.$XModal.message({ status: 'success', message: '校验成功！' })\n } else {\n this.$XModal.message({ status: 'error', message: '校验不通过！' })\n }\n })\n } else {\n this.$XModal.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.$XModal.alert(insertRecords.length)\n },\n getRemoveEvent () {\n let removeRecords = this.$refs.xTable.getRemoveRecords()\n this.$XModal.alert(removeRecords.length)\n },\n getUpdateEvent () {\n let updateRecords = this.$refs.xTable.getUpdateRecords()\n this.$XModal.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 n=window.MOCK_DATA_LIST.slice(0,5e3);e.$refs.xTable&&e.$refs.xTable.loadData(n),t(),e.loading=!1}),300)}))},validEvent:function(){var e=this;this.$refs.xTable.validate((function(t){t?e.$XModal.message({status:"success",message:"校验成功！"}):e.$XModal.message({status:"error",message:"校验不通过！"})}))},fullValidEvent:function(){var e=this,t=this.$createElement;this.$refs.xTable.fullValidate((function(n,l){if(n)e.$XModal.message({status:"success",message:"校验成功！"});else{var a=[];Object.values(l).forEach((function(e){e.forEach((function(e){var t=e.rowIndex,n=e.column,l=e.rules;l.forEach((function(e){a.push("第 ".concat(t," 行 ").concat(n.title," 校验错误：").concat(e.message))}))}))})),e.$XModal.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.$XModal.message({status:"success",message:"校验成功！"}):e.$XModal.message({status:"error",message:"校验不通过！"})})):this.$XModal.message({status:"warning",message:"未选中数据！"})},insertEvent:function(e){var t=this.$refs.xTable,n={};t.insertAt(n,e).then((function(e){var n=e.row;t.setActiveRow(n)}))},getInsertEvent:function(){var e=this.$refs.xTable.getInsertRecords();this.$XModal.alert(e.length)},getRemoveEvent:function(){var e=this.$refs.xTable.getRemoveRecords();this.$XModal.alert(e.length)},getUpdateEvent:function(){var e=this.$refs.xTable.getUpdateRecords();this.$XModal.alert(e.length)}}},s=r,d=n("2877"),c=Object(d["a"])(s,l,a,!1,null,null,null);t["default"]=c.exports},a515:function(e,t,n){"use strict";n.r(t);var l=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("虚拟滚动渲染，全键盘操作")]),n("vxe-toolbar",{attrs:{refresh:{query:e.findList}},scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{scopedSlots:e._u([{key:"dropdowns",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.insertEvent(null)}}},[e._v("从第一行插入")]),n("vxe-button",{on:{click:function(t){return e.insertEvent(-1)}}},[e._v("从最后插入")]),n("vxe-button",{on:{click:function(t){e.insertEvent(e.$refs.xTable.getData(100))}}},[e._v("插入到 100 行")]),n("vxe-button",{on:{click:function(t){e.insertEvent(e.$refs.xTable.getData(2e3))}}},[e._v("插入到 2000 行")])]},proxy:!0}])},[[e._v("新增操作")]],2),n("vxe-button",{scopedSlots:e._u([{key:"dropdowns",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.$refs.xTable.removeSelecteds()}}},[e._v("删除选中")]),n("vxe-button",{on:{click:function(t){e.$refs.xTable.remove(e.$refs.xTable.getData(0))}}},[e._v("删除第一行")]),n("vxe-button",{on:{click:function(t){e.$refs.xTable.remove(e.$refs.xTable.getData(e.$refs.xTable.getData().length-1))}}},[e._v("删除最后一行")]),n("vxe-button",{on:{click:function(t){e.$refs.xTable.remove(e.$refs.xTable.getData(100))}}},[e._v("删除第 100 行")])]},proxy:!0}])},[[e._v("删除操作")]],2),n("vxe-button",{scopedSlots:e._u([{key:"dropdowns",fn:function(){return[n("vxe-button",{on:{click:e.validEvent}},[e._v("基本校验")]),n("vxe-button",{on:{click:e.fullValidEvent}},[e._v("完整校验")]),n("vxe-button",{on:{click:e.selectValidEvent}},[e._v("选中校验")])]},proxy:!0}])},[[e._v("校验操作")]],2),n("vxe-button",{on:{click:e.getInsertEvent}},[e._v("获取新增")]),n("vxe-button",{on:{click:e.getRemoveEvent}},[e._v("获取删除")]),n("vxe-button",{on:{click:e.getUpdateEvent}},[e._v("获取修改")]),n("vxe-button",{scopedSlots:e._u([{key:"dropdowns",fn:function(){return[n("vxe-button",{on:{click:function(t){e.$refs.xTable.scrollToRow(e.$refs.xTable.getData(10))}}},[e._v("滚动到第 10 行")]),n("vxe-button",{on:{click:function(t){e.$refs.xTable.scrollToRow(e.$refs.xTable.getData(4e3))}}},[e._v("滚动第 4000 行")]),n("vxe-button",{on:{click:function(t){e.$refs.xTable.scrollToColumn(e.$refs.xTable.getColumns(1))}}},[e._v("滚动第 1 列")]),n("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}])}),n("vxe-table",{ref:"xTable",attrs:{border:"",resizable:"","show-overflow":"",height:"300",loading:e.loading,"edit-rules":e.validRules,"mouse-config":{selected:!0},"edit-config":{trigger:"dblclick",mode:"cell",showStatus:!0},"keyboard-config":{isArrow:!0,isDel:!0,isTab:!0,isEdit:!0},"select-config":{checkField:"checked"}}},[n("vxe-table-column",{attrs:{type:"selection",width:"60"}}),n("vxe-table-column",{attrs:{type:"index",width:"100"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:"",width:"200","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"age",title:"Age",width:"200","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex",width:"200","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"rate",title:"Rate",width:"200"}}),n("vxe-table-column",{attrs:{field:"region",title:"Region",width:"200"}}),n("vxe-table-column",{attrs:{field:"time",title:"Time",width:"200"}}),n("vxe-table-column",{attrs:{field:"address",title:"Address",width:"300","show-overflow":""}}),n("vxe-table-column",{attrs:{field:"updateTime",title:"UpdateTime",width:"200"}}),n("vxe-table-column",{attrs:{field:"createTime",title:"CreateTime",width:"200"}})],1),e._m(0),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},a=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("pre",[e._v(" "),n("code",[e._v("\n | Arrow Up ↑ | 移动到当前活动单元格上面的单元格 |\n | Arrow Down ↓ | 移动到当前活动单元格下面的单元格 |\n | Arrow Left ← | 移动到当前活动单元格左边的单元格 |\n | Arrow Right → | 移动到当前活动单元格右边的单元格 |\n | Tab | 移动到当前选中或活动单元格的右侧单元格，如果到最后一列且存在下一行，则从下一行开始移动 |\n | Tab + Shift | 移动到当前选中或活动单元格的左侧单元格，如果到第一列且存在上一行，则从上一行开始移动 |\n | Spacebar | 如果单元格是复选框或单选框则切换勾选状态 |\n | Enter | 取消编辑并移动到当前活动单元格下面的单元格 |\n | Delete | 清空内容 |\n | Backspace | 清空内容并激活选中单元格为编辑状态 |\n | F2 | 激活单元格编辑 |\n | Esc | 取消单元格编辑 |\n | Page Up | 向上翻页滚动 |\n | Page Down | 向下翻页滚动 |\n | Home | 滚动到顶部 |\n | End | 滚动到底部 |\n ")]),e._v("\n ")])}],i=(n("8615"),n("5df3"),n("1c4c"),n("ac6a"),n("1487")),o=n.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 :mouse-config="{selected: true}"\n :edit-config="{trigger: \'dblclick\', mode: \'cell\', showStatus: true}"\n :keyboard-config="{isArrow: true, isDel: true, isTab: true, isEdit: 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>\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.$XModal.message({ status: 'success', message: '校验成功！' })\n } else {\n this.$XModal.message({ status: 'error', message: '校验不通过！' })\n }\n })\n },\n fullValidEvent () {\n this.$refs.xTable.fullValidate((valid, errMap) => {\n if (valid) {\n this.$XModal.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.$XModal.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.$XModal.message({ status: 'success', message: '校验成功！' })\n } else {\n this.$XModal.message({ status: 'error', message: '校验不通过！' })\n }\n })\n } else {\n this.$XModal.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.$XModal.alert(insertRecords.length)\n },\n getRemoveEvent () {\n let removeRecords = this.$refs.xTable.getRemoveRecords()\n this.$XModal.alert(removeRecords.length)\n },\n getUpdateEvent () {\n let updateRecords = this.$refs.xTable.getUpdateRecords()\n this.$XModal.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 n=window.MOCK_DATA_LIST.slice(0,5e3);e.$refs.xTable&&e.$refs.xTable.loadData(n),t(),e.loading=!1}),300)}))},validEvent:function(){var e=this;this.$refs.xTable.validate((function(t){t?e.$XModal.message({status:"success",message:"校验成功！"}):e.$XModal.message({status:"error",message:"校验不通过！"})}))},fullValidEvent:function(){var e=this,t=this.$createElement;this.$refs.xTable.fullValidate((function(n,l){if(n)e.$XModal.message({status:"success",message:"校验成功！"});else{var a=[];Object.values(l).forEach((function(e){e.forEach((function(e){var t=e.rowIndex,n=e.column,l=e.rules;l.forEach((function(e){a.push("第 ".concat(t," 行 ").concat(n.title," 校验错误：").concat(e.message))}))}))})),e.$XModal.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.$XModal.message({status:"success",message:"校验成功！"}):e.$XModal.message({status:"error",message:"校验不通过！"})})):this.$XModal.message({status:"warning",message:"未选中数据！"})},insertEvent:function(e){var t=this.$refs.xTable,n={};t.insertAt(n,e).then((function(e){var n=e.row;t.setActiveRow(n)}))},getInsertEvent:function(){var e=this.$refs.xTable.getInsertRecords();this.$XModal.alert(e.length)},getRemoveEvent:function(){var e=this.$refs.xTable.getRemoveRecords();this.$XModal.alert(e.length)},getUpdateEvent:function(){var e=this.$refs.xTable.getUpdateRecords();this.$XModal.alert(e.length)}}},s=r,d=n("2877"),c=Object(d["a"])(s,l,a,!1,null,null,null);t["default"]=c.exports},a935:function(e,t,n){"use strict";n.r(t);var l=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("虚拟滚动渲染，键盘移动高亮行，设置 "),n("table-api-link",{attrs:{prop:"keyboard-config"}}),e._v("={isArrow: true} 启用方向键功能")],1),n("vxe-table",{ref:"xTable",attrs:{border:"",resizable:"","show-overflow":"","highlight-current-row":"",height:"300",loading:e.loading,"keyboard-config":{isArrow:!0}}},[n("vxe-table-column",{attrs:{type:"index",width:"100"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:"",width:"200"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age",width:"200"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex",width:"200"}}),n("vxe-table-column",{attrs:{field:"rate",title:"Rate",width:"200"}}),n("vxe-table-column",{attrs:{field:"region",title:"Region",width:"200"}}),n("vxe-table-column",{attrs:{field:"time",title:"Time",width:"200"}}),n("vxe-table-column",{attrs:{field:"address",title:"Address",width:"300","show-overflow":""}}),n("vxe-table-column",{attrs:{field:"updateTime",title:"UpdateTime",width:"200"}}),n("vxe-table-column",{attrs:{field:"createTime",title:"CreateTime",width:"200"}})],1),e._m(0),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},a=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("pre",[e._v(" "),n("code",[e._v("\n | Arrow Up ↑ | 移动到高亮行的上一行 |\n | Arrow Down ↓ | 移动到高亮行的下一行 |\n ")]),e._v("\n ")])}],i=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),o=n.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>\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=n("2877"),c=Object(d["a"])(s,l,a,!1,null,null,null);t["default"]=c.exports},ac09:function(e,t,n){"use strict";n.r(t);var l=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("\n 虚拟滚动渲染，加载 10 万行，左右固定列"),n("br"),e._v("\n 大数据不建议使用双向绑定的 data 属性（vue 监听会大数据会短暂的卡顿），建议使用 "),n("table-api-link",{attrs:{prop:"loadData"}}),e._v("/"),n("table-api-link",{attrs:{prop:"reloadData"}}),e._v(" 函数"),n("br"),e._v("\n 对于多选 type="),n("table-column-api-link",{attrs:{prop:"selection"}}),e._v(" 当数据量海量时应该绑定 "),n("table-api-link",{attrs:{prop:"checkField"}}),e._v(" 属性渲染速度更快"),n("br"),n("span",{staticClass:"red"},[e._v("注意：如果要启用纵向虚拟滚动，所有的行度必须一致，否则无法兼容")])],1),n("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"}}},[n("vxe-table-column",{attrs:{type:"selection",width:"60",fixed:"left"}}),n("vxe-table-column",{attrs:{type:"index",width:"100",fixed:"left"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:"",width:"200"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex",width:"200"}}),n("vxe-table-column",{attrs:{field:"rate",title:"Rate",width:"200"}}),n("vxe-table-column",{attrs:{field:"region",title:"Region",width:"200"}}),n("vxe-table-column",{attrs:{field:"time",title:"Time",width:"200"}}),n("vxe-table-column",{attrs:{field:"address",title:"Address",width:"300"}}),n("vxe-table-column",{attrs:{field:"updateTime",title:"UpdateTime",width:"200"}}),n("vxe-table-column",{attrs:{field:"createTime",title:"CreateTime",width:"200"}}),n("vxe-table-column",{attrs:{field:"attr1",title:"Attr1",width:"200"}}),n("vxe-table-column",{attrs:{field:"attr2",title:"Attr2",width:"200"}}),n("vxe-table-column",{attrs:{field:"attr3",title:"Attr3",width:"200"}}),n("vxe-table-column",{attrs:{field:"attr4",title:"Attr4",width:"200"}}),n("vxe-table-column",{attrs:{field:"attr5",title:"Attr5",width:"200"}}),n("vxe-table-column",{attrs:{field:"attr6",title:"Attr6",width:"200"}}),n("vxe-table-column",{attrs:{field:"attr7",title:"Attr7",width:"200"}}),n("vxe-table-column",{attrs:{field:"attr8",title:"Attr8",width:"200"}}),n("vxe-table-column",{attrs:{field:"attr9",title:"Attr9",width:"200"}}),n("vxe-table-column",{attrs:{field:"createTime",title:"CreateTime",width:"200"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age",width:"200",fixed:"right"}})],1),e._m(0),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},a=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("pre",[e._v(" "),n("code",[e._v("\n | Arrow Up ↑ | 匀速向上滚动数据 |\n | Arrow Down ↓ | 匀速向下滚动数据 |\n | Arrow Left ← | 匀速向左滚动数据 |\n | Arrow Right → | 匀速向右滚动数据 |\n | Page Up | 向上翻页滚动 |\n | Page Down | 向下翻页滚动 |\n | Spacebar | 翻页滚动 |\n | Home | 滚动到顶部 |\n | End | 滚动到底部 |\n ")]),e._v("\n ")])}],i=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),o=n.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=n("2877"),c=Object(d["a"])(s,l,a,!1,null,null,null);t["default"]=c.exports},bba7:function(e,t,n){"use strict";n.r(t);var l=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("\n 虚拟滚动渲染，加载 1 万行"),n("br"),e._v("\n 大数据不建议使用双向绑定的 "),n("table-api-link",{attrs:{name:"data"}}),e._v(" 属性（vue 监听会大数据会短暂的卡顿），建议使用 "),n("table-api-link",{attrs:{prop:"loadData"}}),e._v("/"),n("table-api-link",{attrs:{prop:"reloadData"}}),e._v(" 函数"),n("br"),n("table-api-link",{attrs:{prop:"data"}}),e._v(" 和 "),n("table-api-link",{attrs:{prop:"loadData"}}),e._v("/"),n("table-api-link",{attrs:{prop:"reloadData"}}),e._v(" 不应该同时使用，请根据数据量决定使用哪种方式，保证一致性"),n("br"),n("span",{staticClass:"red"},[e._v("注意：如果要启用纵向虚拟滚动，所有的行度必须一致，否则无法兼容")])],1),n("vxe-table",{ref:"xTable",attrs:{border:"",resizable:"","show-overflow":"",height:"300",loading:e.loading}},[n("vxe-table-column",{attrs:{type:"index",width:"100"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:"",width:"200"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age",width:"200"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex",width:"200"}}),n("vxe-table-column",{attrs:{field:"rate",title:"Rate",width:"200"}}),n("vxe-table-column",{attrs:{field:"region",title:"Region",width:"200"}}),n("vxe-table-column",{attrs:{field:"time",title:"Time",width:"200"}}),n("vxe-table-column",{attrs:{field:"address",title:"Address",width:"300","show-overflow":""}}),n("vxe-table-column",{attrs:{field:"updateTime",title:"UpdateTime",width:"200"}}),n("vxe-table-column",{attrs:{field:"createTime",title:"CreateTime",width:"200"}}),n("vxe-table-column",{attrs:{field:"attr1",title:"Attr1",width:"200"}}),n("vxe-table-column",{attrs:{field:"attr2",title:"Attr2",width:"200"}}),n("vxe-table-column",{attrs:{field:"attr3",title:"Attr3",width:"200"}}),n("vxe-table-column",{attrs:{field:"attr4",title:"Attr4",width:"200"}}),n("vxe-table-column",{attrs:{field:"attr5",title:"Attr5",width:"200"}}),n("vxe-table-column",{attrs:{field:"attr6",title:"Attr6",width:"200"}}),n("vxe-table-column",{attrs:{field:"attr7",title:"Attr7",width:"200"}}),n("vxe-table-column",{attrs:{field:"attr8",title:"Attr8",width:"200"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",width:"200"}}),n("vxe-table-column",{attrs:{field:"attr9",title:"Attr9",width:"200"}}),n("vxe-table-column",{attrs:{field:"createTime",title:"CreateTime",width:"200"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},a=[],i=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),o=n.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=n("2877"),c=Object(d["a"])(s,l,a,!1,null,null,null);t["default"]=c.exports},d1f8:function(e,t,n){"use strict";n.r(t);var l=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("\n 使用自定义模板渲染，通过 "),n("table-column-api-link",{attrs:{prop:"slots"}}),e._v(" 属性编写 "),n("a",{staticClass:"link",attrs:{href:"https://cn.vuejs.org/v2/guide/render-function.html#JSX",target:"_blank"}},[e._v("JSX")]),e._v(" 模板或 "),n("a",{staticClass:"link",attrs:{href:"https://cn.vuejs.org/v2/guide/render-function.html#%E8%99%9A%E6%8B%9F-DOM",target:"_blank"}},[e._v("VNode")]),n("br"),e._v("\n 列："),n("br"),e._v("\n   "),n("table-column-api-link",{attrs:{prop:"default"}}),e._v("：自定义内容模板（提前格式化好数据 > "),n("table-column-api-link",{attrs:{prop:"formatter"}}),e._v(" > "),n("table-column-api-link",{attrs:{prop:"slots"}}),e._v("）"),n("br"),e._v("\n   "),n("table-column-api-link",{attrs:{prop:"header"}}),e._v("：自定义表头模板"),n("br"),e._v("\n   "),n("table-column-api-link",{attrs:{prop:"filter"}}),e._v("：自定义筛选模板（建议使用"),n("router-link",{attrs:{to:{name:"RendererAPI"}}},[e._v("渲染器")]),e._v("，可以更好的复用）"),n("br"),e._v("\n   "),n("table-column-api-link",{attrs:{prop:"edit"}}),e._v("：自定义可编辑模板（建议使用"),n("router-link",{attrs:{to:{name:"RendererAPI"}}},[e._v("渲染器")]),e._v("，可以更好的复用）"),n("br"),e._v("\n 工具栏："),n("br"),e._v("\n   "),n("table-column-api-link",{attrs:{prop:"buttons"}}),e._v("：自定义按钮模板"),n("br"),n("span",{staticClass:"red"},[e._v("注意：请处理好单元格显示的内容，虚拟滚动无法支持动态行高")])],1),n("vxe-grid",{ref:"xGrid",attrs:{border:"",resizable:"","show-overflow":"",height:"400",loading:e.loading,toolbar:e.tableToolbar,columns:e.tableColumn,"edit-config":{trigger:"click",mode:"cell"}}}),n("vxe-modal",{attrs:{title:"查看详情",width:"800",height:"400",resize:""},model:{value:e.showDetails,callback:function(t){e.showDetails=t},expression:"showDetails"}},[[e.selectRow?n("div",{domProps:{innerHTML:e._s(e.selectRow.html3)}}):e._e()]],2),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"vue"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},a=[],i=(n("5df3"),n("1c4c"),n("ac6a"),n("7f7f"),n("1487")),o=n.n(i),r={data:function(){var e=this,t=this.$createElement;return{loading:!1,showDetails:!1,selectRow:null,tableColumn:[{type:"index",width:50},{field:"name",title:"Name",slots:{default:function(n){var l=n.row,a=n.column;return[t("span",{style:"color: red;"},[l.name]),t("button",{on:{click:function(){return e.showDetailEvent(l,a)}}},["弹框"])]}}},{field:"sex",title:"Sex",showHeaderOverflow:!0,filters:[{data:""}],filterMethod:this.filterSexMethod,editRender:{type:"default"},slots:{default:function(e){var n=e.row;e.column;return[t("a",{class:"link",attrs:{href:"https://xuliangzhan.github.io/vxe-table/"}},["我是超链接：",n.sex])]},header:function(n){var l=n.column;return[t("span",[t("i",["@"]),t("span",{style:"color: red;",on:{click:e.headerClickEvent}},[l.title])])]},filter:function(n){var l=n.column,a=n.context;return l.filters.map((function(n){return t("input",{attrs:{type:"type"},domProps:{value:n.data},on:{input:function(t){return e.changeFilterEvent(t,n,a)}}})}))},edit:function(e){var n=e.row;return[t("input",{attrs:{type:"text"},domProps:{value:n.sex},on:{input:function(e){n.sex=e.target.value}}})]}}},{field:"address",title:"Address",slots:{default:function(t,n){var l=t.row;return[n("span",{style:{color:"blue"},on:{click:function(){return e.addressClickEvent(l)}}},l.address)]}}},{field:"html2",title:"Html片段",slots:{default:function(e,t){var n=e.row;return[t("span",{domProps:{innerHTML:n.html2}})]}}},{field:"img1",title:"图片路径",slots:{default:function(e,t){var n=e.row;return[n.img1?t("img",{attrs:{src:n.img1},style:"height: 40px;"}):t("span",["无"])]}}}],tableToolbar:{setting:!0,slots:{buttons:function(){return[t("button",["按钮"]),t("input",{attrs:{type:"text"}}),t("vxe-button",["按钮1"]),t("vxe-button",["按钮2"])]}}},demoCodes:['\n <vxe-grid\n border\n resizable\n show-overflow\n ref="xGrid"\n height="400"\n :loading="loading"\n :toolbar="tableToolbar"\n :columns="tableColumn"\n :edit-config="{trigger: \'click\', mode: \'cell\'}">\n </vxe-grid>\n\n <vxe-modal v-model="showDetails" title="查看详情" width="800" height="400" resize>\n <template>\n <div v-if="selectRow" v-html="selectRow.html3"></div>\n </template>\n </vxe-modal>\n ',"\n export default {\n data () {\n return {\n loading: false,\n showDetails: false,\n selectRow: null,\n tableColumn: [\n { type: 'index', width: 50 },\n {\n field: 'name',\n title: 'Name',\n slots: {\n default: ({ row, column }) => {\n return [\n <span style=\"color: red;\">{ row.name }</span>,\n <button onClick={ () => this.showDetailEvent(row, column) }>弹框</button>\n ]\n }\n }\n },\n {\n field: 'sex',\n title: 'Sex',\n showHeaderOverflow: true,\n filters: [{ data: '' }],\n filterMethod: this.filterSexMethod,\n editRender: { type: 'default' },\n slots: {\n default: ({ row, column }) => {\n return [\n <a class=\"link\" href=\"https://xuliangzhan.github.io/vxe-table/\">我是超链接：{ row.sex }</a>\n ]\n },\n header: ({ column }) => {\n return [\n <span>\n <i>@</i>\n <span style=\"color: red;\" onClick={ this.headerClickEvent }>{ column.title }</span>\n </span>\n ]\n },\n filter: ({ column, context }) => {\n return column.filters.map(option => {\n return <input type=\"type\" value={ option.data } onInput={ evnt => this.changeFilterEvent(evnt, option, context) }/>\n })\n },\n edit: ({ row }) => {\n return [\n <input type=\"text\" value={ row.sex } onInput={ evnt => { row.sex = evnt.target.value } }/>\n ]\n }\n }\n },\n {\n field: 'address',\n title: 'Address',\n slots: {\n default: ({ row }, h) => {\n return [\n h('span', {\n style: {\n color: 'blue'\n },\n on: {\n click: () => this.addressClickEvent(row)\n }\n }, row.address)\n ]\n }\n }\n },\n {\n field: 'html2',\n title: 'Html片段',\n slots: {\n default: ({ row }, h) => {\n return [\n <span domPropsInnerHTML={ row.html2 }></span>\n ]\n }\n }\n },\n {\n field: 'img1',\n title: '图片路径',\n slots: {\n default: ({ row }, h) => {\n return [\n row.img1 ? <img src={ row.img1 } style=\"width: 100px;\"/> : <span>无</span>\n ]\n }\n }\n }\n ],\n tableToolbar: {\n setting: true,\n slots: {\n buttons: () => {\n return [\n <button>按钮</button>,\n <input type=\"text\"/>,\n <vxe-button>按钮1</vxe-button>,\n <vxe-button>按钮2</vxe-button>\n ]\n }\n }\n },\n tableData: []\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.xGrid) {\n this.$refs.xGrid.loadData(tableData)\n }\n this.loading = false\n }, 500)\n },\n methods: {\n showDetailEvent (row) {\n this.selectRow = row\n this.showDetails = true\n },\n headerClickEvent (evnt) {\n this.$XModal.alert('头部点击事件')\n },\n addressClickEvent (row) {\n this.$XModal.alert(`address点击事件：${row.row}`)\n },\n filterSexMethod ({ option, row }) {\n return row.sex === option.data\n },\n changeFilterEvent (evnt, option, context) {\n option.data = evnt.target.value\n context.changeMultipleOption(evnt, !!option.data, option)\n }\n }\n }\n "]}},created:function(){var e=this;this.loading=!0,setTimeout((function(){var t=window.MOCK_DATA_LIST.slice(0,1e4);e.$refs.xGrid&&e.$refs.xGrid.loadData(t),e.loading=!1}),500)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))},methods:{showDetailEvent:function(e){this.selectRow=e,this.showDetails=!0},headerClickEvent:function(e){this.$XModal.alert("头部点击事件")},addressClickEvent:function(e){this.$XModal.alert("address点击事件：".concat(e.row))},filterSexMethod:function(e){var t=e.option,n=e.row;return n.sex===t.data},changeFilterEvent:function(e,t,n){t.data=e.target.value,n.changeMultipleOption(e,!!t.data,t)}}},s=r,d=n("2877"),c=Object(d["a"])(s,l,a,!1,null,null,null);t["default"]=c.exports},d291:function(e,t,n){"use strict";n.r(t);var l=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[n("span",{staticClass:"orange"},[e._v("虚拟滚动的取舍：牺牲提前编译数据的耗时，用来换取使用时的绝对流畅")]),n("br"),e._v("\n 如果列较多请使用 "),n("grid-api-link",{attrs:{name:"vxe-grid"}}),e._v("，使渲染性能达到最优，虚拟滚动只会渲染可视区域的数据，对于海量数据的性能提升非常大"),n("br"),e._v("\n 数据超大情况下必须使用："),n("table-api-link",{attrs:{prop:"show-overflow"}}),e._v("，"),n("table-api-link",{attrs:{prop:"show-header-overflow"}}),e._v(" 参数"),n("br"),e._v("\n 相关参数说明 {seq: 序号, $rowIndex: 获取渲染中的行索引, rowIndex: 获取真实的行索引, row: 获取行数据, column: 获取列配置, columnIndex: 获取真实列索引，$columnIndex:获取渲染中的列索引}\n ")],1),n("vxe-table",{attrs:{border:"","highlight-hover-row":"",height:"300",data:e.tableData}},[n("vxe-table-column",{attrs:{type:"index",width:"100"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:""}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")]),n("p",{staticClass:"tip"},[e._v("\n 手动调优，默认自动优化（"),n("span",{staticClass:"red"},[e._v("注：默认的优化一般情况下是最流畅的，如果某些场景下需要手动调优就自行去更改参数即可，至于流不流畅取决于渲染参数")]),e._v("）"),n("br"),e._v("\n 通过指定 "),n("table-api-link",{attrs:{prop:"optimization"}}),e._v(" ：{"),n("table-api-link",{attrs:{prop:"scrollX"}}),e._v(","),n("table-api-link",{attrs:{prop:"scrollY"}}),e._v("} 适合的参数可以手动调优"),n("br"),e._v("\n 数据超大情况下必须使用："),n("table-api-link",{attrs:{prop:"show-overflow"}}),e._v("，"),n("table-api-link",{attrs:{prop:"show-header-overflow"}}),e._v(" 参数\n ")],1),n("vxe-table",{ref:"xTable",attrs:{border:"","show-overflow":"",height:"300",optimization:{scrollX:{gt:40},scrollY:{gt:200,rSize:60}}}},[n("vxe-table-column",{attrs:{type:"index",width:"100"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:""}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),e._m(0),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n ")])],1)},a=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("pre",[e._v(" "),n("code",[e._v("\n | Arrow Up ↑ | 匀速向上滚动数据 |\n | Arrow Down ↓ | 匀速向下滚动数据 |\n | Arrow Left ← | 匀速向左滚动数据 |\n | Arrow Right → | 匀速向右滚动数据 |\n | Spacebar | 翻页滚动 |\n | ctrl + Home | 滚动到顶部 |\n | ctrl + End | 滚动到底部 |\n ")]),e._v("\n ")])}],i=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),o=n.n(i),r={data:function(){return{tableData:[],demoCodes:['\n <vxe-table\n border\n highlight-hover-row\n height="300"\n :data="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 :optimization="{scrollX: {gt: 40}, scrollY: {gt: 200, rSize: 60}}">\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=n("2877"),c=Object(d["a"])(s,l,a,!1,null,null,null);t["default"]=c.exports},e261:function(e,t,n){"use strict";n.r(t);var l=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div")},a=[],i=n("2877"),o={},r=Object(i["a"])(o,l,a,!1,null,null,null);t["default"]=r.exports},e985:function(e,t,n){"use strict";n.r(t);var l=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div")},a=[],i=n("2877"),o={},r=Object(i["a"])(o,l,a,!1,null,null,null);t["default"]=r.exports}}]);
Reference in New Issue View Git Blame Copy Permalink