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