scroll.a227cfdf.js

(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      | 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}}]);