lxm_front/vxe-table
1
0
Fork 0
mirror of https://gitee.com/xuliangzhan_admin/vxe-table.git synced 2026-01-21 05:27:57 +08:00
Code Issues Projects Releases Wiki Activity
Files
94de2c2a0f1cb407c803b75d1b7d18d4d174b1f8
vxe-table/docs/static/js/base.16775285.js
xuliangzhan c02d7bc112 update
2019-08-04 19:51:56 +08:00

1 line
144 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
(window["webpackJsonpVXETable"]=window["webpackJsonpVXETable"]||[]).push([["base"],{"008e":function(e,t,l){"use strict";var a=l("6921"),n=l.n(a);n.a},"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("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:"","show-header-overflow":"","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 ")]),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",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:{title:"其他信息"}},[l("vxe-table-column",{attrs:{field:"age",title:"Age",width:"100",fixed:"right","show-overflow":""}}),l("vxe-table-column",{attrs:{field:"address",title:"Address",width:"100",fixed:"right","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[12]))]),e._v("\n "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[13]))]),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 show-header-overflow\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 ",'\n <vxe-table\n border\n resizable\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 title="其他信息">\n <vxe-table-column field="age" title="Age" width="100" fixed="right" show-overflow></vxe-table-column>\n <vxe-table-column field="address" title="Address" width="100" fixed="right" show-overflow></vxe-table-column>\n </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("清除所有行选中")]),l("vxe-button",{on:{click:e.getSelectEvent1}},[e._v("获取选中")])]},proxy:!0}])}),l("vxe-table",{ref:"xTable1",attrs:{border:"",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("p",{staticClass:"red"},[e._v("禁止用户手动勾选，但是可以通过函数式调用强制勾选，该功能对于某些场景需要强制勾选指定行时非常有用")]),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:"",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",staticClass:"checkbox-table",attrs:{border:"","highlight-hover-row":"","row-class-name":e.rowClassName,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("code",{staticClass:"scss"},[e._v(e._s(e.demoCodes[6]))]),e._v("\n ")]),l("p",[e._v("默认选中，通过指定 "),l("table-api-link",{attrs:{prop:"checkRowKeys"}}),e._v(" 设置默认选中的行，指定默认值需要有 "),l("table-api-link",{attrs:{prop:"row-id"}})],1),l("vxe-table",{attrs:{border:"","highlight-hover-row":"","row-id":"id",data:e.tableData,"select-config":{checkRowKeys:["2","3"]},"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:"300",title:"Sex"}}),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[7]))]),e._v("\n "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[8]))]),e._v("\n ")]),l("p",[e._v("通过 "),l("table-api-link",{attrs:{prop:"checkStrictly"}}),e._v(" 设置父子节点不互相关联")],1),l("vxe-table",{attrs:{border:"","highlight-hover-row":"",data:e.tableData,"select-config":{checkStrictly:!0}},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"selection",width:"60","tree-node":""}}),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[9]))]),e._v("\n "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[10]))]),e._v("\n ")]),l("p",[e._v("多选可单选同时使用")]),l("vxe-table",{attrs:{border:"","highlight-hover-row":"",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:"300",title:"Sex"}}),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[11]))]),e._v("\n "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[12]))]),e._v("\n ")]),l("p",[e._v("不仅如此，还可以多种方式混合使用")]),l("vxe-table",{attrs:{border:"",resizable:"","highlight-hover-row":"","highlight-current-row":"",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:"Sex"}}),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[13]))]),e._v("\n "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[14]))]),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 <vxe-button @click="getSelectEvent1">获取选中</vxe-button>\n </template>\n </vxe-toolbar>\n\n <vxe-table\n border\n ref="xTable1"\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, 5)\n },\n methods: {\n selectAllEvent ({ checked }) {\n console.log(checked ? '所有勾选事件' : '所有取消事件')\n },\n selectChangeEvent ({ checked, row }) {\n console.log(checked ? '勾选事件' : '取消事件')\n },\n getSelectEvent () {\n let updateRecords = this.$refs.xTable1.getSelectRecords()\n this.$XMsg.alert(updateRecords.length)\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 border\n ref="xTable2"\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, 5)\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 class="checkbox-table"\n ref="xTable3"\n :row-class-name="rowClassName"\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, 5)\n },\n methods: {\n rowClassName ({ row }) {\n return {\n 'row-checked': row.checked\n }\n }\n }\n }\n ","\n .checkbox-table.vxe-table .vxe-body--row.row-checked {\n background-color: #fbf8ec;\n }\n ",'\n <vxe-table\n border\n highlight-hover-row\n row-id="id"\n :data.sync="tableData"\n :select-config="{checkRowKeys: [\'2\', \'3\']}"\n :radio-config="{labelField: \'name\'}">\n <vxe-table-column type="selection" width="60"></vxe-table-column>\n <vxe-table-column type="radio" width="300" title="Sex"></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 :data.sync="tableData"\n :select-config="{checkStrictly: true}">\n <vxe-table-column type="selection" width="60" tree-node></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 :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="300" title="Sex"></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 resizable\n highlight-hover-row\n highlight-current-row\n :data.sync="tableData"\n :radio-config="{labelField: \'role\'}"\n :select-config="{labelField: \'name\'}">\n <vxe-table-column type="selection" title="Sex"></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, 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)})},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?"勾选事件":"取消事件")},rowClassName:function(e){var t=e.row;return{"row-checked":t.checked}},getSelectEvent1:function(){var e=this.$refs.xTable1.getSelectRecords();this.$XMsg.alert(e.length)}}},s=d,r=(l("39d8"),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("取消选中")]),l("vxe-button",{on:{click:e.getCurrentEvent}},[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 <vxe-button @click="getCurrentEvent">获取高亮行</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 getCurrentEvent () {\n this.$XMsg.alert(JSON.stringify(this.$refs.xTable.getCurrentRow()))\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("行选中事件")},getCurrentEvent:function(){this.$XMsg.alert(JSON.stringify(this.$refs.xTable.getCurrentRow()))}}},s=d,r=l("2877"),c=Object(r["a"])(s,a,n,!1,null,null,null);t["default"]=c.exports},"172c":function(e,t,l){"use strict";var a=l("4b22"),n=l.n(a);n.a},19916:function(e,t,l){},"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("设置 "),l("table-column-api-link",{attrs:{prop:"type"}}),e._v("=index 开启序号列")],1),l("vxe-table",{attrs:{border:"",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("table-api-link",{attrs:{prop:"start-index"}}),e._v(" 自定义起始序号")],1),l("vxe-table",{attrs:{border:"","highlight-hover-row":"",height:"300","start-index":100,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",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 ")]),l("p",[e._v("使用 "),l("table-column-api-link",{attrs:{prop:"index-method"}}),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",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),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 ")])],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="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 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 :start-index="100"\n :data.sync="tableData">\n <vxe-table-column type="index" title="序号" 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.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" title="序号" width="60" :index-method="indexMethod"></vxe-table-column>\n <vxe-table-column field="name" title="Name" sortable></vxe-table-column>\n <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n <vxe-table-column field="age" title="Age"></vxe-table-column>\n <vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n tableData: []\n }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 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)})},methods:{indexMethod:function(e){var t=e.rowIndex;return 2*t}}},s=d,r=l("2877"),c=Object(r["a"])(s,a,n,!1,null,null,null);t["default"]=c.exports},"300b":function(e,t,l){"use strict";var a=l("4b04"),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("出现滚动条")]),l("vxe-table",{attrs:{border:"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"index",width:"100"}}),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:"date",title:"Date",width:"300"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age",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[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:{border:"",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:"app.body.label.name"}}),l("vxe-table-column",{attrs:{field:"sex",title:"app.body.label.sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"app.body.label.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="app.body.label.name"></vxe-table-column>\n <vxe-table-column field="sex" title="app.body.label.sex"></vxe-table-column>\n <vxe-table-column field="age" title="app.body.label.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:"StartUse"}}},[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("172c"),l("2877")),v=Object(c["a"])(r,a,n,!1,null,"63de92b9",null);t["default"]=v.exports},"39d8":function(e,t,l){"use strict";var a=l("19916"),n=l.n(a);n.a},"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:"600px"}},[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 ")]),l("p",[e._v("也可以设置相对于父容器的百分比")]),l("div",{staticStyle:{height:"600px"}},[l("vxe-table",{attrs:{border:"",height:"40%",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("vxe-table",{attrs:{border:"",height:"60%",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[2]))]),e._v("\n "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),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: 600px">\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, 20)\n }\n }\n ",'\n <div style="height: 600px">\n <vxe-table\n border\n height="40%"\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 <vxe-table\n border\n height="60%"\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, 20)\n }\n }\n "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,20)},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:e.clearRadioRowEevnt}},[e._v("取消选中")]),l("vxe-button",{on:{click:e.getRadioEvent1}},[e._v("获取选中")])]},proxy:!0}])}),l("vxe-table",{ref:"xTable1",staticClass:"radio-table",attrs:{border:"",height:"300",data:e.tableData,"row-class-name":e.rowClassName},on:{"update:data":function(t){e.tableData=t},"radio-change":e.radioChangeEvent}},[l("vxe-table-column",{attrs:{type:"radio",width:"60"},scopedSlots:e._u([{key:"header",fn:function(){return[l("vxe-button",{attrs:{type:"text",disabled:!e.selectRow},on:{click:e.clearRadioRowEevnt}},[e._v("取消")])]},proxy:!0}])}),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("code",{staticClass:"scss"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n ")]),l("p",[e._v("默认选中，通过指定 "),l("table-api-link",{attrs:{prop:"checkRowKey"}}),e._v(" 设置默认选中的行，指定默认值需要有 "),l("table-api-link",{attrs:{prop:"row-id"}})],1),l("vxe-table",{attrs:{border:"",height:"300","row-id":"id",data:e.tableData,"radio-config":{checkRowKey:"2"}},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"radio",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:"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("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[5]))]),e._v("\n "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[6]))]),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[7]))]),e._v("\n "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[8]))]),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[9]))]),e._v("\n "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[10]))]),e._v("\n ")])],1)},n=[],o=(l("5df3"),l("1c4c"),l("ac6a"),l("1487")),i=l.n(o),d={data:function(){return{tableData:[],selectRow:null,demoCodes:['\n <vxe-toolbar>\n <template v-slot:buttons>\n <vxe-button @click="$refs.xTable1.setRadioRow(tableData[1])">设置第二行选中</vxe-button>\n <vxe-button @click="clearRadioRowEevnt">取消选中</vxe-button>\n <vxe-button @click="getRadioEvent1">获取选中</vxe-button>\n </template>\n </vxe-toolbar>\n\n <vxe-table\n border\n ref="xTable1"\n class="radio-table"\n height="300"\n :data.sync="tableData"\n :row-class-name="rowClassName"\n @radio-change="radioChangeEvent">\n <vxe-table-column type="radio" width="60">\n <template v-slot:header>\n <vxe-button type="text" @click="clearRadioRowEevnt" :disabled="!selectRow">取消</vxe-button>\n </template>\n </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 selectRow: null\n }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n },\n methods: {\n radioChangeEvent ({ row }) {\n this.selectRow = row\n console.log('单选事件')\n },\n clearRadioRowEevnt () {\n this.selectRow = null\n this.$refs.xTable1.clearRadioRow()\n },\n rowClassName ({ row }) {\n return {\n 'row-checked': this.selectRow === row\n }\n },\n getRadioEvent1 () {\n this.$XMsg.alert(JSON.stringify(this.$refs.xTable1.getRadioRow()))\n }\n }\n }\n ","\n .radio-table.vxe-table .vxe-body--row.row-checked {\n background-color: #fbf8ec;\n }\n ",'\n <vxe-table\n border\n height="300"\n row-id="id"\n :data.sync="tableData"\n :radio-config="{checkRowKey: \'2\'}">\n <vxe-table-column type="radio" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name"></vxe-table-column>\n <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n <vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>\n </vxe-table>\n ',"\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-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){var t=e.row;this.selectRow=t,console.log("单选事件")},clearRadioRowEevnt:function(){this.selectRow=null,this.$refs.xTable1.clearRadioRow()},rowClassName:function(e){var t=e.row;return{"row-checked":this.selectRow===t}},getRadioEvent1:function(){this.$XMsg.alert(JSON.stringify(this.$refs.xTable1.getRadioRow()))}}},s=d,r=(l("008e"),l("2877")),c=Object(r["a"])(s,a,n,!1,null,null,null);t["default"]=c.exports},"4b04":function(e,t,l){},"4b22":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="cellClassName"\n :data.sync="tableData"\n @cell-click="cellClickEvent">\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 cellClassName ({ row, column }) {\n if (row === this.selectRow & column === this.selectColumn) {\n return 'col-orange'\n }\n },\n cellClickEvent ({ row, column }) {\n this.selectRow = row\n this.selectColumn = column\n }\n }\n }\n ","\n .mytable-style.vxe-table .vxe-body--row.row-green {\n background-color: #187;\n color: #fff;\n }\n .mytable-style.vxe-table .vxe-header--column.col-blue {\n background-color: #2db7f5;\n color: #fff;\n }\n .mytable-style.vxe-table .vxe-body--column.col-red {\n background-color: red;\n color: #fff;\n }\n .mytable-style.vxe-table .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:"nickname",title:"Nickname",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:"nickname",title:"Nickname",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 ")]),l("p",[e._v("点击表头排序，可以通过配置 trigger 设置触发源")]),l("vxe-table",{ref:"xTable",attrs:{border:"","highlight-hover-row":"","highlight-hover-column":"",height:"300",data:e.tableData,"sort-config":{trigger:"cell"}},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:"nickname",title:"Nickname",sortable:""}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex",sortable:""}}),l("vxe-table-column",{attrs:{field:"age",title:"Age",sortable:""}}),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[4]))]),e._v("\n "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[5]))]),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="nickname" title="Nickname" 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="nickname" title="Nickname" 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 ",'\n <vxe-table\n border\n highlight-hover-row\n highlight-hover-column\n ref="xTable"\n height="300"\n :data.sync="tableData"\n :sort-config="{trigger: \'cell\'}">\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="nickname" title="Nickname" sortable></vxe-table-column>\n <vxe-table-column field="sex" title="Sex" sortable></vxe-table-column>\n <vxe-table-column field="age" title="Age" sortable></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 "]}},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},6921:function(e,t,l){},"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 ")]),l("p",[e._v("也可以设置相对于父容器的百分比")]),l("div",{staticStyle:{height:"500px"}},[l("vxe-table",{attrs:{border:"","highlight-hover-row":"","max-height":"100%",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)],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 ")])],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 ",'\n <div style="height: 500px;">\n <vxe-table\n border\n highlight-hover-row\n max-height="100%"\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 </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),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(" 格式化内容")],1),l("p",[l("table-column-api-link",{attrs:{prop:"formatter"}}),e._v(" 会确保在指定的 "),l("table-column-api-link",{attrs:{prop:"field"}}),e._v(" 值发生改变时调用，如果想要多字段关联变化请使用"),l("router-link",{staticClass:"nav-link",attrs:{to:{name:"TableTemplate"}}},[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},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),e._m(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[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("pre",[e._v(" "),l("code",[e._v("\n | Arrow Up ↑ | 匀速向上滚动数据 |\n | Arrow Down ↓ | 匀速向下滚动数据 |\n | Arrow Left ← | 匀速向左滚动数据 |\n | Arrow Right → | 匀速向右滚动数据 |\n ")]),e._v("\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,n=a.createElement("textarea");function o(e){var t=n.style;n.id="$XECopy",t.width="48px",t.height="24px",t.position="fixed",t.zIndex="0",t.left="-500px",t.top="-500px",n.value=null===e||void 0===e?"":""+e,n.parentNode||a.body.appendChild(n)}function i(e){return n.focus(),n.select(),n.setSelectionRange(0,n.value.length),a.execCommand("copy",!!e)}function d(e){var t=!1;try{o(e),t=i(),t||(t=i(1))}catch(l){}return t}d.copy=d,t["a"]=d}}]);
Reference in New Issue View Git Blame Copy Permalink