vxe-table/docs/static/js/base.9d3d5708.js

(window["webpackJsonpVXETable"]=window["webpackJsonpVXETable"]||[]).push([["base"],{"069f":function(e,t,l){"use strict";l.r(t);var a=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",[e._v("通过设置 "),l("table-api-link",{attrs:{prop:"resizable"}}),e._v(" 属性可以启用所有列宽拖动")],1),l("p",[e._v("也可以通过给列设置 "),l("table-column-api-link",{attrs:{prop:"resizable"}}),e._v(" 属性控制列是否允许拖动")],1),l("vxe-table",{attrs:{resizable:"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"time",title:"Time"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),l("p",[e._v("横向滚动条")]),l("vxe-table",{attrs:{border:"",resizable:"","highlight-hover-row":"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",width:"300"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex",width:"300"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age",width:"300"}}),l("vxe-table-column",{attrs:{field:"time",title:"Time",width:"300"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address",width:"300","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")]),l("p",[e._v("固定左列宽拖动")]),l("vxe-table",{attrs:{border:"",resizable:"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60",fixed:"left"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",width:"100",fixed:"left"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex",width:"100",fixed:"left"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age",width:"100",fixed:"left"}}),l("vxe-table-column",{attrs:{field:"atrr1",title:"atrr1",width:"200"}}),l("vxe-table-column",{attrs:{field:"atrr2",title:"atrr2",width:"200"}}),l("vxe-table-column",{attrs:{field:"atrr3",title:"atrr3",width:"200"}}),l("vxe-table-column",{attrs:{field:"atrr4",title:"atrr4",width:"200"}}),l("vxe-table-column",{attrs:{field:"time",title:"Time",width:"200"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address",width:"200","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[4]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[5]))]),e._v("\n  ")]),l("p",[e._v("固定右列宽拖动")]),l("vxe-table",{attrs:{border:"",resizable:"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",width:"200"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex",width:"200"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age",width:"200"}}),l("vxe-table-column",{attrs:{field:"atrr1",title:"atrr1",width:"200"}}),l("vxe-table-column",{attrs:{field:"atrr2",title:"atrr2",width:"200"}}),l("vxe-table-column",{attrs:{field:"atrr3",title:"atrr3",width:"200"}}),l("vxe-table-column",{attrs:{field:"atrr4",title:"atrr4",width:"200"}}),l("vxe-table-column",{attrs:{field:"role",title:"Role",width:"100",fixed:"right"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",width:"100",fixed:"right"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex",width:"100",fixed:"right"}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[6]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[7]))]),e._v("\n  ")]),l("p",[e._v("左右固定列宽拖动")]),l("vxe-table",{attrs:{border:"",resizable:"","show-overflow":"","show-header-overflow":"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60",fixed:"left"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",width:"100",fixed:"left"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex",width:"100",fixed:"left"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age",width:"100",fixed:"left"}}),l("vxe-table-column",{attrs:{field:"atrr1",title:"atrr1",width:"200"}}),l("vxe-table-column",{attrs:{field:"atrr2",title:"atrr2",width:"200"}}),l("vxe-table-column",{attrs:{field:"atrr3",title:"atrr3",width:"200"}}),l("vxe-table-column",{attrs:{field:"atrr4",title:"atrr4",width:"200"}}),l("vxe-table-column",{attrs:{field:"date",title:"Date",width:"100",fixed:"right"}}),l("vxe-table-column",{attrs:{field:"time",title:"Time",width:"100",fixed:"right"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address",width:"100",fixed:"right"}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[8]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[9]))]),e._v("\n  ")]),l("p",[e._v("分组表头拖动")]),l("vxe-table",{attrs:{border:"",resizable:"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{title:"基本信息"}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name"}})],1),l("vxe-table-column",{attrs:{title:"更多信息"}},[l("vxe-table-column",{attrs:{field:"role",title:"Role"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{title:"详细信息"}},[l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"date",title:"Date",width:"140","show-overflow":""}})],1)],1),l("vxe-table-column",{attrs:{field:"address",title:"Address",width:"200","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[10]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[11]))]),e._v("\n  ")])],1)},n=[],o=(l("5df3"),l("1c4c"),l("ac6a"),l("1487")),i=l.n(o),d={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          resizable\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n          <vxe-table-column field="time" title="Time"></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, 3)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          resizable\n          highlight-hover-row\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" width="300"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex" width="300"></vxe-table-column>\n          <vxe-table-column field="age" title="Age" width="300"></vxe-table-column>\n          <vxe-table-column field="time" title="Time" width="300"></vxe-table-column>\n          <vxe-table-column field="address" title="Address" width="300" 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, 3)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          resizable\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60" fixed="left"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" width="100" fixed="left"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex" width="100" fixed="left"></vxe-table-column>\n          <vxe-table-column field="age" title="Age" width="100" fixed="left"></vxe-table-column>\n          <vxe-table-column field="atrr1" title="atrr1" width="200"></vxe-table-column>\n          <vxe-table-column field="atrr2" title="atrr2" width="200"></vxe-table-column>\n          <vxe-table-column field="atrr3" title="atrr3" width="200"></vxe-table-column>\n          <vxe-table-column field="atrr4" title="atrr4" 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="200" 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, 3)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          resizable\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" width="200"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex" width="200"></vxe-table-column>\n          <vxe-table-column field="age" title="Age" width="200"></vxe-table-column>\n          <vxe-table-column field="atrr1" title="atrr1" width="200"></vxe-table-column>\n          <vxe-table-column field="atrr2" title="atrr2" width="200"></vxe-table-column>\n          <vxe-table-column field="atrr3" title="atrr3" width="200"></vxe-table-column>\n          <vxe-table-column field="atrr4" title="atrr4" width="200"></vxe-table-column>\n          <vxe-table-column field="date" title="Date" width="100" fixed="right"></vxe-table-column>\n          <vxe-table-column field="time" title="Time" width="100" fixed="right"></vxe-table-column>\n          <vxe-table-column field="address" title="Address" width="100" fixed="right"></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, 3)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          resizable\n          show-overflow\n          show-header-overflow\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60" fixed="left"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" width="100" fixed="left"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex" width="100" fixed="left"></vxe-table-column>\n          <vxe-table-column field="age" title="Age" width="100" fixed="left"></vxe-table-column>\n          <vxe-table-column field="atrr1" title="atrr1" width="200"></vxe-table-column>\n          <vxe-table-column field="atrr2" title="atrr2" width="200"></vxe-table-column>\n          <vxe-table-column field="atrr3" title="atrr3" width="200"></vxe-table-column>\n          <vxe-table-column field="atrr4" title="atrr4" width="200"></vxe-table-column>\n          <vxe-table-column field="date" title="Date" width="100" fixed="right"></vxe-table-column>\n          <vxe-table-column field="time" title="Time" width="100" fixed="right"></vxe-table-column>\n          <vxe-table-column field="address" title="Address" width="100" fixed="right"></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, 3)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          resizable\n          :data.sync="tableData">\n          <vxe-table-column title="基本信息">\n            <vxe-table-column type="index" width="60"></vxe-table-column>\n            <vxe-table-column field="name" title="Name"></vxe-table-column>\n          </vxe-table-column>\n          <vxe-table-column title="更多信息">\n            <vxe-table-column field="role" title="Role"></vxe-table-column>\n            <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n            <vxe-table-column title="详细信息">\n              <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n              <vxe-table-column field="date" title="Date" width="140" show-overflow></vxe-table-column>\n            </vxe-table-column>\n          </vxe-table-column>\n          <vxe-table-column field="address" title="Address" width="200" 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, 3)\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,3)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})}},s=d,r=l("2877"),c=Object(r["a"])(s,a,n,!1,null,null,null);t["default"]=c.exports},"0dc5":function(e,t,l){"use strict";l.r(t);var a=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",[e._v("多选表格，用户操作点击选项时会触发事件 "),l("table-api-link",{attrs:{prop:"select-change"}})],1),l("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[l("vxe-button",{on:{click:function(t){return e.$refs.xTable1.toggleRowSelection(e.tableData[1])}}},[e._v("切换第二行选中")]),l("vxe-button",{on:{click:function(t){return e.$refs.xTable1.setSelection([e.tableData[2],e.tableData[3]],!0)}}},[e._v("设置第三、四行选中")]),l("vxe-button",{on:{click:function(t){return e.$refs.xTable1.setAllSelection(!0)}}},[e._v("设置所有行选中")]),l("vxe-button",{on:{click:function(t){return e.$refs.xTable1.clearSelection()}}},[e._v("清除所有行选中")])]},proxy:!0}])}),l("vxe-table",{ref:"xTable1",attrs:{border:"",height:"300",data:e.tableData},on:{"update:data":function(t){e.tableData=t},"select-all":e.selectAllEvent,"select-change":e.selectChangeEvent}},[l("vxe-table-column",{attrs:{type:"selection",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),l("p",[e._v("还可以通过 "),l("table-api-link",{attrs:{prop:"checkMethod"}}),e._v(" 方法控制是否允许点击 CheckBox 勾选，还可以配置 "),l("table-api-link",{attrs:{prop:"labelField"}}),e._v(" 列显示属性")],1),l("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[l("vxe-button",{on:{click:function(t){return e.$refs.xTable2.toggleRowSelection(e.tableData[1])}}},[e._v("切换第二行选中")]),l("vxe-button",{on:{click:function(t){return e.$refs.xTable2.setSelection([e.tableData[2],e.tableData[3]],!0)}}},[e._v("设置第三、四行选中")]),l("vxe-button",{on:{click:function(t){return e.$refs.xTable2.setAllSelection(!0)}}},[e._v("设置所有行选中")]),l("vxe-button",{on:{click:function(t){return e.$refs.xTable2.clearSelection()}}},[e._v("清除所有行选中")])]},proxy:!0}])}),l("vxe-table",{ref:"xTable2",attrs:{border:"",height:"300",data:e.tableData,"select-config":{labelField:"name",checkMethod:e.checkMethod}},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"selection",title:"All"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")]),l("p",[e._v("多选表格，通过配置 "),l("table-api-link",{attrs:{prop:"trigger"}}),e._v(" 设置触发源，使用渲染最快的 "),l("table-api-link",{attrs:{prop:"checkField"}}),e._v(" 属性绑定方式")],1),l("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[l("vxe-button",{on:{click:function(t){return e.$refs.xTable3.toggleRowSelection(e.tableData[1])}}},[e._v("切换第二行选中")]),l("vxe-button",{on:{click:function(t){return e.$refs.xTable3.setSelection([e.tableData[2],e.tableData[3]],!0)}}},[e._v("设置第三、四行选中")]),l("vxe-button",{on:{click:function(t){return e.$refs.xTable3.setAllSelection(!0)}}},[e._v("设置所有行选中")]),l("vxe-button",{on:{click:function(t){return e.$refs.xTable3.clearSelection()}}},[e._v("清除所有行选中")])]},proxy:!0}])}),l("vxe-table",{ref:"xTable3",attrs:{border:"","highlight-hover-row":"",height:"300",data:e.tableData,"select-config":{checkField:"checked",trigger:"row"}},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"selection",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[4]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[5]))]),e._v("\n  ")]),l("p",[e._v("多选可单选同时使用")]),l("vxe-table",{ref:"xTable4",attrs:{border:"","highlight-hover-row":"",height:"300",data:e.tableData,"radio-config":{labelField:"name"}},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"selection",width:"60"}}),l("vxe-table-column",{attrs:{type:"radio",width:"200",title:"Name"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[6]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[7]))]),e._v("\n  ")]),l("p",[e._v("不仅如此，还可以多种方式混合使用")]),l("vxe-table",{ref:"xTable5",attrs:{border:"",resizable:"","highlight-hover-row":"","highlight-current-row":"",height:"300",data:e.tableData,"radio-config":{labelField:"role"},"select-config":{labelField:"name"}},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"selection",title:"Name"}}),l("vxe-table-column",{attrs:{type:"radio",title:"Role"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[8]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[9]))]),e._v("\n  ")])],1)},n=[],o=(l("5df3"),l("1c4c"),l("ac6a"),l("1487")),i=l.n(o),d={data:function(){return{tableData:[],demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="$refs.xTable1.toggleRowSelection(tableData[1])">切换第二行选中</vxe-button>\n            <vxe-button @click="$refs.xTable1.setSelection([tableData[2], tableData[3]], true)">设置第三、四行选中</vxe-button>\n            <vxe-button @click="$refs.xTable1.setAllSelection(true)">设置所有行选中</vxe-button>\n            <vxe-button @click="$refs.xTable1.clearSelection()">清除所有行选中</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          ref="xTable1"\n          border\n          height="300"\n          :data.sync="tableData"\n          @select-all="selectAllEvent"\n          @select-change="selectChangeEvent">\n          <vxe-table-column type="selection" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="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, 10)\n          },\n          methods: {\n            selectAllEvent ({ checked }) {\n              console.log(checked ? '所有勾选事件' : '所有取消事件')\n            },\n            selectChangeEvent ({ checked, row }) {\n              console.log(checked ? '勾选事件' : '取消事件')\n            }\n          }\n        }\n        ",'\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="$refs.xTable2.toggleRowSelection(tableData[1])">切换第二行选中</vxe-button>\n            <vxe-button @click="$refs.xTable2.setSelection([tableData[2], tableData[3]], true)">设置第三、四行选中</vxe-button>\n            <vxe-button @click="$refs.xTable2.setAllSelection(true)">设置所有行选中</vxe-button>\n            <vxe-button @click="$refs.xTable2.clearSelection()">清除所有行选中</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          ref="xTable2"\n          border\n          height="300"\n          :data.sync="tableData"\n          :select-config="{labelField: \'name\', checkMethod}">\n          <vxe-table-column type="selection" title="All"></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, 10)\n          },\n          methods: {\n            checkMethod ({ row }) {\n              return row.age > 26\n            }\n          }\n        }\n        ",'\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="$refs.xTable3.toggleRowSelection(tableData[1])">切换第二行选中</vxe-button>\n            <vxe-button @click="$refs.xTable3.setSelection([tableData[2], tableData[3]], true)">设置第三、四行选中</vxe-button>\n            <vxe-button @click="$refs.xTable3.setAllSelection(true)">设置所有行选中</vxe-button>\n            <vxe-button @click="$refs.xTable3.clearSelection()">清除所有行选中</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          border\n          highlight-hover-row\n          ref="xTable3"\n          height="300"\n          :data.sync="tableData"\n          :select-config="{checkField: \'checked\', trigger: \'row\'}">\n          <vxe-table-column type="selection" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="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, 10)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          highlight-hover-row\n          ref="xTable4"\n          height="300"\n          :data.sync="tableData"\n          :radio-config="{labelField: \'name\'}">\n          <vxe-table-column type="selection" width="60"></vxe-table-column>\n          <vxe-table-column type="radio" width="200" title="Name"></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, 10)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          resizable\n          highlight-hover-row\n          highlight-current-row\n          ref="xTable5"\n          height="300"\n          :data.sync="tableData"\n          :radio-config="{labelField: \'role\'}"\n          :select-config="{labelField: \'name\'}">\n          <vxe-table-column type="selection" title="Name"></vxe-table-column>\n          <vxe-table-column type="radio" title="Role"></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, 10)\n          }\n        }\n        "]}},created:function(){var e=window.MOCK_DATA_LIST.slice(0,10);this.tableData=e},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})},methods:{checkMethod:function(e){var t=e.row;return t.age>26},selectAllEvent:function(e){var t=e.checked;console.log(t?"所有勾选事件":"所有取消事件")},selectChangeEvent:function(e){var t=e.checked;e.row;console.log(t?"勾选事件":"取消事件")}}},s=d,r=l("2877"),c=Object(r["a"])(s,a,n,!1,null,null,null);t["default"]=c.exports},"14f6":function(e,t,l){"use strict";l.r(t);var a=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",[e._v("使用 "),l("table-api-link",{attrs:{prop:"highlight-current-row"}}),e._v(" 显示高亮行；用户操作点击选项时会触发事件 "),l("table-api-link",{attrs:{prop:"current-change"}})],1),l("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[l("vxe-button",{on:{click:function(t){return e.$refs.xTable.setCurrentRow(e.tableData[1])}}},[e._v("设置第二行选中")]),l("vxe-button",{on:{click:function(t){return e.$refs.xTable.clearCurrentRow()}}},[e._v("取消选中")])]},proxy:!0}])}),l("vxe-table",{ref:"xTable",attrs:{border:"","highlight-hover-row":"","highlight-current-row":"",height:"300",data:e.tableData},on:{"update:data":function(t){e.tableData=t},"current-change":e.currentChangeEvent}},[l("vxe-table-column",{attrs:{field:"name",title:"Name"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},n=[],o=(l("5df3"),l("1c4c"),l("ac6a"),l("1487")),i=l.n(o),d={data:function(){return{tableData:[],demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="$refs.xTable.setCurrentRow(tableData[1])">设置第二行选中</vxe-button>\n            <vxe-button @click="$refs.xTable.clearCurrentRow()">取消选中</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          border\n          highlight-hover-row\n          highlight-current-row\n          ref="xTable"\n          height="300"\n          :data.sync="tableData"\n          @current-change="currentChangeEvent">\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="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, 6)\n          },\n          methods: {\n            currentChangeEvent ({ row }) {\n              console.log('行选中事件')\n            }\n          }\n        }\n        "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})},created:function(){var e=window.MOCK_DATA_LIST.slice(0,6);this.tableData=e},methods:{currentChangeEvent:function(e){e.row;console.log("行选中事件")},radioChangeEvent:function(e){e.row;console.log("单选事件")}}},s=d,r=l("2877"),c=Object(r["a"])(s,a,n,!1,null,null,null);t["default"]=c.exports},"203d":function(e,t,l){"use strict";l.r(t);var a=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",[e._v("默认的序号从 1 开始，你也可以自定义 "),l("table-column-api-link",{attrs:{prop:"index-method"}}),e._v(" 函数")],1),l("vxe-table",{attrs:{border:"","highlight-hover-row":"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:""}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",[e._v("使用 "),l("table-column-api-link",{attrs:{prop:"index-method"}}),e._v(" 自定义序号")],1),l("vxe-table",{attrs:{border:"",height:"300",data:e.tableData2},on:{"update:data":function(t){e.tableData2=t}}},[l("vxe-table-column",{attrs:{type:"index",title:"序号",width:"60","index-method":e.indexMethod}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:""}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1)],1)},n=[],o={data:function(){return{tableData:[],tableData2:[]}},created:function(){var e=window.MOCK_DATA_LIST.slice(0,4);this.tableData=e,this.tableData2=window.MOCK_DATA_LIST.slice(0,50)},methods:{indexMethod:function(e){var t=e.rowIndex;return 2*t}}},i=o,d=l("2877"),s=Object(d["a"])(i,a,n,!1,null,null,null);t["default"]=s.exports},"300b":function(e,t,l){"use strict";var a=l("4b04"),n=l.n(a);n.a},"30ab":function(e,t,l){"use strict";var a=l("bb45"),n=l.n(a);n.a},"31d8":function(e,t,l){"use strict";l.r(t);var a=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",[e._v("基础使用")]),l("vxe-table",{attrs:{data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),l("p",[e._v("配合 loading 使用，可以通过 slot="),l("table-api-link",{attrs:{prop:"empty"}}),e._v(" 自定义提示语")],1),l("vxe-table",{attrs:{height:"300",loading:e.loading,data:e.tableData},on:{"update:data":function(t){e.tableData=t}},scopedSlots:e._u([{key:"empty",fn:function(){return[l("span",{staticStyle:{color:"red"}},[e._v("没有更多数据了！")])]},proxy:!0}])},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")])],1)},n=[],o=(l("5df3"),l("1c4c"),l("ac6a"),l("1487")),i=l.n(o),d={data:function(){return{loading:!1,tableData:[],tableData2:[],demoCodes:['\n        <vxe-table\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              loading: false,\n              tableData: [],\n              tableData2: []\n            }\n          },\n          created () {\n            setTimeout(() => {\n              this.tableData = []\n            }, 1000)\n          }\n        }\n        ",'\n        <vxe-table\n          :loading="loading"\n          :data.sync="tableData2">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n          <vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>\n          <template v-slot:empty>\n            <span style="color: red;">没有更多数据了！</span>\n          </template>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              loading: false,\n              tableData: [],\n              tableData2: []\n            }\n          },\n          created () {\n            this.loading = true\n            setTimeout(() => {\n              this.loading = false\n              this.tableData2 = []\n            }, 1000)\n          }\n        }\n        "]}},created:function(){var e=this;setTimeout(function(){e.tableData=[]},1e3),this.loading=!0,setTimeout(function(){e.loading=!1,e.tableData2=[]},1e3)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})}},s=d,r=l("2877"),c=Object(r["a"])(s,a,n,!1,null,null,null);t["default"]=c.exports},3617:function(e,t,l){"use strict";l.r(t);var a=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",[l("table-api-link",{attrs:{name:"vxe-table"}}),e._v(" 静态化基础表格")],1),l("vxe-table",{attrs:{data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),l("p",[e._v("使用 "),l("table-api-link",{attrs:{prop:"highlight-hover-row"}}),e._v(" 属性启用 hover 行高亮")],1),l("vxe-table",{attrs:{"highlight-hover-row":"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",title:"序号",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")])],1)},n=[],o=(l("5df3"),l("1c4c"),l("ac6a"),l("1487")),i=l.n(o),d={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></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, 6)\n          }\n        }\n        ",'\n        <vxe-table\n          highlight-hover-row\n          :data.sync="tableData">\n          <vxe-table-column type="index" title="序号" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="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, 6)\n          }\n        }\n        "]}},created:function(){var e=window.MOCK_DATA_LIST.slice(0,6);this.tableData=e},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})}},s=d,r=l("2877"),c=Object(r["a"])(s,a,n,!1,null,null,null);t["default"]=c.exports},"38f2":function(e,t,l){"use strict";l.r(t);var a=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",[e._v("内置的小图标")]),l("p",[e._v("如果本身项目有合适的 icon 图标，可以通过全局参数 "),l("router-link",{staticClass:"link",attrs:{to:{name:"Use"}}},[e._v("icon")]),e._v(" 替换自带的，可以减少一些体积")],1),l("ul",{staticClass:"icon-list"},e._l(e.list,function(t){return l("li",{key:t.icon,attrs:{title:"点击复制内容"},on:{click:function(l){return e.copyEvent(t)}}},[l("i",{class:t.icon}),l("div",{staticClass:"title"},[e._v(e._s(t.icon))])])}),0),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n  ")])])},n=[],o=(l("5df3"),l("1c4c"),l("ac6a"),l("1487")),i=l.n(o),d=l("f11d"),s={data:function(){return{list:[{icon:"vxe-icon--caret-top"},{icon:"vxe-icon--caret-bottom"},{icon:"vxe-icon--caret-left"},{icon:"vxe-icon--caret-right"},{icon:"vxe-icon--arrow-top"},{icon:"vxe-icon--arrow-bottom"},{icon:"vxe-icon--arrow-left"},{icon:"vxe-icon--arrow-right"},{icon:"vxe-icon--d-arrow-top"},{icon:"vxe-icon--d-arrow-bottom"},{icon:"vxe-icon--d-arrow-left"},{icon:"vxe-icon--d-arrow-right"},{icon:"vxe-icon--menu"},{icon:"vxe-icon--edit-outline"},{icon:"vxe-icon--more"},{icon:"vxe-icon--close"},{icon:"vxe-icon--refresh"},{icon:"vxe-icon--refresh roll"},{icon:"vxe-icon--funnel"},{icon:"vxe-icon--question"},{icon:"vxe-icon--info"},{icon:"vxe-icon--warning"},{icon:"vxe-icon--success"},{icon:"vxe-icon--error"}],demoCodes:['\n        <i class="vxe-icon--caret-top"></i>\n        ']}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})},methods:{copyEvent:function(e){var t=e.icon;d["a"].copy(t)&&this.$XMsg.message({message:"已复制到剪贴板！",status:"success"})}}},r=s,c=(l("30ab"),l("2877")),v=Object(c["a"])(r,a,n,!1,null,"768d5e8d",null);t["default"]=v.exports},"3c8d":function(e,t,l){"use strict";l.r(t);var a=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",[e._v("通过设置 "),l("table-column-api-link",{attrs:{prop:"filters"}}),e._v(" 属性和 "),l("table-column-api-link",{attrs:{prop:"filter-method"}}),e._v(" 方法可以支持列筛选功能")],1),l("p",[e._v("如果是服务端筛选，只需加上 "),l("table-api-link",{attrs:{prop:"remote-filter"}}),e._v(" 和 "),l("table-api-link",{attrs:{prop:"filter-change"}}),e._v(" 事件就可以实现")],1),l("p",[e._v("还可以使用 slot "),l("table-column-api-link",{attrs:{prop:"filter"}}),e._v(" 自定义筛选模板")],1),l("vxe-table",{attrs:{border:"","highlight-hover-row":"",height:"400",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:"",filters:[{label:"id大于10",value:10},{label:"id大于40",value:40}],"filter-method":e.filterNameMethod}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex",sortable:"",filters:[{label:"Man",value:"1"},{label:"Woman",value:"0"}]}}),l("vxe-table-column",{attrs:{field:"age",title:"Age",filters:[{data:""}],"filter-method":e.filterAgeMethod},scopedSlots:e._u([{key:"filter",fn:function(t){var a=t.column,n=t.context;return e._l(a.filters,function(t,a){return l("input",{directives:[{name:"model",rawName:"v-model",value:t.data,expression:"option.data"}],key:a,attrs:{type:"type"},domProps:{value:t.data},on:{input:[function(l){l.target.composing||e.$set(t,"data",l.target.value)},function(e){return n.changeMultipleOption(e,!!t.data,t)}]}})})}}])}),l("vxe-table-column",{attrs:{field:"time",title:"Time",sortable:""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},n=[],o=(l("c5f6"),l("5df3"),l("1c4c"),l("ac6a"),l("1487")),i=l.n(o),d={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          highlight-hover-row\n          height="400"\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" sortable :filters="[{label: \'id大于10\', value: 10}, {label: \'id大于40\', value: 40}]" :filter-method="filterNameMethod"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex" sortable :filters="[{label: \'Man\', value: \'1\'}, {label: \'Woman\', value: \'0\'}]"></vxe-table-column>\n          <vxe-table-column field="age" title="Age" :filters="[{ data: \'\' }]" :filter-method="filterAgeMethod">\n            <template v-slot:filter="{ column, context }">\n              <input type="type" v-for="(option, index) in column.filters" :key="index" v-model="option.data" @input="context.changeMultipleOption($event, !!option.data, option)">\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="time" title="Time" sortable></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, 50)\n          },\n          methods: {\n            filterNameMethod ({ value, row, column }) {\n              return row.id >= value\n            },\n            filterAgeMethod ({ option, row }) {\n              return row.age === Number(option.data)\n            }\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,50)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})},methods:{filterNameMethod:function(e){var t=e.value,l=e.row;e.column;return l.id>=t},filterAgeMethod:function(e){var t=e.option,l=e.row;return l.age===Number(t.data)}}},s=d,r=l("2877"),c=Object(r["a"])(s,a,n,!1,null,null,null);t["default"]=c.exports},4308:function(e,t,l){"use strict";l.r(t);var a=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",[e._v("当一个表格需要铺满父容器时，这个功能将非常有用")]),l("p",[e._v("通过设置 "),l("table-api-link",{attrs:{prop:"height"}}),e._v("=auto 表格会相对于父容器的高度去铺满，但是只会在数据重新加载时才会计算")],1),l("p",[e._v("还可以根据不同场景添加 "),l("table-api-link",{attrs:{prop:"auto-resize"}}),e._v(" 属性启用自动监听（"),l("table-api-link",{attrs:{prop:"auto-resize"}}),e._v(" 会有额外的损耗，根据需要的场景添加），这样就只需要通过样式控制父容器高度就可以实现响应式表格")],1),l("div",{staticStyle:{height:"800px"}},[l("vxe-table",{attrs:{border:"",height:"auto",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1)],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])])},n=[],o=(l("5df3"),l("1c4c"),l("ac6a"),l("1487")),i=l.n(o),d={data:function(){return{tableData:[],demoCodes:['\n        <div style="height: 800px">\n          <vxe-table\n            border\n            height="auto"\n            :data.sync="tableData">\n            <vxe-table-column type="index" width="60"></vxe-table-column>\n            <vxe-table-column field="name" title="Name"></vxe-table-column>\n            <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n            <vxe-table-column field="age" title="Age"></vxe-table-column>\n            <vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>\n          </vxe-table>\n        </div>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 50)\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,50)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})}},s=d,r=l("2877"),c=Object(r["a"])(s,a,n,!1,null,null,null);t["default"]=c.exports},"43ce":function(e,t,l){"use strict";l.r(t);var a=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",[e._v("当内容或表头超过隐藏时显示为省略号，"),l("table-column-api-link",{attrs:{prop:"show-overflow"}}),e._v(" 和 "),l("table-api-link",{attrs:{prop:"show-header-overflow"}})],1),l("p",[l("table-column-api-link",{attrs:{prop:"ellipsis"}}),e._v(" 当内容超过时显示为省略号")],1),l("p",[l("table-column-api-link",{attrs:{prop:"title"}}),e._v(" 当内容超过时显示为省略号并用原生 title 显示")],1),l("p",[l("table-column-api-link",{attrs:{prop:"tooltip"}}),e._v(" 当内容超过隐藏时显示为省略号并用 tooltip 显示")],1),l("vxe-table",{attrs:{"highlight-hover-row":"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{field:"address",title:"超过隐藏时显示为省略号————————————","show-header-overflow":"","show-overflow":""}}),l("vxe-table-column",{attrs:{field:"date",title:"内容超过隐藏时显示为省略号并用原生 title 显示","show-overflow":"title"}}),l("vxe-table-column",{attrs:{field:"age",title:"表头超过隐藏时显示为省略号并 tooltip 显示——————————————","show-header-overflow":""}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),l("p",[e._v("使用 light 主题，通过 "),l("table-api-link",{attrs:{prop:"tooltip-config"}}),e._v(" 参数配置")],1),l("vxe-table",{attrs:{"highlight-hover-row":"",data:e.tableData,"tooltip-config":{theme:"light"}},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{field:"address",title:"超过隐藏时显示为省略号————————————","show-header-overflow":"","show-overflow":""}}),l("vxe-table-column",{attrs:{field:"date",title:"内容超过隐藏时显示为省略号并用原生 title 显示","show-overflow":"title"}}),l("vxe-table-column",{attrs:{field:"age",title:"表头超过隐藏时显示为省略号并 tooltip 显示——————————————","show-header-overflow":""}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")])],1)},n=[],o=(l("5df3"),l("1c4c"),l("ac6a"),l("1487")),i=l.n(o),d={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          highlight-hover-row\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column field="address" title="超过隐藏时显示为省略号————————————" show-header-overflow show-overflow></vxe-table-column>\n          <vxe-table-column field="date" title="内容超过隐藏时显示为省略号并用原生 title 显示" show-overflow="title"></vxe-table-column>\n          <vxe-table-column field="age" title="表头超过隐藏时显示为省略号并 tooltip 显示——————————————" show-header-overflow></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, 6)\n          }\n        }\n        ",'\n        <vxe-table\n          highlight-hover-row\n          :data.sync="tableData"\n          :tooltip-config="{theme: \'light\'}">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column field="address" title="超过隐藏时显示为省略号————————————" show-header-overflow show-overflow></vxe-table-column>\n          <vxe-table-column field="date" title="内容超过隐藏时显示为省略号并用原生 title 显示" show-overflow="title"></vxe-table-column>\n          <vxe-table-column field="age" title="表头超过隐藏时显示为省略号并 tooltip 显示——————————————" show-header-overflow></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, 6)\n          }\n        }\n        "]}},created:function(){var e=window.MOCK_DATA_LIST.slice(0,6);this.tableData=e},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})}},s=d,r=l("2877"),c=Object(r["a"])(s,a,n,!1,null,null,null);t["default"]=c.exports},"447e":function(e,t,l){"use strict";l.r(t);var a=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",[e._v("单选表格，用户操作点击选项时会触发事件 "),l("table-api-link",{attrs:{prop:"radio-change"}})],1),l("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[l("vxe-button",{on:{click:function(t){return e.$refs.xTable1.setRadioRow(e.tableData[1])}}},[e._v("设置第二行选中")]),l("vxe-button",{on:{click:function(t){return e.$refs.xTable1.clearRadioRow()}}},[e._v("取消选中")])]},proxy:!0}])}),l("vxe-table",{ref:"xTable1",attrs:{border:"",height:"300",data:e.tableData},on:{"update:data":function(t){e.tableData=t},"radio-change":e.radioChangeEvent}},[l("vxe-table-column",{attrs:{type:"radio",width:"60"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),l("p",[e._v("使用 "),l("table-api-link",{attrs:{prop:"highlight-current-row"}}),e._v(" 高亮方式")],1),l("vxe-table",{attrs:{border:"","highlight-current-row":"",height:"300",data:e.tableData},on:{"update:data":function(t){e.tableData=t},"current-change":e.currentChangeEvent}},[l("vxe-table-column",{attrs:{field:"name",title:"Name"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")]),l("p",[e._v("两种方式混合使用")]),l("vxe-table",{ref:"xTable",attrs:{border:"","highlight-current-row":"",height:"300","radio-config":{labelField:"name"},data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"radio",title:"还可以这样",width:"120"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[4]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[5]))]),e._v("\n  ")]),l("p",[e._v("当然也可以两种方式同时使用")]),l("vxe-table",{attrs:{border:"","highlight-hover-row":"","highlight-current-row":"",height:"300","radio-config":{labelField:"name",trigger:"row"},data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"radio",title:"还可以这样",width:"120"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[6]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[7]))]),e._v("\n  ")])],1)},n=[],o=(l("5df3"),l("1c4c"),l("ac6a"),l("1487")),i=l.n(o),d={data:function(){return{tableData:[],demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="$refs.xTable1.setRadioRow(tableData[1])">设置第二行选中</vxe-button>\n            <vxe-button @click="$refs.xTable1.clearRadioRow()">取消选中</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          border\n          ref="xTable1"\n          height="300"\n          :data.sync="tableData"\n          @radio-change="radioChangeEvent">\n          <vxe-table-column type="radio" title="这样也行"></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, 6)\n          },\n          methods: {\n            radioChangeEvent ({ row }) {\n              console.log('单选事件')\n            }\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          highlight-current-row\n          height="300"\n          :data.sync="tableData"\n          @current-change="currentChangeEvent">\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="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, 6)\n          },\n          methods: {\n            currentChangeEvent ({ row }) {\n              console.log('行选中事件')\n            }\n          }\n        }\n        ",'\n        <vxe-table\n          ref="xTable"\n          border\n          highlight-current-row\n          height="300"\n          :radio-config="{labelField: \'name\'}"\n          :data.sync="tableData">\n          <vxe-table-column type="radio" title="还可以这样" width="120"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="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, 6)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          highlight-hover-row\n          highlight-current-row\n          height="300"\n          :radio-config="{labelField: \'name\', trigger: \'row\'}"\n          :data.sync="tableData">\n          <vxe-table-column type="radio" title="还可以这样" width="120"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="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, 6)\n          }\n        }\n        "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})},created:function(){var e=window.MOCK_DATA_LIST.slice(0,6);this.tableData=e},methods:{currentChangeEvent:function(e){e.row;console.log("行选中事件")},radioChangeEvent:function(e){e.row;console.log("单选事件")}}},s=d,r=l("2877"),c=Object(r["a"])(s,a,n,!1,null,null,null);t["default"]=c.exports},"4b04":function(e,t,l){},"4ce9":function(e,t,l){"use strict";l.r(t);var a=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",[e._v("行的样色、单元格样式，表头的样式、表尾的样式、全部都可以完全自定义")]),l("vxe-table",{staticClass:"mytable-style",attrs:{border:"","header-cell-class-name":e.headerCellClassName,"row-class-name":e.rowClassName,"cell-class-name":e.cellClassName,data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n    "),l("code",{staticClass:"scss"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n  ")]),l("p",[e._v("通过 "),l("table-api-link",{attrs:{prop:"cell-click"}}),e._v(" 事件点击改变颜色")],1),l("vxe-table",{staticClass:"mytable-style",attrs:{border:"","cell-class-name":e.cellClassName2,data:e.tableData},on:{"update:data":function(t){e.tableData=t},"cell-click":e.cellClickEvent2}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[4]))]),e._v("\n    "),l("code",{staticClass:"scss"},[e._v(e._s(e.demoCodes[5]))]),e._v("\n  ")])],1)},n=[],o=(l("6762"),l("2fdb"),l("5df3"),l("1c4c"),l("ac6a"),l("1487")),i=l.n(o),d={data:function(){return{tableData:[],selectRow:null,selectColumn:null,demoCodes:['\n        <vxe-table\n          border\n          class="mytable-style"\n          :header-cell-class-name="headerCellClassName"\n          :row-class-name="rowClassName"\n          :cell-class-name="cellClassName"\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></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              selectRow: null,\n              selectColumn: null\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n          },\n          methods: {\n            headerCellClassName ({ column, columnIndex }) {\n              if (column.property === 'name') {\n                return 'col-blue'\n              }\n            },\n            rowClassName ({ row, rowIndex }) {\n              if ([2, 3, 5].includes(rowIndex)) {\n                return 'row-green'\n              }\n            },\n            cellClassName ({ row, rowIndex, column, columnIndex }) {\n              if (column.property === 'sex') {\n                if (row.sex >= '1') {\n                  return 'col-red'\n                } else if (row.age === 26) {\n                  return 'col-orange'\n                }\n              }\n            }\n          }\n        }\n        ","\n        .mytable-style .vxe-body--row.row-green {\n          background-color: #187;\n          color: #fff;\n        }\n        .mytable-style .vxe-header--column.col-blue {\n          background-color: #2db7f5;\n          color: #fff;\n        }\n        .mytable-style .vxe-body--column.col-red {\n          background-color: red;\n          color: #fff;\n        }\n        .mytable-style .vxe-body--column.col-orange {\n          background-color: #f60;\n          color: #fff;\n        }\n        ",'\n        <vxe-table\n          border\n          class="mytable-style"\n          :cell-class-name="cellClassName2"\n          :data.sync="tableData"\n          @cell-click="cellClickEvent2">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></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              selectRow: null,\n              selectColumn: null\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n          },\n          methods: {\n            cellClassName2 ({ row, column }) {\n              if (row === this.selectRow & column === this.selectColumn) {\n                return 'col-orange'\n              }\n            },\n            cellClickEvent2 ({ row, column }) {\n              this.selectRow = row\n              this.selectColumn = column\n            }\n          }\n        }\n        ","\n        .mytable-style .vxe-body--row.row-green {\n          background-color: #187;\n          color: #fff;\n        }\n        .mytable-style .vxe-header--column.col-blue {\n          background-color: #2db7f5;\n          color: #fff;\n        }\n        .mytable-style .vxe-body--column.col-red {\n          background-color: red;\n          color: #fff;\n        }\n        .mytable-style .vxe-body--column.col-orange {\n          background-color: #f60;\n          color: #fff;\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,6)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})},methods:{headerCellClassName:function(e){var t=e.column;e.columnIndex;if("name"===t.property)return"col-blue"},rowClassName:function(e){e.row;var t=e.rowIndex;if([2,3,5].includes(t))return"row-green"},cellClassName:function(e){var t=e.row,l=(e.rowIndex,e.column);e.columnIndex;if("sex"===l.property){if(t.sex>="1")return"col-red";if(26===t.age)return"col-orange"}},cellClassName2:function(e){var t=e.row,l=e.column;if(t===this.selectRow&l===this.selectColumn)return"col-orange"},cellClickEvent2:function(e){var t=e.row,l=e.column;this.selectRow=t,this.selectColumn=l}}},s=d,r=(l("300b"),l("2877")),c=Object(r["a"])(s,a,n,!1,null,null,null);t["default"]=c.exports},5029:function(e,t,l){"use strict";l.r(t);var a=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",[e._v("通过给需要排序功能的列加上 "),l("table-api-link",{attrs:{prop:"sortable"}}),e._v(" 属性可以支持排序，还可以通过设置 "),l("table-api-link",{attrs:{prop:"sort-by"}}),e._v(" 多字段进行排序")],1),l("p",[e._v("如果是服务端排序，只需加上 "),l("table-column-api-link",{attrs:{prop:"remote-sort"}}),e._v(" 和 "),l("table-api-link",{attrs:{prop:"sort-change"}}),e._v(" 事件就可以实现")],1),l("vxe-table",{attrs:{border:"","highlight-hover-row":"",height:"300",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:""}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"time",title:"Time",sortable:""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),l("p",[e._v("配置 "),l("table-column-api-link",{attrs:{prop:"sort-by"}}),e._v(" 多个字段组合排序")],1),l("vxe-table",{attrs:{border:"","highlight-hover-row":"",height:"300",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:""}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"time",title:"Time",sortable:"","sort-by":["time","name"]}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")])],1)},n=[],o=(l("5df3"),l("1c4c"),l("ac6a"),l("1487")),i=l.n(o),d={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          highlight-hover-row\n          height="300"\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></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="time" title="Time" sortable></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, 50)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          highlight-hover-row\n          height="300"\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></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="time" title="Time" sortable :sort-by="[\'time\', \'name\']"></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, 50)\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,50)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})}},s=d,r=l("2877"),c=Object(r["a"])(s,a,n,!1,null,null,null);t["default"]=c.exports},"5c3a0":function(e,t,l){"use strict";l.r(t);var a=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",[e._v("可以设置大小尺寸："),l("table-api-link",{attrs:{prop:"medium"}}),e._v(" / "),l("table-api-link",{attrs:{prop:"small"}}),e._v(" / "),l("table-api-link",{attrs:{prop:"mini"}})],1),l("p"),l("vxe-table",{attrs:{data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{type:"radio",width:"60"}}),l("vxe-table-column",{attrs:{type:"selection",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),l("p",[e._v("设置大小为 "),l("table-api-link",{attrs:{prop:"medium"}})],1),l("vxe-table",{attrs:{size:"medium",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{type:"radio",width:"60"}}),l("vxe-table-column",{attrs:{type:"selection",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")]),l("p",[e._v("设置大小为 "),l("table-api-link",{attrs:{prop:"small"}})],1),l("vxe-table",{attrs:{size:"small",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{type:"radio",width:"60"}}),l("vxe-table-column",{attrs:{type:"selection",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[4]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[5]))]),e._v("\n  ")]),l("p",[e._v("设置大小为 "),l("table-api-link",{attrs:{prop:"mini"}})],1),l("vxe-table",{attrs:{size:"mini",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{type:"radio",width:"60"}}),l("vxe-table-column",{attrs:{type:"selection",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[6]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[7]))]),e._v("\n  ")])],1)},n=[],o=(l("5df3"),l("1c4c"),l("ac6a"),l("1487")),i=l.n(o),d={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="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, 4)\n          }\n        }\n        ",'\n        <vxe-table\n          size="medium"\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="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, 4)\n          }\n        }\n        ",'\n        <vxe-table\n          size="small"\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="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, 4)\n          }\n        }\n        ",'\n        <vxe-table\n          size="mini"\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="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, 4)\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,4)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})}},s=d,r=l("2877"),c=Object(r["a"])(s,a,n,!1,null,null,null);t["default"]=c.exports},"6dcd":function(e,t,l){"use strict";l.r(t);var a=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",[e._v("斑马线条纹")]),l("vxe-table",{attrs:{stripe:"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),l("p",[e._v("使用 "),l("table-api-link",{attrs:{prop:"highlight-hover-row"}}),e._v(" 属性启用 hover 行高亮")],1),l("vxe-table",{attrs:{stripe:"","highlight-current-row":"","highlight-hover-row":"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")])],1)},n=[],o=(l("5df3"),l("1c4c"),l("ac6a"),l("1487")),i=l.n(o),d={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          stripe\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="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, 6)\n          }\n        }\n        ",'\n        <vxe-table\n          stripe\n          highlight-current-row\n          highlight-hover-row\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="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, 6)\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,6)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})}},s=d,r=l("2877"),c=Object(r["a"])(s,a,n,!1,null,null,null);t["default"]=c.exports},"8b2b":function(e,t,l){"use strict";l.r(t);var a=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",[e._v("通过设置 "),l("table-api-link",{attrs:{prop:"loading"}}),e._v(" 属性可以使用自带的加载效果")],1),l("vxe-table",{attrs:{border:"","highlight-hover-row":"",height:"300",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:""}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),l("p",[e._v("加载中")]),l("vxe-table",{attrs:{border:"","highlight-hover-row":"",height:"300",loading:e.loading,data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:""}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")])],1)},n=[],o=(l("5df3"),l("1c4c"),l("ac6a"),l("1487")),i=l.n(o),d={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          highlight-hover-row\n          height="300"\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></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            setTimeout(() => {\n              this.tableData = window.MOCK_DATA_LIST.slice(0, 50)\n            }, 3000)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          highlight-hover-row\n          height="300"\n          :loading="loading"\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></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.loading = true\n            setTimeout(() => {\n              this.tableData = window.MOCK_DATA_LIST.slice(0, 50)\n              this.loading = false\n            }, 3000)\n          }\n        }\n        "]}},created:function(){var e=this;this.loading=!0,setTimeout(function(){e.tableData=window.MOCK_DATA_LIST.slice(0,50),e.loading=!1},3e3)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})}},s=d,r=l("2877"),c=Object(r["a"])(s,a,n,!1,null,null,null);t["default"]=c.exports},"8bd2":function(e,t,l){"use strict";l.r(t);var a=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",[e._v("隐藏头部，通过设置 "),l("table-column-api-link",{attrs:{prop:"show-header"}}),e._v(" 参数")],1),l("vxe-table",{attrs:{"show-header":!1,data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),l("p",[e._v("当纵向或横向内容过多时，自动出现滚动条")]),l("vxe-table",{attrs:{height:"400","show-header":!1,data:e.tableData2},on:{"update:data":function(t){e.tableData2=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")])],1)},n=[],o=(l("5df3"),l("1c4c"),l("ac6a"),l("1487")),i=l.n(o),d={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          :show-header="false"\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="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, 6)\n          }\n        }\n        ",'\n        <vxe-table\n          height="400"\n          :show-header="false"\n          :data.sync="tableData2">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="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              tableData2: []\n            }\n          },\n          created () {\n            this.tableData2 = window.MOCK_DATA_LIST.slice(0, 50)\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,6),this.tableData2=window.MOCK_DATA_LIST.slice(0,50)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})}},s=d,r=l("2877"),c=Object(r["a"])(s,a,n,!1,null,null,null);t["default"]=c.exports},"8c9e":function(e,t,l){"use strict";l.r(t);var a=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",[e._v("当一个表格高度需要自适应的时候可以设置为流体高度")]),l("vxe-table",{attrs:{border:"","highlight-hover-row":"","max-height":"200",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:""}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex",align:"center"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),l("p",[e._v("如果设置 "),l("table-api-link",{attrs:{prop:"max-height"}}),e._v("，当内容为达到最大高度时会自适应")],1),l("vxe-table",{attrs:{border:"","highlight-hover-row":"","max-height":"200",data:e.tableData2},on:{"update:data":function(t){e.tableData2=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:""}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")])],1)},n=[],o=(l("5df3"),l("1c4c"),l("ac6a"),l("1487")),i=l.n(o),d={data:function(){return{tableData:[],tableData2:[],demoCodes:['\n        <vxe-table\n          border\n          highlight-hover-row\n          max-height="200"\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" sortable></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex" align="center"></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, 50)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          highlight-hover-row\n          max-height="200"\n          :data.sync="tableData2">\n          <vxe-table-column type="index" width="60"></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              tableData2: []\n            }\n          },\n          created () {\n            this.tableData2 = window.MOCK_DATA_LIST.slice(0, 2)\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,50),this.tableData2=window.MOCK_DATA_LIST.slice(0,2)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})}},s=d,r=l("2877"),c=Object(r["a"])(s,a,n,!1,null,null,null);t["default"]=c.exports},a5bb:function(e,t,l){"use strict";l.r(t);var a=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",[e._v("局部自定义 "),l("table-column-api-link",{attrs:{prop:"formatter"}}),e._v(" 格式化内容（建议是提前转换好数据，"),l("table-column-api-link",{attrs:{prop:"formatter"}}),e._v(" 一般用于动态的数据，跟随数据的变化而执行）")],1),l("vxe-table",{attrs:{border:"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:""}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"time",title:"Time",formatter:e.formatTime}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),e._m(0),l("p",[e._v("可以通过自定义函数实现统一的格式化处理，这对于很多场景非常有用，减少很多不必要的重复代码")]),l("vxe-table",{attrs:{border:"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{field:"date",title:"转日期",formatter:"toDateString"}}),l("vxe-table-column",{attrs:{field:"time",title:"转日期格式",formatter:["toDateString","yyyy-MM-dd"]}}),l("vxe-table-column",{attrs:{field:"num",title:"转整数",formatter:"toInteger"}}),l("vxe-table-column",{attrs:{field:"num",title:"截取两位小数",formatter:["toFixedString",2]}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")])],1)},n=[function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("p",[e._v("全局格式化内容，会在需要的时候自动调用对应 "),l("a",{staticClass:"link",attrs:{href:"https://xuliangzhan.github.io/xe-utils/#/",target:"_blank"}},[e._v("xe-utils")]),e._v(" 的方法进行数据处理")])}],o=(l("5df3"),l("1c4c"),l("ac6a"),l("1487")),i=l.n(o),d=l("c695"),s=l.n(d),r={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></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="time" title="Time" :formatter="formatTime"></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, 6)\n          },\n          methods: {\n            formatTime ({ cellValue, row, column }) {\n              return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:ss:mm')\n            }\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column field="date" title="转日期" formatter="toDateString"></vxe-table-column>\n          <vxe-table-column field="time" title="转日期格式" :formatter="[\'toDateString\', \'yyyy-MM-dd\']"></vxe-table-column>\n          <vxe-table-column field="num" title="转整数" formatter="toInteger"></vxe-table-column>\n          <vxe-table-column field="num" title="截取两位小数" :formatter="[\'toFixedString\', 2]"></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, 6)\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,6)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})},methods:{formatTime:function(e){var t=e.cellValue;e.row,e.column;return s.a.toDateString(t,"yyyy-MM-dd HH:ss:mm")}}},c=r,v=l("2877"),b=Object(v["a"])(c,a,n,!1,null,null,null);t["default"]=b.exports},b369:function(e,t,l){"use strict";l.r(t);var a=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",[e._v("列选中高亮，通过设置 "),l("table-api-link",{attrs:{prop:"highlight-current-column"}}),e._v(" 参数")],1),l("vxe-table",{attrs:{border:"","highlight-hover-column":"","highlight-current-column":"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),l("p",[e._v("列和行选中高亮，通过设置 "),l("table-api-link",{attrs:{prop:"highlight-hover-row"}}),e._v("、"),l("table-api-link",{attrs:{prop:"highlight-hover-column"}}),e._v(" 参数")],1),l("vxe-table",{attrs:{border:"","highlight-hover-row":"","highlight-current-row":"","highlight-hover-column":"","highlight-current-column":"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")])],1)},n=[],o=(l("5df3"),l("1c4c"),l("ac6a"),l("1487")),i=l.n(o),d={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          highlight-hover-column\n          highlight-current-column\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="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, 5)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          highlight-hover-row\n          highlight-current-row\n          highlight-hover-column\n          highlight-current-column\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="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, 5)\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,5)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})}},s=d,r=l("2877"),c=Object(r["a"])(s,a,n,!1,null,null,null);t["default"]=c.exports},b811:function(e,t,l){"use strict";l.r(t);var a=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",[e._v("当数据结构比较复杂的时候，可以使用多级表头显示更加直观")]),l("vxe-table",{attrs:{border:"",height:"400",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{title:"基本信息"}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name"}})],1),l("vxe-table-column",{attrs:{title:"更多信息"}},[l("vxe-table-column",{attrs:{field:"role",title:"Role"}}),l("vxe-table-column",{attrs:{title:"详细信息"}},[l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}})],1)],1),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),l("p",[e._v("如果使用了分组表头情，则需要按组来设置固定列，且固定列必须是在左右两侧位置，不允许跨列")]),l("vxe-table",{attrs:{border:"",height:"400",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{title:"基本信息"}},[l("vxe-table-column",{attrs:{type:"index",width:"60",fixed:"left"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",fixed:"left",width:"100"}})],1),l("vxe-table-column",{attrs:{title:"更多信息"}},[l("vxe-table-column",{attrs:{field:"role",title:"Role",width:"300"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex",width:"300"}}),l("vxe-table-column",{attrs:{title:"详细信息"}},[l("vxe-table-column",{attrs:{field:"sex",title:"Sex",width:"300"}}),l("vxe-table-column",{attrs:{field:"date",title:"Date",width:"300"}})],1)],1),l("vxe-table-column",{attrs:{field:"address",title:"Address",width:"300",fixed:"right","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")])],1)},n=[],o=(l("5df3"),l("1c4c"),l("ac6a"),l("1487")),i=l.n(o),d={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          height="400"\n          :data.sync="tableData">\n          <vxe-table-column title="基本信息">\n            <vxe-table-column type="index" width="60"></vxe-table-column>\n            <vxe-table-column field="name" title="Name"></vxe-table-column>\n          </vxe-table-column>\n          <vxe-table-column title="更多信息">\n            <vxe-table-column field="role" title="Role"></vxe-table-column>\n            <vxe-table-column title="详细信息">\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>\n          </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, 50)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          height="400"\n          :data.sync="tableData">\n          <vxe-table-column title="基本信息">\n            <vxe-table-column type="index" width="60" fixed="left"></vxe-table-column>\n            <vxe-table-column field="name" title="Name" fixed="left" width="100"></vxe-table-column>\n          </vxe-table-column>\n          <vxe-table-column title="更多信息">\n            <vxe-table-column field="role" title="Role" width="300"></vxe-table-column>\n            <vxe-table-column field="sex" title="Sex" width="300"></vxe-table-column>\n            <vxe-table-column title="详细信息">\n              <vxe-table-column field="sex" title="Sex" width="300"></vxe-table-column>\n              <vxe-table-column field="date" title="Date" width="300"></vxe-table-column>\n            </vxe-table-column>\n          </vxe-table-column>\n          <vxe-table-column field="address" title="Address" width="300" fixed="right" 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, 50)\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,50)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})}},s=d,r=l("2877"),c=Object(r["a"])(s,a,n,!1,null,null,null);t["default"]=c.exports},bb45:function(e,t,l){},c7b5:function(e,t,l){"use strict";l.r(t);var a=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",[e._v("带边框的表格，通过设置 "),l("table-api-link",{attrs:{prop:"border"}}),e._v(" 参数")],1),l("vxe-table",{attrs:{border:"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},n=[],o=(l("5df3"),l("1c4c"),l("ac6a"),l("1487")),i=l.n(o),d={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="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, 6)\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,6)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})}},s=d,r=l("2877"),c=Object(r["a"])(s,a,n,!1,null,null,null);t["default"]=c.exports},db47:function(e,t,l){"use strict";l.r(t);var a=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",[e._v("当纵向内容过多时，固定表头就非常有用了，通过设置 "),l("table-api-link",{attrs:{prop:"height"}}),e._v(" 参数")],1),l("vxe-table",{attrs:{border:"",height:"400",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},n=[],o=(l("5df3"),l("1c4c"),l("ac6a"),l("1487")),i=l.n(o),d={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          height="400"\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="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, 50)\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,50)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})}},s=d,r=l("2877"),c=Object(r["a"])(s,a,n,!1,null,null,null);t["default"]=c.exports},e7ab:function(e,t,l){"use strict";l.r(t);var a=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",[e._v("横纵内容过多时，同时固定列和表头")]),l("vxe-table",{attrs:{border:"",height:"300","highlight-hover-row":"","show-overflow":"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60",fixed:"left"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",width:"300"}}),l("vxe-table-column",{attrs:{field:"role",title:"Role",width:"300"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex",width:"300"}}),l("vxe-table-column",{attrs:{field:"date",title:"Date",width:"300"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address",fixed:"right",width:"300"}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),l("p",[e._v("固定列建议设置 show-overflow 或 show-overflow 该值，禁用自动换行，大幅提升渲染速度")]),l("keep-alive",[e.visible?l("vxe-table",{attrs:{border:"",height:"300","highlight-hover-row":"","show-overflow":"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60",fixed:"left"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",width:"300"}}),l("vxe-table-column",{attrs:{field:"role",title:"Role",width:"300"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex",width:"300"}}),l("vxe-table-column",{attrs:{field:"date",title:"Date",width:"300"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address",fixed:"right",width:"300"}})],1):e._e()],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")])],1)},n=[],o=(l("5df3"),l("1c4c"),l("ac6a"),l("1487")),i=l.n(o),d={data:function(){return{visible:!0,tableData:[],demoCodes:['\n        <vxe-table\n          border\n          height="300"\n          highlight-hover-row\n          show-overflow\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60" fixed="left"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" width="300"></vxe-table-column>\n          <vxe-table-column field="role" title="Role" width="300"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex" width="300"></vxe-table-column>\n          <vxe-table-column field="date" title="Date" width="300"></vxe-table-column>\n          <vxe-table-column field="address" title="Address" fixed="right" width="300"></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, 50)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          height="300"\n          highlight-hover-row\n          show-overflow\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60" fixed="left"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" width="300"></vxe-table-column>\n          <vxe-table-column field="role" title="Role" width="300"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex" width="300"></vxe-table-column>\n          <vxe-table-column field="date" title="Date" width="300"></vxe-table-column>\n          <vxe-table-column field="address" title="Address" fixed="right" width="300"></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, 50)\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,50)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})}},s=d,r=l("2877"),c=Object(r["a"])(s,a,n,!1,null,null,null);t["default"]=c.exports},ed84:function(e,t,l){"use strict";l.r(t);var a=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",[e._v("固定列，通过设置 "),l("table-column-api-link",{attrs:{prop:"fixed"}}),e._v(" 参数")],1),l("p",[e._v("当横向内容过多时，将列固定在左右两侧")]),l("vxe-table",{attrs:{border:"","show-overflow":"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60",fixed:"left"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",width:"300"}}),l("vxe-table-column",{attrs:{field:"role",title:"Role",width:"300"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex",width:"300"}}),l("vxe-table-column",{attrs:{field:"date",title:"Date",width:"300"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address",fixed:"right",width:"300"}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),l("p",[e._v("如果列宽足够的情况下，固定列不会浮动")]),l("vxe-table",{attrs:{border:"","show-overflow":"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"60",fixed:"left"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name"}}),l("vxe-table-column",{attrs:{field:"role",title:"Role"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address",fixed:"right",width:"300"}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")])],1)},n=[],o=(l("5df3"),l("1c4c"),l("ac6a"),l("1487")),i=l.n(o),d={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          show-overflow\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60" fixed="left"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" width="300"></vxe-table-column>\n          <vxe-table-column field="role" title="Role" width="300"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex" width="300"></vxe-table-column>\n          <vxe-table-column field="date" title="Date" width="300"></vxe-table-column>\n          <vxe-table-column field="address" title="Address" fixed="right" width="300"></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, 4)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          show-overflow\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60" fixed="left"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="role" title="Role"></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" fixed="right" width="300"></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, 4)\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,4)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})}},s=d,r=l("2877"),c=Object(r["a"])(s,a,n,!1,null,null,null);t["default"]=c.exports},f11d:function(e,t,l){"use strict";var a=window.document;function n(){var e=a.getElementById("$XECopy");return e||(e=a.createElement("input"),e.id="$XECopy",e.style["width"]="48px",e.style["height"]="12px",e.style["position"]="fixed",e.style["z-index"]="0",e.style["left"]="-500px",e.style["top"]="-500px",a.body.appendChild(e)),e}function o(e){var t=n(),l=null===e||void 0===e?"":""+e;try{return t.value=l,t.focus(),t.setSelectionRange(0,l.length),a.execCommand("copy",!0)}catch(o){}return!1}o.copy=o,t["a"]=o}}]);