vxe-table/docs/static/js/base.cca78477.js

(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",{staticClass:"tip"},[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",{staticClass:"tip"},[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",{staticClass:"tip"},[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",{staticClass:"tip"},[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",{staticClass:"tip"},[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",{staticClass:"tip"},[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",{staticClass:"tip"},[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),s={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)})}},d=s,r=l("2877"),c=Object(r["a"])(d,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",{staticClass:"tip"},[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",{staticClass:"tip"},[e._v("\n    还可以通过 "),l("table-api-link",{attrs:{prop:"checkMethod"}}),e._v(" 方法控制 CheckBox 是否允许用户手动勾选，还可以配置 "),l("table-api-link",{attrs:{prop:"labelField"}}),e._v(" 列显示属性"),l("br"),e._v("\n    禁止用户手动勾选，但是可以通过函数式调用强制勾选，该功能对于某些场景需要强制勾选指定行时非常有用\n  ")],1),l("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[l("vxe-button",{on:{click:function(t){return e.$refs.xTable2.toggleRowSelection(e.tableData[1])}}},[e._v("切换第二行选中")]),l("vxe-button",{on:{click:function(t){return e.$refs.xTable2.setSelection([e.tableData[2],e.tableData[3]],!0)}}},[e._v("设置第三、四行选中")]),l("vxe-button",{on:{click:function(t){return e.$refs.xTable2.setAllSelection(!0)}}},[e._v("设置所有行选中")]),l("vxe-button",{on:{click:function(t){return e.$refs.xTable2.clearSelection()}}},[e._v("清除所有行选中")])]},proxy:!0}])}),l("vxe-table",{ref:"xTable2",attrs:{border:"",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",{staticClass:"tip"},[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",{staticClass:"tip"},[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:"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",{staticClass:"tip"},[e._v("通过 "),l("table-api-link",{attrs:{prop:"checkStrictly"}}),e._v(" 设置父子节点不互相关联，启用后 "),l("table-api-link",{attrs:{prop:"showHeader"}}),e._v(" 默认为 false")],1),l("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[l("vxe-button",{on:{click:function(t){return e.$refs.xTable5.setSelection(e.tableData,!0)}}},[e._v("设置所有行选中")]),l("vxe-button",{on:{click:function(t){return e.$refs.xTable5.clearSelection()}}},[e._v("清除所有行选中")])]},proxy:!0}])}),l("vxe-table",{ref:"xTable5",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",{staticClass:"tip"},[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:"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[11]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[12]))]),e._v("\n  ")]),l("p",{staticClass:"tip"},[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:"Name"}}),l("vxe-table-column",{attrs:{type:"radio",title:"Role"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[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),s={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.$XModal.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="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-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="$refs.xTable5.setSelection(tableData, true)">设置所有行选中</vxe-button>\n            <vxe-button @click="$refs.xTable5.clearSelection()">清除所有行选中</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          border\n          highlight-hover-row\n          ref="xTable5"\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="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          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="Name"></vxe-table-column>\n          <vxe-table-column type="radio" title="Role"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n          <vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 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.$XModal.alert(e.length)}}},d=s,r=(l("39d8"),l("2877")),c=Object(r["a"])(d,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",{staticClass:"tip"},[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),s={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.$XModal.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.$XModal.alert(JSON.stringify(this.$refs.xTable.getCurrentRow()))}}},d=s,r=l("2877"),c=Object(r["a"])(d,a,n,!1,null,null,null);t["default"]=c.exports},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",{staticClass:"tip"},[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",{staticClass:"tip"},[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",{staticClass:"tip"},[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),s={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}}},d=s,r=l("2877"),c=Object(r["a"])(d,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",{staticClass:"tip"},[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",{staticClass:"tip"},[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",{staticClass:"tip"},[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),s={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)})}},d=s,r=l("2877"),c=Object(r["a"])(d,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",{staticClass:"tip"},[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",{staticClass:"tip"},[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),s={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)})}},d=s,r=l("2877"),c=Object(r["a"])(d,a,n,!1,null,null,null);t["default"]=c.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",{staticClass:"tip"},[e._v("\n    通过设置 "),l("table-column-api-link",{attrs:{prop:"filters"}}),e._v(" 属性和 "),l("table-column-api-link",{attrs:{prop:"filter-method"}}),e._v(" 方法可以支持列筛选功能"),l("br"),e._v("\n    如果是服务端筛选，只需加上 "),l("table-api-link",{attrs:{prop:"remote-filter"}}),e._v(" 和 "),l("table-api-link",{attrs:{prop:"filter-change"}}),e._v(" 事件就可以实现"),l("br"),e._v("\n    还可以使用 slot "),l("table-column-api-link",{attrs:{prop:"filter"}}),e._v(" 和 context.changeOption(event, checked, option) 方法来自定义筛选模板\n  ")],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.changeOption(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  ")]),l("p",{staticClass:"tip"},[e._v("默认的筛选，通过 "),l("table-column-api-link",{attrs:{prop:"checked"}}),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,checked:!0}],"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:"30",checked:!0}],"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.changeOption(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[2]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")])],1)},n=[],o=(l("c5f6"),l("5df3"),l("1c4c"),l("ac6a"),l("1487")),i=l.n(o),s={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.changeOption($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        ",'\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, checked: true}]" :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: \'26\', checked: true }]" :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.changeOption($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)}}},d=s,r=l("2877"),c=Object(r["a"])(d,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",{staticClass:"tip"},[e._v("\n    当一个表格需要铺满父容器时，这个功能将非常有用"),l("br"),e._v("\n    通过设置 "),l("table-api-link",{attrs:{prop:"height"}}),e._v("=auto表格会相对于父容器的高度去铺满，但是只会在数据重新加载时才会计算"),l("br"),e._v("\n    还可以根据不同场景添加 "),l("table-api-link",{attrs:{prop:"auto-resize"}}),e._v(" 属性启用自动监听（"),l("table-api-link",{attrs:{prop:"auto-resize"}}),e._v(" 会有额外的损耗，根据需要的场景添加），这样就只需要通过样式控制父容器高度就可以实现响应式表格\n  ")],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),s={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)})}},d=s,r=l("2877"),c=Object(r["a"])(d,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",{staticClass:"tip"},[e._v("\n    当内容或表头超过隐藏时显示为省略号，"),l("table-column-api-link",{attrs:{prop:"show-overflow"}}),e._v(" 和 "),l("table-api-link",{attrs:{prop:"show-header-overflow"}}),l("br"),l("table-column-api-link",{attrs:{prop:"ellipsis"}}),e._v(" 当内容超过时显示为省略号"),l("br"),l("table-column-api-link",{attrs:{prop:"title"}}),e._v(" 当内容超过时显示为省略号并用原生 title 显示"),l("br"),l("table-column-api-link",{attrs:{prop:"tooltip"}}),e._v(" 当内容超过隐藏时显示为省略号并用 tooltip 显示\n  ")],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("span",[e._v("111111111111 111111111111111111 22222222222222222222222222222222222")])]],2),l("vxe-table-column",{attrs:{field:"age",title:"表头超过隐藏时显示为省略号并用原生 title 显示","show-header-overflow":"title"},scopedSlots:e._u([{key:"header",fn:function(){return[l("span",[e._v("33333333333333333333333333 5555555555555555555555555555555555555555555555")])]},proxy:!0}])}),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",{staticClass:"tip"},[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("span",[e._v("111111111111 111111111111111111 22222222222222222222222222222222222")])]],2),l("vxe-table-column",{attrs:{field:"age",title:"表头超过隐藏时显示为省略号并用原生 title 显示","show-header-overflow":"title"},scopedSlots:e._u([{key:"header",fn:function(){return[l("span",[e._v("33333333333333333333333333 5555555555555555555555555555555555555555555555")])]},proxy:!0}])}),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),s={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">\n            <template>\n              <span>111111111111 111111111111111111 22222222222222222222222222222222222</span>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="age" title="表头超过隐藏时显示为省略号并用原生 title 显示" show-header-overflow="title">\n            <template v-slot:header>\n              <span>33333333333333333333333333 5555555555555555555555555555555555555555555555</span>\n            </template>\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, 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">\n            <template>\n              <span>111111111111 111111111111111111 22222222222222222222222222222222222</span>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="age" title="表头超过隐藏时显示为省略号并用原生 title 显示" show-header-overflow="title">\n            <template v-slot:header>\n              <span>33333333333333333333333333 5555555555555555555555555555555555555555555555</span>\n            </template>\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, 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)})}},d=s,r=l("2877"),c=Object(r["a"])(d,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",{staticClass:"tip"},[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",{staticClass:"tip"},[e._v("\n    还可以通过 "),l("table-api-link",{attrs:{prop:"checkMethod"}}),e._v(" 方法控制 CheckBox 是否允许用户手动选中，还可以配置 "),l("table-api-link",{attrs:{prop:"labelField"}}),e._v(" 列显示属性"),l("br"),e._v("\n    禁止用户手动选中，但是可以通过函数式调用强制选中，该功能对于某些场景需要强制选中指定行时非常有用\n  ")],1),l("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[l("vxe-button",{on:{click:function(t){return e.$refs.xTable2.setRadioRow(e.tableData[0],!0)}}},[e._v("设置第一行选中")]),l("vxe-button",{on:{click:function(t){return e.$refs.xTable2.clearRadioRow()}}},[e._v("清除所有行选中")])]},proxy:!0}])}),l("vxe-table",{ref:"xTable2",attrs:{border:"",height:"300","radio-config":{labelField:"name",checkMethod:e.checkMethod},data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[l("vxe-table-column",{attrs:{type:"radio",title:"请选择",width:"100"}}),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[3]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[4]))]),e._v("\n  ")]),l("p",{staticClass:"tip"},[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[5]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[6]))]),e._v("\n  ")]),l("p",{staticClass:"tip"},[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[7]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[8]))]),e._v("\n  ")]),l("p",{staticClass:"tip"},[e._v("两种方式混合使用")]),l("vxe-table",{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[9]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[10]))]),e._v("\n  ")]),l("p",{staticClass:"tip"},[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[11]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[12]))]),e._v("\n  ")])],1)},n=[],o=(l("5df3"),l("1c4c"),l("ac6a"),l("1487")),i=l.n(o),s={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.$XModal.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-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="$refs.xTable2.setRadioRow(tableData[0], true)">设置第一行选中</vxe-button>\n            <vxe-button @click="$refs.xTable2.clearRadioRow()">清除所有行选中</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          border\n          ref="xTable2"\n          height="300"\n          :radio-config="{labelField: \'name\', checkMethod}"\n          :data.sync="tableData">\n          <vxe-table-column type="radio" title="请选择" width="100"></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            checkMethod ({ row }) {\n              return row.age > 26\n            }\n          }\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          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:{checkMethod:function(e){var t=e.row;return t.age>26},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.$XModal.alert(JSON.stringify(this.$refs.xTable1.getRadioRow()))}}},d=s,r=(l("008e"),l("2877")),c=Object(r["a"])(d,a,n,!1,null,null,null);t["default"]=c.exports},"4b04":function(e,t,l){},"4ce9":function(e,t,l){"use strict";l.r(t);var a=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",{staticClass:"tip"},[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",{staticClass:"tip"},[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),s={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}}},d=s,r=(l("300b"),l("2877")),c=Object(r["a"])(d,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",{staticClass:"tip"},[e._v("\n    通过给需要排序功能的列加上 "),l("table-api-link",{attrs:{prop:"sortable"}}),e._v(" 属性可以支持排序，还可以通过设置 "),l("table-api-link",{attrs:{prop:"sort-by"}}),e._v(" 多字段进行排序"),l("br"),e._v("\n    如果是服务端排序，只需加上 "),l("table-column-api-link",{attrs:{prop:"remote-sort"}}),e._v(" 和 "),l("table-api-link",{attrs:{prop:"sort-change"}}),e._v(" 事件就可以实现\n  ")],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",{staticClass:"tip"},[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",{staticClass:"tip"},[e._v("配置 "),l("table-column-api-link",{attrs:{prop:"sort-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",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:"","sort-method":e.sortNameMethod}}),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"}})],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",{staticClass:"tip"},[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[6]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[7]))]),e._v("\n  ")])],1)},n=[],o=(l("7f7f"),l("5df3"),l("1c4c"),l("ac6a"),l("1487")),i=l.n(o),s={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          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 :sort-method="sortNameMethod"></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"></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            sortNameMethod (a, b) {\n              // 例如：名称不区分大小写的排序\n              var v1 = (a.name || '').toLowerCase()\n              var v2 = (b.name || '').toLowerCase()\n              return v1 < v2 ? -1 : v1 > v2 ? 1 : 0\n            }\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)})},methods:{sortNameMethod:function(e,t){var l=(e.name||"").toLowerCase(),a=(t.name||"").toLowerCase();return l<a?-1:l>a?1:0}}},d=s,r=l("2877"),c=Object(r["a"])(d,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",{staticClass:"tip"},[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",{staticClass:"tip"},[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",{staticClass:"tip"},[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",{staticClass:"tip"},[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),s={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)})}},d=s,r=l("2877"),c=Object(r["a"])(d,a,n,!1,null,null,null);t["default"]=c.exports},6921:function(e,t,l){},"6dcda":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",{staticClass:"tip"},[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",{staticClass:"tip"},[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),s={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)})}},d=s,r=l("2877"),c=Object(r["a"])(d,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",{staticClass:"tip"},[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",{staticClass:"tip"},[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),s={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)})}},d=s,r=l("2877"),c=Object(r["a"])(d,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",{staticClass:"tip"},[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",{staticClass:"tip"},[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),s={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)})}},d=s,r=l("2877"),c=Object(r["a"])(d,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",{staticClass:"tip"},[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",{staticClass:"tip"},[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",{staticClass:"tip"},[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),s={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)})}},d=s,r=l("2877"),c=Object(r["a"])(d,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",{staticClass:"tip"},[e._v("局部自定义 "),l("table-column-api-link",{attrs:{prop:"formatter"}}),e._v(" 格式化内容，"),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",formatter:e.formatterSex}}),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("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]}}),l("vxe-table-column",{attrs:{field:"sex",title:"格式化性别",formatter:"toSex"}})],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",{staticClass:"tip"},[e._v("\n    全局格式化内容，会在需要的时候自动调用对应 "),l("a",{staticClass:"link",attrs:{href:"https://xuliangzhan.github.io/xe-utils/#/",target:"_blank"}},[e._v("xe-utils")]),e._v(" 函数库的方法进行数据处理"),l("br"),e._v("\n    可以通过自定义函数实现统一的格式化处理，这对于很多场景非常有用，减少很多不必要的重复代码\n  ")])}],o=(l("5df3"),l("1c4c"),l("ac6a"),l("1487")),i=l.n(o),s=l("c695"),d=l.n(s);d.a.mixin({toSex:function(e){return"1"===e?"男":"0"===e?"女":""}});var 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" :formatter="formatterSex"></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            formatterSex ({ cellValue }) {\n              return cellValue === '1' ? '男' : cellValue === '0' ? '女' : ''\n            },\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-column field="sex" title="格式化性别" formatter="toSex"></vxe-table-column>\n        </vxe-table>\n        ',"\n        XEUtils.mixin({\n          toSex (cellValue) {\n            return cellValue === '1' ? '男' : cellValue === '0' ? '女' : ''\n          }\n        })\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:{formatterSex:function(e){var t=e.cellValue;return"1"===t?"男":"0"===t?"女":""},formatTime:function(e){var t=e.cellValue;e.row,e.column;return d.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",{staticClass:"tip"},[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",{staticClass:"tip"},[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),s={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)})}},d=s,r=l("2877"),c=Object(r["a"])(d,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",{staticClass:"tip"},[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",{staticClass:"tip"},[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),s={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)})}},d=s,r=l("2877"),c=Object(r["a"])(d,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",{staticClass:"tip"},[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),s={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)})}},d=s,r=l("2877"),c=Object(r["a"])(d,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",{staticClass:"tip"},[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),s={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)})}},d=s,r=l("2877"),c=Object(r["a"])(d,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",{staticClass:"tip"},[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",{staticClass:"tip"},[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),s={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)})}},d=s,r=l("2877"),c=Object(r["a"])(d,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",{staticClass:"tip"},[e._v("\n    固定列，通过设置 "),l("table-column-api-link",{attrs:{prop:"fixed"}}),e._v(" 参数"),l("br"),e._v("\n    当横向内容过多时，将列固定在左右两侧\n  ")],1),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",{staticClass:"tip"},[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),s={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)})}},d=s,r=l("2877"),c=Object(r["a"])(d,a,n,!1,null,null,null);t["default"]=c.exports}}]);