lxm_front/vxe-table
1
0
Fork 0
mirror of https://gitee.com/xuliangzhan_admin/vxe-table.git synced 2026-01-21 05:27:57 +08:00
Code Issues Projects Releases Wiki Activity
Files
0e30d9c84ca4d40fecbaadb68708b6b8df20d4bf
vxe-table/docs/static/js/scroll.fdfc7784.js
xuliangzhan 0e30d9c84c update
2019-06-27 21:01:37 +08:00

1 line
18 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
(window["webpackJsonpVXETable"]=window["webpackJsonpVXETable"]||[]).push([["scroll"],{4467:function(e,t,a){"use strict";a.r(t);var l=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("p",[e._v("虚拟滚动渲染，加载 10 万行 1 万列，左右固定列")]),a("p",[e._v("大数据不建议使用双向绑定的 "),a("table-api-link",{attrs:{name:"data"}}),e._v(" 属性（vue 监听会大数据会短暂的卡顿），建议使用 "),a("table-api-link",{attrs:{prop:"loadData"}}),e._v("/"),a("table-api-link",{attrs:{prop:"loadColumn"}}),e._v(" 函数")],1),a("p",[e._v("对于多选 type="),a("table-column-api-link",{attrs:{prop:"selection"}}),e._v(" 当数据量海量时应该绑定 "),a("table-api-link",{attrs:{prop:"checkProp"}}),e._v(" 属性渲染速度更快")],1),a("p",[e._v("数据超大情况下必须使用："),a("table-api-link",{attrs:{prop:"show-overflow"}}),e._v("，"),a("table-api-link",{attrs:{prop:"show-header-overflow"}}),e._v(" 参数以及调整好 "),a("table-api-link",{attrs:{prop:"optimization"}}),e._v(" ：{scrollX,scrollY} 适合的参数可以更加流畅")],1),a("vxe-grid",{ref:"xTable",attrs:{border:"",resizable:"","show-overflow":"","show-header-overflow":"","highlight-hover-row":"","highlight-current-row":"",height:"600",loading:e.loading,"select-config":{checkProp:"checked"},optimization:{scrollX:{gt:20,oSize:4,rSize:10},scrollY:{gt:500,oSize:20,rSize:60}}}})],1)},r=[],o={data:function(){return{loading:!1}},created:function(){var e=this;this.loading=!0,setTimeout(function(){var t=window.MOCK_DATA_LIST.slice(0,1e5),a=window.MOCK_COLUMN_LIST.slice(0,1e4);e.$refs.xTable&&(e.$refs.xTable.loadColumn(a),e.$refs.xTable.loadData(t)),e.loading=!1},300)}},n=o,i=a("2877"),s=Object(i["a"])(n,l,r,!1,null,null,null);t["default"]=s.exports},"504c":function(e,t,a){var l=a("9e1e"),r=a("0d58"),o=a("6821"),n=a("52a7").f;e.exports=function(e){return function(t){var a,i=o(t),s=r(i),c=s.length,p=0,d=[];while(c>p)a=s[p++],l&&!n.call(i,a)||d.push(e?[a,i[a]]:i[a]);return d}}},8615:function(e,t,a){var l=a("5ca1"),r=a("504c")(!1);l(l.S,"Object",{values:function(e){return r(e)}})},"9b96":function(e,t,a){"use strict";a.r(t);var l=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("p",[e._v("虚拟滚动渲染，加载 1 万行 1 万列")]),a("p",[e._v("大数据不建议使用双向绑定的 "),a("table-api-link",{attrs:{name:"data"}}),e._v(" 属性（vue 监听会大数据会短暂的卡顿），建议使用 "),a("table-api-link",{attrs:{prop:"loadData"}}),e._v("/"),a("table-api-link",{attrs:{prop:"loadColumn"}}),e._v(" 函数")],1),a("vxe-grid",{ref:"xTable",attrs:{border:"",resizable:"","show-overflow":"","show-header-overflow":"",height:"300",loading:e.loading,"select-config":{checkProp:"checked"},optimization:{scrollX:{gt:20,oSize:4,rSize:10},scrollY:{gt:500,oSize:10,rSize:30}}}})],1)},r=[],o={data:function(){return{loading:!1}},created:function(){var e=this;this.loading=!0,setTimeout(function(){var t=window.MOCK_DATA_LIST.slice(0,1e4),a=window.MOCK_COLUMN_LIST.slice(0,1e4).map(function(e){return Object.assign({},e,{fixed:void 0})});e.$refs.xTable&&(e.$refs.xTable.loadColumn(a),e.$refs.xTable.loadData(t)),e.loading=!1},500)}},n=o,i=a("2877"),s=Object(i["a"])(n,l,r,!1,null,null,null);t["default"]=s.exports},ac09:function(e,t,a){"use strict";a.r(t);var l=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("p",[e._v("虚拟滚动渲染，加载 10 万行，左右固定列")]),a("p",[e._v("大数据不建议使用双向绑定的 data 属性（vue 监听会大数据会短暂的卡顿），建议使用 "),a("table-api-link",{attrs:{prop:"loadData"}}),e._v("/"),a("table-api-link",{attrs:{prop:"reloadData"}}),e._v(" 函数")],1),a("p",[e._v("对于多选 type="),a("table-column-api-link",{attrs:{prop:"selection"}}),e._v(" 当数据量海量时应该绑定 "),a("table-api-link",{attrs:{prop:"checkProp"}}),e._v(" 属性渲染速度更快")],1),a("p",[e._v("数据超大情况下必须使用："),a("table-api-link",{attrs:{prop:"show-overflow"}}),e._v("，"),a("table-api-link",{attrs:{prop:"show-header-overflow"}}),e._v(" 参数以及调整好 "),a("table-api-link",{attrs:{prop:"optimization"}}),e._v(" ：{scrollX,scrollY} 适合的参数可以更加流畅")],1),a("vxe-table",{ref:"xTable",attrs:{border:"",resizable:"","show-overflow":"","highlight-hover-row":"","highlight-current-row":"",height:"600",loading:e.loading,"select-config":{checkProp:"checked"},optimization:{scrollY:{gt:500,oSize:20,rSize:60}}}},[a("vxe-table-column",{attrs:{type:"selection",width:"60",fixed:"left"}}),a("vxe-table-column",{attrs:{type:"index",width:"100",fixed:"left"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name",sortable:"",width:"200"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex",width:"200"}}),a("vxe-table-column",{attrs:{prop:"rate",label:"Rate",width:"200"}}),a("vxe-table-column",{attrs:{prop:"region",label:"Region",width:"200"}}),a("vxe-table-column",{attrs:{prop:"time",label:"Time",width:"200"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),a("vxe-table-column",{attrs:{prop:"updateTime",label:"UpdateTime",width:"200"}}),a("vxe-table-column",{attrs:{prop:"createTime",label:"CreateTime",width:"200"}}),a("vxe-table-column",{attrs:{prop:"attr1",label:"Attr1",width:"200"}}),a("vxe-table-column",{attrs:{prop:"attr2",label:"Attr2",width:"200"}}),a("vxe-table-column",{attrs:{prop:"attr3",label:"Attr3",width:"200"}}),a("vxe-table-column",{attrs:{prop:"attr4",label:"Attr4",width:"200"}}),a("vxe-table-column",{attrs:{prop:"attr5",label:"Attr5",width:"200"}}),a("vxe-table-column",{attrs:{prop:"attr6",label:"Attr6",width:"200"}}),a("vxe-table-column",{attrs:{prop:"attr7",label:"Attr7",width:"200"}}),a("vxe-table-column",{attrs:{prop:"attr8",label:"Attr8",width:"200"}}),a("vxe-table-column",{attrs:{prop:"attr9",label:"Attr9",width:"200"}}),a("vxe-table-column",{attrs:{prop:"createTime",label:"CreateTime",width:"200"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age",width:"200",fixed:"right"}})],1)],1)},r=[],o={data:function(){return{loading:!1}},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},300)}},n=o,i=a("2877"),s=Object(i["a"])(n,l,r,!1,null,null,null);t["default"]=s.exports},accd:function(e,t,a){"use strict";a.r(t);var l=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("p",[e._v("虚拟滚动渲染，加载 1 万行，左右固定列")]),a("p",[e._v("大数据不建议使用双向绑定的 "),a("table-api-link",{attrs:{name:"data"}}),e._v(" 属性（vue 监听会大数据会短暂的卡顿），建议使用 "),a("table-api-link",{attrs:{prop:"loadData"}}),e._v("/"),a("table-api-link",{attrs:{prop:"reloadData"}}),e._v(" 函数")],1),a("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[a("vxe-button",{on:{click:e.insertEvent}},[e._v("新增")]),a("vxe-button",{on:{click:e.validEvent}},[e._v("校验")]),a("vxe-button",{on:{click:e.fullValidEvent}},[e._v("完整校验")]),a("vxe-button",{on:{click:e.selectValidEvent}},[e._v("选中校验")]),a("vxe-button",{on:{click:e.getInsertEvent}},[e._v("获取新增")]),a("vxe-button",{on:{click:e.getRemoveEvent}},[e._v("获取删除")]),a("vxe-button",{on:{click:e.getUpdateEvent}},[e._v("获取修改")])]},proxy:!0}])}),a("vxe-table",{ref:"xTable",attrs:{border:"",resizable:"","show-overflow":"",height:"300",loading:e.loading,"edit-rules":e.validRules,"edit-config":{key:"id",trigger:"click",mode:"row"},optimization:{scrollY:{gt:500,oSize:10,rSize:30}}}},[e._v(">\n "),a("vxe-table-column",{attrs:{type:"index",width:"100"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name",sortable:"",width:"200","edit-render":{name:"input"}}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age",width:"200","edit-render":{name:"input"}}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex",width:"200","edit-render":{name:"input"}}}),a("vxe-table-column",{attrs:{prop:"rate",label:"Rate",width:"200"}}),a("vxe-table-column",{attrs:{prop:"region",label:"Region",width:"200"}}),a("vxe-table-column",{attrs:{prop:"time",label:"Time",width:"200"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address",width:"300","show-overflow":""}}),a("vxe-table-column",{attrs:{prop:"updateTime",label:"UpdateTime",width:"200"}}),a("vxe-table-column",{attrs:{prop:"createTime",label:"CreateTime",width:"200"}}),a("vxe-table-column",{attrs:{prop:"attr1",label:"Attr1",width:"200"}}),a("vxe-table-column",{attrs:{prop:"attr2",label:"Attr2",width:"200"}}),a("vxe-table-column",{attrs:{prop:"attr3",label:"Attr3",width:"200"}}),a("vxe-table-column",{attrs:{prop:"attr4",label:"Attr4",width:"200"}}),a("vxe-table-column",{attrs:{prop:"attr5",label:"Attr5",width:"200"}}),a("vxe-table-column",{attrs:{prop:"attr6",label:"Attr6",width:"200"}}),a("vxe-table-column",{attrs:{prop:"attr7",label:"Attr7",width:"200"}}),a("vxe-table-column",{attrs:{prop:"attr8",label:"Attr8",width:"200"}}),a("vxe-table-column",{attrs:{prop:"attr9",label:"Attr9",width:"200"}}),a("vxe-table-column",{attrs:{prop:"createTime",label:"CreateTime",width:"200"}})],1)],1)},r=[],o=(a("8615"),a("ac6a"),{data:function(){return{loading:!1,validRules:{name:[{required:!0,message:"名称必须填写"},{min:3,max:50,message:"名称长度在 3 到 50 个字符"}],sex:[{required:!0,message:"性别必须填写"}]}}},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)},methods:{validEvent:function(){var e=this;this.$refs.xTable.validate(function(t){t?e.$XMsg.message({status:"success",message:"校验成功！"}):e.$XMsg.message({status:"error",message:"校验不通过！"})})},fullValidEvent:function(){var e=this,t=this.$createElement;this.$refs.xTable.fullValidate(function(a,l){if(a)e.$XMsg.message({status:"success",message:"校验成功！"});else{var r=[];Object.values(l).forEach(function(e){e.forEach(function(e){var t=e.rowIndex,a=e.column,l=e.rules;l.forEach(function(e){r.push("第 ".concat(t," 行 ").concat(a.label," 校验错误：").concat(e.message))})})}),e.$XMsg.message({status:"error",message:function(){return[t("div",{class:"red",style:"max-height: 400px;overflow: auto;"},[r.map(function(e){return t("div",[e])})])]}})}})},selectValidEvent:function(){var e=this,t=this.$refs.xTable.getSelectRecords();t.length>0?this.$refs.xTable.validate(t,function(t){t?e.$XMsg.message({status:"success",message:"校验成功！"}):e.$XMsg.message({status:"error",message:"校验不通过！"})}):this.$XMsg.message({status:"warning",message:"未选中数据！"})},insertEvent:function(){var e=this;this.$refs.xTable.insert().then(function(t){var a=t.row;e.$refs.xTable.validate(a,function(e){})})},getInsertEvent:function(){var e=this.$refs.xTable.getInsertRecords();this.$XMsg.alert(e.length)},getRemoveEvent:function(){var e=this.$refs.xTable.getRemoveRecords();this.$XMsg.alert(e.length)},getUpdateEvent:function(){var e=this.$refs.xTable.getUpdateRecords();this.$XMsg.alert(e.length)}}}),n=o,i=a("2877"),s=Object(i["a"])(n,l,r,!1,null,null,null);t["default"]=s.exports},bba7:function(e,t,a){"use strict";a.r(t);var l=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("p",[e._v("虚拟滚动渲染，加载 1 万行，左右固定列")]),a("p",[e._v("大数据不建议使用双向绑定的 "),a("table-api-link",{attrs:{name:"data"}}),e._v(" 属性（vue 监听会大数据会短暂的卡顿），建议使用 "),a("table-api-link",{attrs:{prop:"loadData"}}),e._v("/"),a("table-api-link",{attrs:{prop:"reloadData"}}),e._v(" 函数")],1),a("vxe-table",{ref:"xTable",attrs:{border:"",resizable:"","show-overflow":"",height:"300",loading:e.loading,optimization:{scrollY:{gt:500,oSize:10,rSize:30}}}},[e._v(">\n "),a("vxe-table-column",{attrs:{type:"index",width:"100"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name",sortable:"",width:"200"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age",width:"200"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex",width:"200"}}),a("vxe-table-column",{attrs:{prop:"rate",label:"Rate",width:"200"}}),a("vxe-table-column",{attrs:{prop:"region",label:"Region",width:"200"}}),a("vxe-table-column",{attrs:{prop:"time",label:"Time",width:"200"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address",width:"300","show-overflow":""}}),a("vxe-table-column",{attrs:{prop:"updateTime",label:"UpdateTime",width:"200"}}),a("vxe-table-column",{attrs:{prop:"createTime",label:"CreateTime",width:"200"}}),a("vxe-table-column",{attrs:{prop:"attr1",label:"Attr1",width:"200"}}),a("vxe-table-column",{attrs:{prop:"attr2",label:"Attr2",width:"200"}}),a("vxe-table-column",{attrs:{prop:"attr3",label:"Attr3",width:"200"}}),a("vxe-table-column",{attrs:{prop:"attr4",label:"Attr4",width:"200"}}),a("vxe-table-column",{attrs:{prop:"attr5",label:"Attr5",width:"200"}}),a("vxe-table-column",{attrs:{prop:"attr6",label:"Attr6",width:"200"}}),a("vxe-table-column",{attrs:{prop:"attr7",label:"Attr7",width:"200"}}),a("vxe-table-column",{attrs:{prop:"attr8",label:"Attr8",width:"200"}}),a("vxe-table-column",{attrs:{prop:"attr9",label:"Attr9",width:"200"}}),a("vxe-table-column",{attrs:{prop:"createTime",label:"CreateTime",width:"200"}})],1)],1)},r=[],o={data:function(){return{loading:!1}},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)}},n=o,i=a("2877"),s=Object(i["a"])(n,l,r,!1,null,null,null);t["default"]=s.exports},d291:function(e,t,a){"use strict";a.r(t);var l=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("p",[e._v("虚拟滚动渲染，只会渲染可视区域的数据，对于海量数据的性能提升非常大")]),a("p",[e._v("相关参数说明 {seq: 序号, $rowIndex: 获取渲染中的行索引, rowIndex: 获取真实的行索引, row: 获取行数据, column: 获取列配置, columnIndex: 获取真实列索引，$columnIndex:获取渲染中的列索引}")]),a("vxe-table",{attrs:{border:"","highlight-hover-row":"",height:"300",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"100"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name",sortable:""}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v(" "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")]),a("p",[e._v("高级配置项")]),a("p",[e._v("参数 "),a("table-api-link",{attrs:{prop:"scrollX"}}),e._v(": {gt: 16, oSize: 4, rSize: 10},"),a("table-api-link",{attrs:{prop:"scrollY"}}),e._v(": {gt: 500, oSize: 30, rSize: 80}，当数据量过大时请调整到适合的参数可以使渲染更快")],1),a("p",[e._v("数据超大情况下必须使用："),a("table-api-link",{attrs:{prop:"show-overflow"}}),e._v("，"),a("table-api-link",{attrs:{prop:"show-header-overflow"}}),e._v(" 参数以及调整好 "),a("table-api-link",{attrs:{prop:"optimization"}}),e._v(" ：{scrollX,scrollY} 适合的参数可以更加流畅")],1),a("vxe-table",{ref:"xTable",attrs:{border:"","show-overflow":"",height:"300"}},[a("vxe-table-column",{attrs:{type:"index",width:"100"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name",sortable:""}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v(" "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n ")])],1)},r=[],o=(a("5df3"),a("1c4c"),a("ac6a"),a("1487")),n=a.n(o),i={data:function(){return{tableData:[],tableData2:[],demoCodes:['\n <vxe-table\n border\n highlight-hover-row\n height="300"\n :data.sync="tableData">\n <vxe-table-column type="index" width="100"></vxe-table-column>\n <vxe-table-column prop="name" label="Name" sortable></vxe-table-column>\n <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n <vxe-table-column prop="age" label="Age"></vxe-table-column>\n <vxe-table-column prop="address" label="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 ref="xTable"\n border\n show-overflow\n height="300"\n :data.sync="tableData2">\n <vxe-table-column type="index" width="100"></vxe-table-column>\n <vxe-table-column prop="name" label="Name" sortable></vxe-table-column>\n <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n <vxe-table-column prop="age" label="Age"></vxe-table-column>\n <vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n tableData2: []\n }\n },\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){n.a.highlightBlock(e)})}},s=i,c=a("2877"),p=Object(c["a"])(s,l,r,!1,null,null,null);t["default"]=p.exports}}]);
Reference in New Issue View Git Blame Copy Permalink