/
scroll.cd73ab72.js
1 lines (1 loc) · 129 KB
/
scroll.cd73ab72.js
1
(window["webpackJsonpVXETable"]=window["webpackJsonpVXETable"]||[]).push([["scroll"],{"07b6":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:{loading:e.loading},scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.loadList(20)}}},[e._v("+20条")]),n("vxe-button",{on:{click:function(t){return e.loadList(100)}}},[e._v("+100条")]),n("vxe-button",{on:{click:function(t){return e.loadList(500)}}},[e._v("+500条")]),n("vxe-button",{on:{click:function(t){return e.loadList(1e3)}}},[e._v("+1000条")]),n("vxe-button",{on:{click:function(t){return e.loadList(2e3)}}},[e._v("+2000条")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTable.scrollTo(null,4e3)}}},[e._v("y=4000")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTable.clearScroll()}}},[e._v("清除滚动状态")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable",attrs:{border:"",resizable:"","show-overflow":"",height:"500","row-id":"id",loading:e.loading}},[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:"role",title:"Role"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"date",title:"Date"}}),n("vxe-table-column",{attrs:{field:"address",title:"Address"}})],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 虚拟滚动渲染，局部递增数据"),n("br")])}],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{loading:!1,demoCodes:['\n <vxe-toolbar :loading="loading">\n <template v-slot:buttons>\n <vxe-button @click="loadList(20)">+20条</vxe-button>\n <vxe-button @click="loadList(100)">+100条</vxe-button>\n <vxe-button @click="loadList(500)">+500条</vxe-button>\n <vxe-button @click="loadList(1000)">+1000条</vxe-button>\n <vxe-button @click="loadList(2000)">+2000条</vxe-button>\n <vxe-button @click="$refs.xTable.scrollTo(null, 4000)">y=4000</vxe-button>\n <vxe-button @click="$refs.xTable.clearScroll()">清除滚动状态</vxe-button>\n </template>\n </vxe-toolbar>\n\n <vxe-table\n ref="xTable"\n border\n resizable\n show-overflow\n height="500"\n row-id="id"\n :loading="loading">\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="role" title="Role"></vxe-table-column>\n <vxe-table-column field="age" title="Age"></vxe-table-column>\n <vxe-table-column field="date" title="Date"></vxe-table-column>\n <vxe-table-column field="address" title="Address"></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n loading: false\n }\n },\n created () {\n // 动态定义，阻断 vue 对大数据双向绑定，提升加载速度\n this.allData = []\n this.loadList(600)\n },\n methods: {\n loadList (size) {\n this.loading = true\n this.findList(size).then(data => {\n this.allData = this.allData.concat(data)// 局部追加并保存所有数据\n this.$refs.xTable.loadData(this.allData)\n this.loading = false\n })\n },\n findList (size) {\n return new Promise(resolve => {\n setTimeout(() => {\n var list = []\n for (var index = 0; index < size; index++) {\n list.push({\n id: this.$utils.uniqueId(),\n name: 'test' + index,\n role: 'developer',\n age: 10,\n date: '2019-05-01',\n address: 'address abc' + index\n })\n }\n resolve(list)\n }, 250)\n })\n }\n }\n }\n "]}},created:function(){this.allData=[],this.loadList(600)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},methods:{loadList:function(e){var t=this;this.loading=!0,this.findList(e).then((function(e){t.allData=t.allData.concat(e),t.$refs.xTable.loadData(t.allData),t.loading=!1}))},findList:function(e){var t=this;return new Promise((function(n){setTimeout((function(){for(var l=[],a=0;a<e;a++)l.push({id:t.$utils.uniqueId(),name:"test"+a,role:"developer",age:10,date:"2019-05-01",address:"address abc"+a});n(l)}),250)}))}}},s=r,c=n("2877"),d=Object(c["a"])(s,l,a,!1,null,null,null);t["default"]=d.exports},"248f":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("多页签切换，v-show 可以使用 "),n("table-api-link",{attrs:{prop:"auto-resize"}}),e._v(" 或者 "),n("table-api-link",{attrs:{prop:"sync-resize"}}),e._v(" 自动监听响应式宽，也可以手动调用 "),n("table-api-link",{attrs:{prop:"recalculate"}}),e._v(" 重新计算宽度")],1),n("p",[n("vxe-radio",{attrs:{name:"xtabs",label:"tab1"},model:{value:e.selectTab,callback:function(t){e.selectTab=t},expression:"selectTab"}},[e._v("页签1")]),n("vxe-radio",{attrs:{name:"xtabs",label:"tab2"},model:{value:e.selectTab,callback:function(t){e.selectTab=t},expression:"selectTab"}},[e._v("页签2")]),n("vxe-radio",{attrs:{name:"xtabs",label:"tab3"},model:{value:e.selectTab,callback:function(t){e.selectTab=t},expression:"selectTab"}},[e._v("页签3")])],1),n("div",{directives:[{name:"show",rawName:"v-show",value:"tab1"===e.selectTab,expression:"selectTab === 'tab1'"}]},[n("vxe-table",{attrs:{border:"","show-overflow":"",height:"400","sync-resize":"tab1"===e.selectTab,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"index",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1)],1),n("div",{directives:[{name:"show",rawName:"v-show",value:"tab2"===e.selectTab,expression:"selectTab === 'tab2'"}]},[n("vxe-table",{attrs:{border:"","show-overflow":"",height:"400","sync-resize":"tab2"===e.selectTab,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"radio",width:"60"}}),n("vxe-table-column",{attrs:{field:"role",title:"Rolw"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"num",title:"Num"}}),n("vxe-table-column",{attrs:{field:"date12",title:"Date"}})],1)],1),n("div",{directives:[{name:"show",rawName:"v-show",value:"tab3"===e.selectTab,expression:"selectTab === 'tab3'"}]},[n("vxe-table",{attrs:{border:"","show-overflow":"",height:"400","sync-resize":"tab3"===e.selectTab,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"checkbox",width:"60"}}),n("vxe-table-column",{attrs:{field:"nickname",title:"nickname"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"date12",title:"Date"}}),n("vxe-table-column",{attrs:{field:"region",title:"Region"}}),n("vxe-table-column",{attrs:{field:"rate",title:"Rate"}})],1)],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 ")])])},a=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{selectTab:"tab1",tableData:[],demoCodes:['\n <p>\n <vxe-radio v-model="selectTab" name="xtabs" label="tab1">页签1</vxe-radio>\n <vxe-radio v-model="selectTab" name="xtabs" label="tab2">页签2</vxe-radio>\n <vxe-radio v-model="selectTab" name="xtabs" label="tab3">页签3</vxe-radio>\n </p>\n\n <div v-show="selectTab === \'tab1\'">\n <vxe-table\n border\n show-overflow\n height="400"\n :sync-resize="selectTab === \'tab1\'"\n :data="tableData">\n <vxe-table-column type="index" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name"></vxe-table-column>\n <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n <vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>\n </vxe-table>\n </div>\n\n <div v-show="selectTab === \'tab2\'">\n <vxe-table\n border\n show-overflow\n height="400"\n :sync-resize="selectTab === \'tab2\'"\n :data="tableData">\n <vxe-table-column type="radio" width="60"></vxe-table-column>\n <vxe-table-column field="role" title="Rolw"></vxe-table-column>\n <vxe-table-column field="age" title="Age"></vxe-table-column>\n <vxe-table-column field="num" title="Num"></vxe-table-column>\n <vxe-table-column field="date12" title="Date"></vxe-table-column>\n </vxe-table>\n </div>\n\n <div v-show="selectTab === \'tab3\'">\n <vxe-table\n border\n show-overflow\n height="400"\n :sync-resize="selectTab === \'tab3\'"\n :data="tableData">\n <vxe-table-column type="checkbox" width="60"></vxe-table-column>\n <vxe-table-column field="nickname" title="nickname"></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="date12" title="Date"></vxe-table-column>\n <vxe-table-column field="region" title="Region"></vxe-table-column>\n <vxe-table-column field="rate" title="Rate"></vxe-table-column>\n </vxe-table>\n </div>\n ',"\n export default {\n data () {\n return {\n selectTab: 'tab1',\n tableData: []\n }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 1000)\n }\n }\n "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,1e3)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))}},s=r,c=n("2877"),d=Object(c["a"])(s,l,a,!1,null,null,null);t["default"]=d.exports},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},"checkbox-config":{checkField:"checked"}}},[n("vxe-table-column",{attrs:{type:"checkbox",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("当数据量非常大时，由于需要进行大量数据运算，所以数据校验或者获取数据...等函数执行会相对耗时")])])}],o=(n("8615"),n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),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 :checkbox-config="{checkField: \'checked\'}">\n <vxe-table-column type="checkbox" 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, 1000)\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){i.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,1e3);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,c=n("2877"),d=Object(c["a"])(s,l,a,!1,null,null,null);t["default"]=d.exports},"2f87":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",[e._v("子路由 3")]),n("vxe-table",{attrs:{border:"","show-overflow":"",height:"400",loading:e.loading,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"checkbox",width:"60"}}),n("vxe-table-column",{attrs:{field:"nickname",title:"nickname"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"date12",title:"Date"}}),n("vxe-table-column",{attrs:{field:"region",title:"Region"}}),n("vxe-table-column",{attrs:{field:"rate",title:"Rate"}})],1)],1)},a=[],o={data:function(){return{loading:!1,tableData:[]}},created:function(){var e=this;this.loading=!0,setTimeout((function(){e.tableData=window.MOCK_DATA_LIST.slice(0,1500),e.loading=!1}),300)}},i=o,r=n("2877"),s=Object(r["a"])(i,l,a,!1,null,null,null);t["default"]=s.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:{export:"",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(500))}}},[e._v("插入到 500 行")])]},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},"checkbox-config":{checkField:"checked"}}},[n("vxe-table-column",{attrs:{type:"checkbox",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("当数据量非常大时，由于需要进行大量数据运算，所以数据校验或者获取数据...等函数执行会相对耗时")])])}],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{loading:!1,demoCodes:['\n <vxe-toolbar export :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(500))">插入到 500 行</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 :checkbox-config="{checkField: \'checked\'}">\n <vxe-table-column type="checkbox" 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, 2000)\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){i.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,2e3);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,c=n("2877"),d=Object(c["a"])(s,l,a,!1,null,null,null);t["default"]=d.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=[],o=n("2877"),i={},r=Object(o["a"])(i,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:"checkbox"}}),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,toolbar:e.tableToolbar,"checkbox-config":{checkField:"checked",labelField:"nickname"}},scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.loadColumnAndData(1e4,1e5)}}},[e._v("加载1w列10w条")]),n("vxe-button",{on:{click:function(t){e.$refs.xGrid.toggleRowSelection(e.$refs.xGrid.getData(1))}}},[e._v("切换第二行选中")]),n("vxe-button",{on:{click:function(t){e.$refs.xGrid.setSelection([e.$refs.xGrid.getData(2),e.$refs.xGrid.getData(3)],!0)}}},[e._v("设置第三、四行选中")]),n("vxe-button",{on:{click:function(t){return e.$refs.xGrid.setAllSelection(!0)}}},[e._v("设置所有行选中")]),n("vxe-button",{on:{click:function(t){return e.$refs.xGrid.clearSelection()}}},[e._v("清除所有行选中")]),n("vxe-button",{on:{click:e.getSelectEvent}},[e._v("获取选中")])]},proxy:!0}])}),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 ")])}],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{loading:!1,tableToolbar:{},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 :toolbar="tableToolbar"\n :checkbox-config="{checkField: \'checked\', labelField: \'nickname\'}">\n <template v-slot:buttons>\n <vxe-button @click="loadColumnAndData(10000, 100000)">加载1w列10w条</vxe-button>\n <vxe-button @click="$refs.xGrid.toggleRowSelection($refs.xGrid.getData(1))">切换第二行选中</vxe-button>\n <vxe-button @click="$refs.xGrid.setSelection([$refs.xGrid.getData(2), $refs.xGrid.getData(3)], true)">设置第三、四行选中</vxe-button>\n <vxe-button @click="$refs.xGrid.setAllSelection(true)">设置所有行选中</vxe-button>\n <vxe-button @click="$refs.xGrid.clearSelection()">清除所有行选中</vxe-button>\n <vxe-button @click="getSelectEvent">获取选中</vxe-button>\n </template>\n </vxe-grid>\n ',"\n export default {\n data () {\n return {\n loading: false,\n tableToolbar: {}\n }\n },\n created () {\n this.loadColumnAndData(200, 600)\n },\n methods: {\n loadColumnAndData (colSize, rowSize) {\n this.loading = true\n Promise.all([\n this.loadColumn(colSize),\n this.loadList(rowSize)\n ]).then(() => {\n this.loading = false\n })\n },\n loadColumn (size) {\n return new Promise(resolve => {\n setTimeout(() => {\n // 使用函数式加载，阻断 vue 对大数组的双向绑定，大数据性能翻倍提升\n let tableColumn = window.MOCK_COLUMN_LIST.slice(0, size)\n this.$refs.xGrid.loadColumn(tableColumn).then(() => {\n resolve()\n })\n }, 300)\n })\n },\n loadList (size) {\n return new Promise(resolve => {\n setTimeout(() => {\n // 使用函数式加载，阻断 vue 对大数组的双向绑定，大数据性能翻倍提升\n let tableData = window.MOCK_DATA_LIST.slice(0, size)\n this.$refs.xGrid.reloadData(tableData).then(() => {\n resolve()\n })\n }, 300)\n })\n },\n getSelectEvent () {\n let selectRecords = this.$refs.xGrid.getSelectRecords()\n this.$XModal.alert(selectRecords.length)\n }\n }\n }\n "]}},created:function(){this.loadColumnAndData(200,600)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},methods:{loadColumnAndData:function(e,t){var n=this;this.loading=!0,Promise.all([this.loadColumn(e),this.loadList(t)]).then((function(){n.loading=!1}))},loadColumn:function(e){var t=this;return new Promise((function(n){setTimeout((function(){var l=window.MOCK_COLUMN_LIST.slice(0,e);t.$refs.xGrid.loadColumn(l).then((function(){n()}))}),300)}))},loadList:function(e){var t=this;return new Promise((function(n){setTimeout((function(){var l=window.MOCK_DATA_LIST.slice(0,e);t.$refs.xGrid.reloadData(l).then((function(){n()}))}),300)}))},getSelectEvent:function(){var e=this.$refs.xGrid.getSelectRecords();this.$XModal.alert(e.length)}}},s=r,c=n("2877"),d=Object(c["a"])(s,l,a,!1,null,null,null);t["default"]=d.exports},"5ffd":function(e,t,n){"use strict";var l=n("614a"),a=n.n(l);a.a},"614a":function(e,t,n){},"6c5b":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",[e._v("子路由 1")]),n("vxe-table",{attrs:{border:"","show-overflow":"",height:"400",loading:e.loading,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"index",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1)],1)},a=[],o={data:function(){return{loading:!1,tableData:[]}},created:function(){var e=this;this.loading=!0,setTimeout((function(){e.tableData=window.MOCK_DATA_LIST.slice(0,600),e.loading=!1}),300)}},i=o,r=n("2877"),s=Object(r["a"])(i,l,a,!1,null,null,null);t["default"]=s.exports},"85ef":function(e,t,n){"use strict";var l=n("b87e"),a=n.n(l);a.a},"8f6a":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:{loading:e.loading},scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.loadList(20)}}},[e._v("+20条")]),n("vxe-button",{on:{click:function(t){return e.loadList(50)}}},[e._v("+50条")]),n("vxe-button",{on:{click:function(t){return e.loadList(100)}}},[e._v("+100条")]),n("vxe-button",{on:{click:function(t){return e.loadList(200)}}},[e._v("+200条")]),n("vxe-button",{on:{click:function(t){return e.loadList(300)}}},[e._v("+300条")]),n("vxe-button",{on:{click:function(t){return e.loadColumns(10)}}},[e._v("+10列")]),n("vxe-button",{on:{click:function(t){return e.loadColumns(30)}}},[e._v("+30列")]),n("vxe-button",{on:{click:function(t){return e.loadColumns(50)}}},[e._v("+50列")]),n("vxe-button",{on:{click:function(t){return e.$refs.xGrid.scrollTo(1e3,2e3)}}},[e._v("x=1000,y=2000")]),n("vxe-button",{on:{click:function(t){return e.$refs.xGrid.scrollTo(2e3,6e3)}}},[e._v("x=2000,y=6000")]),n("vxe-button",{on:{click:function(t){return e.$refs.xGrid.clearScroll()}}},[e._v("清除滚动状态")])]},proxy:!0}])}),n("vxe-grid",{ref:"xGrid",attrs:{border:"","show-overflow":"","show-header-overflow":"",height:"500","row-id":"id","checkbox-config":{checkField:"checked",labelField:"id"},loading:e.loading}}),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 虚拟滚动渲染，更加复杂局部递增数据、局部递增列、固定列"),n("br")])}],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{loading:!1,colIndex:0,rowIndex:1,demoCodes:['\n <vxe-toolbar :loading="loading">\n <template v-slot:buttons>\n <vxe-button @click="loadList(20)">+20条</vxe-button>\n <vxe-button @click="loadList(50)">+50条</vxe-button>\n <vxe-button @click="loadList(100)">+100条</vxe-button>\n <vxe-button @click="loadList(200)">+200条</vxe-button>\n <vxe-button @click="loadList(300)">+300条</vxe-button>\n <vxe-button @click="loadColumns(10)">+10列</vxe-button>\n <vxe-button @click="loadColumns(30)">+30列</vxe-button>\n <vxe-button @click="loadColumns(50)">+50列</vxe-button>\n <vxe-button @click="$refs.xGrid.scrollTo(1000, 2000)">x=1000,y=2000</vxe-button>\n <vxe-button @click="$refs.xGrid.scrollTo(2000, 6000)">x=2000,y=6000</vxe-button>\n <vxe-button @click="$refs.xGrid.clearScroll()">清除滚动状态</vxe-button>\n </template>\n </vxe-toolbar>\n\n <vxe-grid\n border\n show-overflow\n show-header-overflow\n ref="xGrid"\n height="500"\n row-id="id"\n :checkbox-config="{checkField: \'checked\', labelField: \'id\'}"\n :loading="loading">\n </vxe-grid>\n ',"\n export default {\n data () {\n return {\n loading: false,\n colIndex: 0,\n rowIndex: 0\n }\n },\n created () {\n // 动态定义，阻断 vue 对大数据双向绑定，提升加载速度\n this.allData = []\n this.allColumn = []\n this.init()\n },\n methods: {\n init () {\n this.loading = true\n Promise.all([\n this.findColumnList(200).then(data => {\n this.allColumn = this.allData.concat(data)\n this.$refs.xGrid.loadColumn(this.allColumn)\n }),\n this.findDataList(600).then(data => {\n this.allData = this.allData.concat(data)\n this.$refs.xGrid.loadData(this.allData)\n })\n ]).then(() => {\n this.loading = false\n })\n },\n loadColumns (size) {\n this.loading = true\n this.findColumnList(size).then(data => {\n this.allColumn = this.allColumn.concat(data)// 局部追加并保存全量数据\n this.$refs.xGrid.loadColumn(this.allColumn)\n this.loading = false\n })\n },\n loadList (size) {\n this.loading = true\n this.findDataList(size).then(data => {\n this.allData = this.allData.concat(data)// 局部追加并保存全量数据\n this.$refs.xGrid.loadData(this.allData)\n this.loading = false\n })\n },\n findColumnList (size) {\n return new Promise(resolve => {\n setTimeout(() => {\n var columns = []\n for (var index = 0; index < size; index++) {\n let key = this.colIndex++\n let config = {\n field: key ? `col_${key}` : 'id',\n title: key ? `标题_${key}` : 'ID',\n width: 140\n }\n if (!key) {\n config.type = 'checkbox'\n }\n if (key < 2) {\n config.type = 'checkbox'\n config.fixed = 'left'\n }\n columns.push(config)\n }\n resolve(columns)\n }, 250)\n })\n },\n findDataList (size) {\n return new Promise(resolve => {\n setTimeout(() => {\n var list = []\n for (var index = 0; index < size; index++) {\n let key = this.$utils.uniqueId()\n let item = { id: key, checked: false }\n // 由于生成数据比较耗时，所以固定生成1000字段\n Array.from(new Array(1000)).forEach((num, cIndex) => {\n item[`col_${cIndex}`] = `内容_${cIndex}_${index}`\n })\n list.push(item)\n }\n resolve(list)\n }, 250)\n })\n }\n }\n }\n "]}},created:function(){this.allData=[],this.allColumn=[],this.init()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},methods:{init:function(){var e=this;this.loading=!0,Promise.all([this.findColumnList(200).then((function(t){e.allColumn=e.allData.concat(t),e.$refs.xGrid.loadColumn(e.allColumn)})),this.findDataList(600).then((function(t){e.allData=e.allData.concat(t),e.$refs.xGrid.loadData(e.allData)}))]).then((function(){e.loading=!1}))},loadColumns:function(e){var t=this;this.loading=!0,this.findColumnList(e).then((function(e){t.allColumn=t.allColumn.concat(e),t.$refs.xGrid.loadColumn(t.allColumn),t.loading=!1}))},loadList:function(e){var t=this;this.loading=!0,this.findDataList(e).then((function(e){t.allData=t.allData.concat(e),t.$refs.xGrid.loadData(t.allData),t.loading=!1}))},findColumnList:function(e){var t=this;return new Promise((function(n){setTimeout((function(){for(var l=[],a=0;a<e;a++){var o=t.colIndex++,i={field:o?"col_".concat(o):"id",title:o?"标题_".concat(o):"ID",width:140};o||(i.type="checkbox"),o<2&&(i.fixed="left"),l.push(i)}n(l)}),250)}))},findDataList:function(e){var t=this;return new Promise((function(n){setTimeout((function(){for(var l=[],a=function(){var e=t.rowIndex++,n={id:e,checked:!1};Array.from(new Array(1e3)).forEach((function(e,t){n["col_".concat(t)]="内容_".concat(t,"_").concat(o)})),l.push(n)},o=0;o<e;o++)a();n(l)}),250)}))}}},s=r,c=n("2877"),d=Object(c["a"])(s,l,a,!1,null,null,null);t["default"]=d.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,"checkbox-config":{checkField:"checked",labelField:"nickname"}},scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.loadColumnAndData(1e4,1e4)}}},[e._v("加载1w列1w条")])]},proxy:!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=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),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 :checkbox-config="{checkField: \'checked\', labelField: \'nickname\'}">\n <template v-slot:buttons>\n <vxe-button @click="loadColumnAndData(10000, 10000)">加载1w列1w条</vxe-button>\n </template>\n </vxe-grid>\n ',"\n export default {\n data () {\n return {\n loading: false\n }\n },\n created () {\n this.loadColumnAndData(200, 600)\n },\n methods: {\n loadColumnAndData (colSize, rowSize) {\n this.loading = true\n Promise.all([\n this.loadColumn(colSize),\n this.loadList(rowSize)\n ]).then(() => {\n this.loading = false\n })\n },\n loadColumn (size) {\n return new Promise(resolve => {\n setTimeout(() => {\n // 使用函数式加载，阻断 vue 对大数组的双向绑定，大数据性能翻倍提升\n let tableColumn = window.MOCK_COLUMN_LIST.slice(0, size)\n this.$refs.xGrid.loadColumn(tableColumn).then(() => {\n resolve()\n })\n }, 300)\n })\n },\n loadList (size) {\n return new Promise(resolve => {\n setTimeout(() => {\n // 使用函数式加载，阻断 vue 对大数组的双向绑定，大数据性能翻倍提升\n let tableData = window.MOCK_DATA_LIST.slice(0, size)\n this.$refs.xGrid.reloadData(tableData).then(() => {\n resolve()\n })\n }, 300)\n })\n }\n }\n }\n "]}},created:function(){this.loadColumnAndData(200,600)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},methods:{loadColumnAndData:function(e,t){var n=this;this.loading=!0,Promise.all([this.loadColumn(e),this.loadList(t)]).then((function(){n.loading=!1}))},loadColumn:function(e){var t=this;return new Promise((function(n){setTimeout((function(){var l=window.MOCK_COLUMN_LIST.slice(0,e);t.$refs.xGrid.loadColumn(l).then((function(){n()}))}),300)}))},loadList:function(e){var t=this;return new Promise((function(n){setTimeout((function(){var l=window.MOCK_DATA_LIST.slice(0,e);t.$refs.xGrid.reloadData(l).then((function(){n()}))}),300)}))}}},s=r,c=n("2877"),d=Object(c["a"])(s,l,a,!1,null,null,null);t["default"]=d.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},"checkbox-config":{checkField:"checked"}}},[n("vxe-table-column",{attrs:{type:"checkbox",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("当数据量非常大时，由于需要进行大量数据运算，所以数据校验或者获取数据...等函数执行会相对耗时")])])}],o=(n("8615"),n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),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 :checkbox-config="{checkField: \'checked\'}">\n <vxe-table-column type="checkbox" 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, 1000)\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){i.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,1e3);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,c=n("2877"),d=Object(c["a"])(s,l,a,!1,null,null,null);t["default"]=d.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},"checkbox-config":{checkField:"checked"}}},[n("vxe-table-column",{attrs:{type:"checkbox",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 ")])}],o=(n("8615"),n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),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 :checkbox-config="{checkField: \'checked\'}">\n <vxe-table-column type="checkbox" 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, 2000)\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){i.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,2e3);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,c=n("2877"),d=Object(c["a"])(s,l,a,!1,null,null,null);t["default"]=d.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 ")])}],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),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, 2000)\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,2e3);e.$refs.xTable&&e.$refs.xTable.loadData(t),e.loading=!1}),300)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))}},s=r,c=n("2877"),d=Object(c["a"])(s,l,a,!1,null,null,null);t["default"]=d.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:"checkbox"}}),e._v(" 当数据量海量时应该绑定 "),n("table-api-link",{attrs:{prop:"checkField"}}),e._v(" 属性渲染速度更快"),n("br"),n("span",{staticClass:"red"},[e._v("注意：如果要启用纵向虚拟滚动，所有的行高必须一致，否则无法兼容")])],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.loadList(1e5)}}},[e._v("加载10w条")]),n("vxe-button",{on:{click:function(t){e.$refs.xTable.toggleRowSelection(e.$refs.xTable.getData(1))}}},[e._v("切换第二行选中")]),n("vxe-button",{on:{click:function(t){e.$refs.xTable.setSelection([e.$refs.xTable.getData(2),e.$refs.xTable.getData(3)],!0)}}},[e._v("设置第三、四行选中")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTable.setAllSelection(!0)}}},[e._v("设置所有行选中")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTable.clearSelection()}}},[e._v("清除所有行选中")]),n("vxe-button",{on:{click:e.getSelectEvent}},[e._v("获取选中")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable",attrs:{border:"",resizable:"","show-overflow":"","show-header-overflow":"","highlight-hover-row":"","highlight-current-row":"",height:"600",loading:e.loading,"checkbox-config":{checkField:"checked"}}},[n("vxe-table-column",{attrs:{type:"checkbox",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 ")])}],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{loading:!1,demoCodes:['\n <vxe-toolbar>\n <template v-slot:buttons>\n <vxe-button @click="loadList(100000)">加载10w条</vxe-button>\n <vxe-button @click="$refs.xTable.toggleRowSelection($refs.xTable.getData(1))">切换第二行选中</vxe-button>\n <vxe-button @click="$refs.xTable.setSelection([$refs.xTable.getData(2), $refs.xTable.getData(3)], true)">设置第三、四行选中</vxe-button>\n <vxe-button @click="$refs.xTable.setAllSelection(true)">设置所有行选中</vxe-button>\n <vxe-button @click="$refs.xTable.clearSelection()">清除所有行选中</vxe-button>\n <vxe-button @click="getSelectEvent">获取选中</vxe-button>\n </template>\n </vxe-toolbar>\n\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 :checkbox-config="{checkField: \'checked\'}">\n <vxe-table-column type="checkbox" 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.loadList(600)\n },\n methods: {\n loadList (size) {\n this.loading = true\n setTimeout(() => {\n let xTable = this.$refs.xTable\n if (xTable) {\n // 使用函数式加载，阻断 vue 对大数组的双向绑定，大数据性能翻倍提升\n xTable.reloadData(window.MOCK_DATA_LIST.slice(0, size)).then(() => {\n this.loading = false\n })\n } else {\n this.loading = false\n }\n }, 300)\n },\n getSelectEvent () {\n let selectRecords = this.$refs.xTable.getSelectRecords()\n this.$XModal.alert(selectRecords.length)\n }\n }\n }\n "]}},created:function(){this.loadList(600)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},methods:{loadList:function(e){var t=this;this.loading=!0,setTimeout((function(){var n=t.$refs.xTable;n?n.reloadData(window.MOCK_DATA_LIST.slice(0,e)).then((function(){t.loading=!1})):t.loading=!1}),300)},getSelectEvent:function(){var e=this.$refs.xTable.getSelectRecords();this.$XModal.alert(e.length)}}},s=r,c=n("2877"),d=Object(c["a"])(s,l,a,!1,null,null,null);t["default"]=d.exports},b87e:function(e,t,n){},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-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.loadList(1e4)}}},[e._v("加载1w条")])]},proxy:!0}])}),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=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{loading:!1,demoCodes:['\n <vxe-toolbar>\n <template v-slot:buttons>\n <vxe-button @click="loadList(10000)">加载1w条</vxe-button>\n </template>\n </vxe-toolbar>\n\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.loadList(600)\n },\n methods: {\n loadList (size) {\n this.loading = true\n setTimeout(() => {\n let xTable = this.$refs.xTable\n if (xTable) {\n // 使用函数式加载，阻断 vue 对大数组的双向绑定，大数据性能翻倍提升\n xTable.reloadData(window.MOCK_DATA_LIST.slice(0, size)).then(() => {\n this.loading = false\n })\n } else {\n this.loading = false\n }\n }, 300)\n }\n }\n }\n "]}},created:function(){this.loadList(600)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},methods:{loadList:function(e){var t=this;this.loading=!0,setTimeout((function(){var n=t.$refs.xTable;n?n.reloadData(window.MOCK_DATA_LIST.slice(0,e)).then((function(){t.loading=!1})):t.loading=!1}),300)}}},s=r,c=n("2877"),d=Object(c["a"])(s,l,a,!1,null,null,null);t["default"]=d.exports},c7cb: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",[e._v("子路由 2")]),n("vxe-table",{attrs:{border:"","show-overflow":"",height:"400",loading:e.loading,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"radio",width:"60"}}),n("vxe-table-column",{attrs:{field:"role",title:"Rolw"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"num",title:"Num"}}),n("vxe-table-column",{attrs:{field:"date12",title:"Date"}})],1)],1)},a=[],o={data:function(){return{loading:!1,tableData:[]}},created:function(){var e=this;this.loading=!0,setTimeout((function(){e.tableData=window.MOCK_DATA_LIST.slice(0,1e3),e.loading=!1}),300)}},i=o,r=n("2877"),s=Object(r["a"])(i,l,a,!1,null,null,null);t["default"]=s.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=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("7f7f"),n("1487")),i=n.n(o),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, 1000)\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,1e3);e.$refs.xGrid&&e.$refs.xGrid.loadData(t),e.loading=!1}),500)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.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,c=n("2877"),d=Object(c["a"])(s,l,a,!1,null,null,null);t["default"]=d.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:"","show-overflow":"","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}}}},[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 ")])}],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],demoCodes:['\n <vxe-table\n border\n show-overflow\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, 600)\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}}">\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, 1000))\n })\n }\n }\n "]}},created:function(){var e=this;this.tableData=window.MOCK_DATA_LIST.slice(0,600),this.$nextTick((function(){e.$refs.xTable.reloadData(window.MOCK_DATA_LIST.slice(0,1e3))}))},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))}},s=r,c=n("2877"),d=Object(c["a"])(s,l,a,!1,null,null,null);t["default"]=d.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",[n("p",{staticClass:"tip"},[e._v("虚拟树封装原理可供参考：实现支持大数据的虚拟树表格，基于表格组件很容易就可以封装一个高性能的虚拟树")]),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.setAllTreeExpansion(!0)}}},[e._v("展开所有")]),n("vxe-button",{on:{click:function(t){return e.setAllTreeExpansion(!1)}}},[e._v("收起所有")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable",attrs:{resizable:"","show-overflow":"",height:"500","row-id":"id",loading:e.loading}},[n("vxe-table-column",{attrs:{type:"index",width:"100"}}),n("vxe-table-column",{attrs:{field:"name",title:"省市区"},scopedSlots:e._u([{key:"default",fn:function(t){var l=t.row;return[n("span",{class:["level-"+l.level],style:{paddingLeft:l.level*e.treeIndent+"px"}},[n("i",{staticClass:"virtual-tree-icon",class:["vxe-icon--arrow-"+(l.expand?"bottom":"right"),{visible:l.children&&l.children.length}],on:{click:function(t){return e.toggleTreeExpansion(l)}}}),n("span",[e._v(e._s(l.name))])])]}}])}),n("vxe-table-column",{attrs:{field:"id",title:"邮政编码"}})],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("code",{staticClass:"css"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n ")])],1)},a=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{loading:!1,treeConfig:{children:"children"},treeIndent:16,demoCodes:['\n <vxe-toolbar>\n <template v-slot:buttons>\n <vxe-button @click="setAllTreeExpansion(true)">展开所有</vxe-button>\n <vxe-button @click="setAllTreeExpansion(false)">收起所有</vxe-button>\n </template>\n </vxe-toolbar>\n\n <vxe-table\n ref="xTable"\n resizable\n show-overflow\n height="500"\n row-id="id"\n :loading="loading">\n <vxe-table-column type="index" width="100"></vxe-table-column>\n <vxe-table-column field="name" title="省市区">\n <template v-slot="{ row }">\n <span :class="[`level-${row.level}`]" :style="{paddingLeft: `${row.level * treeIndent}px`}">\n <i\n class="virtual-tree-icon"\n :class="[`vxe-icon--arrow-${ row.expand ? \'bottom\' : \'right\' }`, {visible: row.children && row.children.length}]"\n @click="toggleTreeExpansion(row)"></i>\n <span>{{ row.name }}</span>\n </span>\n </template>\n </vxe-table-column>\n <vxe-table-column field="id" title="邮政编码"></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n loading: false,\n treeConfig: {\n children: 'children'\n },\n treeIndent: 16\n }\n },\n created () {\n this.findCityAll()\n },\n methods: {\n findCityAll () {\n this.loading = true\n this.$ajax.getJSON('/api/conf/city/all').then(data => {\n const list = this.toVirtualTree(data)\n this.$refs.xTable.reloadData(list)\n this.loading = false\n })\n },\n setAllTreeExpansion (expand) {\n let list = this.virtualAllExpand(expand)\n this.$refs.xTable.reloadData(list)\n },\n toggleTreeExpansion (row) {\n let list = this.virtualExpand(row, !row.expand)\n this.$refs.xTable.loadData(list)\n },\n // 通用虚拟树方法-定义树属性\n toVirtualTree (treeData) {\n this.$utils.eachTree(treeData, (item, index, obj, paths, parent, nodes) => {\n item.expand = false\n item.level = nodes.length - 1\n })\n this.treeData = treeData.slice(0)\n this.tableData = treeData.slice(0)\n return treeData\n },\n // 通用虚拟树方法-展开/收起树节点\n virtualExpand (row, expand) {\n if (row.expand !== expand) {\n let children = row.children\n if (children && children.length) {\n let tableData = this.tableData\n if (row.expand) {\n // 展开节点\n let childList = []\n this.$utils.eachTree(children, item => {\n childList.push(item)\n }, this.treeConfig)\n tableData = tableData.filter(item => childList.indexOf(item) === -1)\n } else {\n // 收起节点\n let expandList = []\n let rowIndex = tableData.indexOf(row)\n if (rowIndex === -1) {\n throw new Error('错误的操作！')\n }\n this.$utils.eachTree(children, (item, index, obj, paths, parent, nodes) => {\n if (!parent || parent.expand) {\n expandList.push(item)\n }\n }, this.treeConfig)\n tableData.splice.apply(tableData, [rowIndex + 1, 0].concat(expandList))\n }\n row.expand = !row.expand\n this.tableData = tableData\n }\n }\n return this.tableData\n },\n // 通用虚拟树方法-展开/收起所有树节点\n virtualAllExpand (expand) {\n this.$utils.eachTree(this.treeData, row => {\n this.virtualExpand(row, expand)\n }, this.treeConfig)\n return this.tableData\n }\n }\n }\n ","\n .virtual-tree-icon {\n visibility: hidden;\n cursor: pointer;\n margin-right: 4px;\n }\n .virtual-tree-icon.visible {\n visibility: visible;\n }\n "]}},created:function(){this.findCityAll()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},methods:{findCityAll:function(){var e=this;this.loading=!0,this.$ajax.getJSON("/api/conf/city/all").then((function(t){var n=e.toVirtualTree(t);e.$refs.xTable.reloadData(n),e.loading=!1}))},setAllTreeExpansion:function(e){var t=this.virtualAllExpand(e);this.$refs.xTable.reloadData(t)},toggleTreeExpansion:function(e){var t=this.virtualExpand(e,!e.expand);this.$refs.xTable.loadData(t)},toVirtualTree:function(e){return this.$utils.eachTree(e,(function(e,t,n,l,a,o){e.expand=!1,e.level=o.length-1})),this.treeData=e.slice(0),this.tableData=e.slice(0),e},virtualExpand:function(e,t){if(e.expand!==t){var n=e.children;if(n&&n.length){var l=this.tableData;if(e.expand){var a=[];this.$utils.eachTree(n,(function(e){a.push(e)}),this.treeConfig),l=l.filter((function(e){return-1===a.indexOf(e)}))}else{var o=[],i=l.indexOf(e);if(-1===i)throw new Error("错误的操作！");this.$utils.eachTree(n,(function(e,t,n,l,a,i){a&&!a.expand||o.push(e)}),this.treeConfig),l.splice.apply(l,[i+1,0].concat(o))}e.expand=!e.expand,this.tableData=l}}return this.tableData},virtualAllExpand:function(e){var t=this;return this.$utils.eachTree(this.treeData,(function(n){t.virtualExpand(n,e)}),this.treeConfig),this.tableData}}},s=r,c=(n("5ffd"),n("2877")),d=Object(c["a"])(s,l,a,!1,null,"2013cde8",null);t["default"]=d.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=[],o=n("2877"),i={},r=Object(o["a"])(i,l,a,!1,null,null,null);t["default"]=r.exports},f236: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("keep-alive 切换，v-show 可以使用 "),n("table-api-link",{attrs:{prop:"auto-resize"}}),e._v(" 或者 "),n("table-api-link",{attrs:{prop:"sync-resize"}}),e._v(" 自动监听响应式宽，也可以手动调用 "),n("table-api-link",{attrs:{prop:"recalculate"}}),e._v(" 重新计算宽度")],1),n("p",{staticClass:"btns"},[n("router-link",{staticClass:"link",attrs:{to:{name:"TableScrollKeepAliveTable1"}}},[e._v("表格1")]),n("router-link",{staticClass:"link",attrs:{to:{name:"TableScrollKeepAliveTable2"}}},[e._v("表格2")]),n("router-link",{staticClass:"link",attrs:{to:{name:"TableScrollKeepAliveTable3"}}},[e._v("表格3")])],1),n("keep-alive",[n("router-view")],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 ")])],1)},a=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{demoCodes:['\n <p class="btns">\n <router-link class="link" :to="{name: \'TableKeepAliveTable1\'}">表格1</router-link>\n <router-link class="link" :to="{name: \'TableKeepAliveTable2\'}">表格2</router-link>\n <router-link class="link" :to="{name: \'TableKeepAliveTable3\'}">表格3</router-link>\n </p>\n\n <keep-alive>\n <router-view></router-view>\n </keep-alive>\n ']}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))}},s=r,c=(n("85ef"),n("2877")),d=Object(c["a"])(s,l,a,!1,null,"8046d6ee",null);t["default"]=d.exports}}]);