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

(window["webpackJsonpVXETable"]=window["webpackJsonpVXETable"]||[]).push([["base"],{"069f":function(e,t,l){"use strict";l.r(t);var a=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",{staticClass:"tip"},[e._v("通过设置 "),l("table-api-link",{attrs:{prop:"resizable"}}),e._v(" 属性启用列宽拖动功能")],1),l("vxe-table",{attrs:{resizable:"",data:e.tableData}},[l("vxe-table-column",{attrs:{type:"seq",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:"","highlight-hover-row":"",data:e.tableData}},[l("vxe-table-column",{attrs:{type:"seq",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}},[l("vxe-table-column",{attrs:{type:"seq",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}},[l("vxe-table-column",{attrs:{type:"seq",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":"",data:e.tableData}},[l("vxe-table-column",{attrs:{type:"seq",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 其他2",width:"200"}}),l("vxe-table-column",{attrs:{field:"atrr3",title:"atrr3",width:"200"}}),l("vxe-table-column",{attrs:{field:"atrr4",title:"atrr4 其他4",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}},[l("vxe-table-column",{attrs:{title:"基本信息"}},[l("vxe-table-column",{attrs:{type:"seq",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}},[l("vxe-table-column",{attrs:{title:"基本信息"}},[l("vxe-table-column",{attrs:{type:"seq",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("4160"),l("a630"),l("fb6a"),l("3ca3"),l("159b"),l("1487")),i=l.n(o),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          resizable\n          :data="tableData">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n          <vxe-table-column field="time" title="Time"></vxe-table-column>\n          <vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 3)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          resizable\n          highlight-hover-row\n          :data="tableData">\n          <vxe-table-column type="seq" 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="tableData">\n          <vxe-table-column type="seq" 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="tableData">\n          <vxe-table-column type="seq" 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          :data="tableData">\n          <vxe-table-column type="seq" 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 其他2" 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 其他4" 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="tableData">\n          <vxe-table-column title="基本信息">\n            <vxe-table-column type="seq" 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="tableData">\n          <vxe-table-column title="基本信息">\n            <vxe-table-column type="seq" 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)}))}},r=s,c=l("2877"),d=Object(c["a"])(r,a,n,!1,null,null,null);t["default"]=d.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:"checkbox-change"}})],1),l("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[l("vxe-button",{on:{click:function(t){return e.$refs.xTable1.toggleCheckboxRow(e.tableData[1])}}},[e._v("切换第二行选中")]),l("vxe-button",{on:{click:function(t){return e.$refs.xTable1.setCheckboxRow([e.tableData[2],e.tableData[3]],!0)}}},[e._v("设置第三、四行选中")]),l("vxe-button",{on:{click:function(t){return e.$refs.xTable1.setAllCheckboxRow(!0)}}},[e._v("设置所有行选中")]),l("vxe-button",{on:{click:function(t){return e.$refs.xTable1.clearCheckboxRow()}}},[e._v("清除所有行选中")]),l("vxe-button",{on:{click:e.getSelectEvent1}},[e._v("获取选中")])]},proxy:!0}])}),l("vxe-table",{ref:"xTable1",attrs:{border:"",data:e.tableData},on:{"checkbox-all":e.selectAllEvent,"checkbox-change":e.selectChangeEvent}},[l("vxe-table-column",{attrs:{type:"checkbox",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:"checkMethod"}}),e._v(" 方法控制 checkbox 是否允许用户手动勾选，还可以配置 "),l("table-api-link",{attrs:{prop:"labelField"}}),e._v(" 列显示属性"),l("br"),e._v(" 禁止用户手动勾选，但是可以通过函数式调用强制勾选，该功能对于某些场景需要强制勾选指定行时非常有用 ")],1),l("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[l("vxe-button",{on:{click:function(t){return e.$refs.xTable2.toggleCheckboxRow(e.tableData[1])}}},[e._v("切换第二行选中")]),l("vxe-button",{on:{click:function(t){return e.$refs.xTable2.setCheckboxRow([e.tableData[2],e.tableData[3]],!0)}}},[e._v("设置第三、四行选中")]),l("vxe-button",{on:{click:function(t){return e.$refs.xTable2.setAllCheckboxRow(!0)}}},[e._v("设置所有行选中")]),l("vxe-button",{on:{click:function(t){return e.$refs.xTable2.clearCheckboxRow()}}},[e._v("清除所有行选中")])]},proxy:!0}])}),l("vxe-table",{ref:"xTable2",attrs:{border:"",data:e.tableData,"checkbox-config":{labelField:"name",checkMethod:e.checkMethod}}},[l("vxe-table-column",{attrs:{type:"checkbox",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.toggleCheckboxRow(e.tableData[1])}}},[e._v("切换第二行选中")]),l("vxe-button",{on:{click:function(t){return e.$refs.xTable3.setCheckboxRow([e.tableData[2],e.tableData[3]],!0)}}},[e._v("设置第三、四行选中")]),l("vxe-button",{on:{click:function(t){return e.$refs.xTable3.setAllCheckboxRow(!0)}}},[e._v("设置所有行选中")]),l("vxe-button",{on:{click:function(t){return e.$refs.xTable3.clearCheckboxRow()}}},[e._v("清除所有行选中")])]},proxy:!0}])}),l("vxe-table",{ref:"xTable3",staticClass:"checkbox-table",attrs:{border:"","highlight-hover-row":"",data:e.tableData,"checkbox-config":{checkField:"checked",trigger:"row"}}},[l("vxe-table-column",{attrs:{type:"checkbox",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:"checkRowKeys"}}),e._v(" 设置默认选中的行，指定默认值需要有 "),l("table-api-link",{attrs:{prop:"row-id"}}),e._v("，通过 "),l("table-api-link",{attrs:{prop:"highlight"}}),e._v(" 设置高亮选中行")],1),l("vxe-table",{attrs:{border:"","highlight-hover-row":"","row-id":"id",data:e.tableData,"checkbox-config":{checkRowKeys:["2","3"],highlight:!0},"radio-config":{labelField:"name"}}},[l("vxe-table-column",{attrs:{type:"checkbox",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[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("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.setCheckboxRow(e.tableData,!0)}}},[e._v("设置所有行选中")]),l("vxe-button",{on:{click:function(t){return e.$refs.xTable5.clearCheckboxRow()}}},[e._v("清除所有行选中")])]},proxy:!0}])}),l("vxe-table",{ref:"xTable5",attrs:{border:"","highlight-hover-row":"",data:e.tableData,"checkbox-config":{checkStrictly:!0}}},[l("vxe-table-column",{attrs:{type:"checkbox",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[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:"","highlight-hover-row":"",data:e.tableData,"radio-config":{labelField:"name"}}},[l("vxe-table-column",{attrs:{type:"checkbox",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("table-api-link",{attrs:{prop:"range"}}),e._v(" 启用范围选中")],1),l("vxe-table",{attrs:{border:"",resizable:"","highlight-hover-row":"","highlight-current-row":"",data:e.tableData,"radio-config":{labelField:"role"},"checkbox-config":{labelField:"name",highlight:!0,range:!0}}},[l("vxe-table-column",{attrs:{type:"checkbox",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("4160"),l("a630"),l("fb6a"),l("3ca3"),l("159b"),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.toggleCheckboxRow(tableData[1])">切换第二行选中</vxe-button>\n            <vxe-button @click="$refs.xTable1.setCheckboxRow([tableData[2], tableData[3]], true)">设置第三、四行选中</vxe-button>\n            <vxe-button @click="$refs.xTable1.setAllCheckboxRow(true)">设置所有行选中</vxe-button>\n            <vxe-button @click="$refs.xTable1.clearCheckboxRow()">清除所有行选中</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="tableData"\n          @checkbox-all="selectAllEvent"\n          @checkbox-change="selectChangeEvent">\n          <vxe-table-column type="checkbox" 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 selectRecords = this.$refs.xTable1.getCheckboxRecords()\n              this.$XModal.alert(selectRecords.length)\n            }\n          }\n        }\n        ",'\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="$refs.xTable2.toggleCheckboxRow(tableData[1])">切换第二行选中</vxe-button>\n            <vxe-button @click="$refs.xTable2.setCheckboxRow([tableData[2], tableData[3]], true)">设置第三、四行选中</vxe-button>\n            <vxe-button @click="$refs.xTable2.setAllCheckboxRow(true)">设置所有行选中</vxe-button>\n            <vxe-button @click="$refs.xTable2.clearCheckboxRow()">清除所有行选中</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          border\n          ref="xTable2"\n          :data="tableData"\n          :checkbox-config="{labelField: \'name\', checkMethod}">\n          <vxe-table-column type="checkbox" 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.toggleCheckboxRow(tableData[1])">切换第二行选中</vxe-button>\n            <vxe-button @click="$refs.xTable3.setCheckboxRow([tableData[2], tableData[3]], true)">设置第三、四行选中</vxe-button>\n            <vxe-button @click="$refs.xTable3.setAllCheckboxRow(true)">设置所有行选中</vxe-button>\n            <vxe-button @click="$refs.xTable3.clearCheckboxRow()">清除所有行选中</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          :data="tableData"\n          :checkbox-config="{checkField: \'checked\', trigger: \'row\'}">\n          <vxe-table-column type="checkbox" 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          row-id="id"\n          :data="tableData"\n          :checkbox-config="{checkRowKeys: [\'2\', \'3\'], highlight: true}"\n          :radio-config="{labelField: \'name\'}">\n          <vxe-table-column type="checkbox" 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.setCheckboxRow(tableData, true)">设置所有行选中</vxe-button>\n            <vxe-button @click="$refs.xTable5.clearCheckboxRow()">清除所有行选中</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          border\n          highlight-hover-row\n          ref="xTable5"\n          :data="tableData"\n          :checkbox-config="{checkStrictly: true}">\n          <vxe-table-column type="checkbox" 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          :data="tableData"\n          :radio-config="{labelField: \'name\'}">\n          <vxe-table-column type="checkbox" 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="tableData"\n          :radio-config="{labelField: \'role\'}"\n          :checkbox-config="{labelField: \'name\', highlight: true, range: true}">\n          <vxe-table-column type="checkbox" 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?"勾选事件":"取消事件")},getSelectEvent1:function(){var e=this.$refs.xTable1.getCheckboxRecords();this.$XModal.alert(e.length)}}},r=s,c=l("2877"),d=Object(c["a"])(r,a,n,!1,null,null,null);t["default"]=d.exports},"129a":function(e,t,l){},"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:{"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("4160"),l("a630"),l("fb6a"),l("3ca3"),l("159b"),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="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.getCurrentRecord()))\n            }\n          }\n        }\n        "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,6)},methods:{currentChangeEvent:function(e){e.row;console.log("行选中事件")},getCurrentEvent:function(){this.$XModal.alert(JSON.stringify(this.$refs.xTable.getCurrentRecord()))}}},r=s,c=l("2877"),d=Object(c["a"])(r,a,n,!1,null,null,null);t["default"]=d.exports},"18f6":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",[e._m(0),l("vxe-table",{attrs:{border:"","header-cell-style":e.headerCellStyle,"row-style":e.rowStyle,"cell-style":e.cellStyle,data:e.tableData}},[l("vxe-table-column",{attrs:{type:"seq",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  ")])],1)},n=[function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("p",{staticClass:"tip"},[e._v(" 行的动态样色、单元格动态样式，表头的动态样式、表尾的动态样式、全部都可以完全自定义"),l("br"),l("span",{staticClass:"red"},[e._v("（注：当自定义样式之后可能会覆盖表格的样式，比如选中行..等，记得自行处理好相关样式）")])])}],o=(l("4160"),l("a630"),l("caad"),l("fb6a"),l("3ca3"),l("159b"),l("1487")),i=l.n(o),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          :header-cell-style="headerCellStyle"\n          :row-style="rowStyle"\n          :cell-style="cellStyle"\n          :data="tableData">\n          <vxe-table-column type="seq" 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            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n          },\n          methods: {\n            headerCellStyle ({ column, columnIndex }) {\n              if (column.property === 'name') {\n                return {\n                  backgroundColor: '#f60',\n                  color: '#ffffff'\n                }\n              }\n            },\n            rowStyle ({ row, rowIndex }) {\n              if ([2, 3, 5].includes(rowIndex)) {\n                return {\n                  backgroundColor: 'red',\n                  color: '#ffffff'\n                }\n              }\n            },\n            cellStyle ({ row, rowIndex, column, columnIndex }) {\n              if (column.property === 'sex') {\n                if (row.sex >= '1') {\n                  return {\n                    backgroundColor: '#187'\n                  }\n                } else if (row.age === 26) {\n                  return {\n                    backgroundColor: '#2db7f5'\n                  }\n                }\n              }\n            }\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:{headerCellStyle:function(e){var t=e.column;e.columnIndex;if("name"===t.property)return{backgroundColor:"#f60",color:"#ffffff"}},rowStyle:function(e){e.row;var t=e.rowIndex;if([2,3,5].includes(t))return{backgroundColor:"red",color:"#ffffff"}},cellStyle:function(e){var t=e.row,l=(e.rowIndex,e.column);e.columnIndex;if("sex"===l.property){if(t.sex>="1")return{backgroundColor:"#187"};if(26===t.age)return{backgroundColor:"#2db7f5"}}}}},r=s,c=l("2877"),d=Object(c["a"])(r,a,n,!1,null,null,null);t["default"]=d.exports},"300b":function(e,t,l){"use strict";var a=l("129a"),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("router-link",{staticClass:"link",attrs:{to:{name:"RendererEmpty"}}},[e._v("渲染器")]),e._v(" 实现全局复用")],1),l("vxe-table",{attrs:{data:e.tableData}},[l("vxe-table-column",{attrs:{type:"seq",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("可以通过 slot="),l("table-api-link",{attrs:{prop:"empty"}}),e._v(" 自定义提示语")],1),l("vxe-table",{attrs:{border:"",loading:e.loading,data:e.tableData},scopedSlots:e._u([{key:"empty",fn:function(){return[l("span",{staticStyle:{color:"red"}},[l("img",{attrs:{src:"static/other/img2.gif"}}),l("p",[e._v("没有更多数据了！")])])]},proxy:!0}])},[l("vxe-table-column",{attrs:{type:"seq",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("vxe-table",{attrs:{border:"",height:"300",loading:e.loading,data:e.tableData},scopedSlots:e._u([{key:"empty",fn:function(){return[l("span",{staticStyle:{color:"red"}},[l("img",{attrs:{src:"static/other/img1.gif"}}),l("p",[e._v("不用再看了，没有更多数据了！")])])]},proxy:!0}])},[l("vxe-table-column",{attrs:{type:"seq",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:"date12",title:"Date",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[4]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[5]))]),e._v("\n  ")])],1)},n=[],o=(l("4160"),l("a630"),l("3ca3"),l("159b"),l("1487")),i=l.n(o),s={data:function(){return{loading:!1,tableData:[],tableData2:[],demoCodes:['\n        <vxe-table\n          :data="tableData">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            setTimeout(() => {\n              this.tableData = []\n            }, 1000)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          :loading="loading"\n          :data="tableData">\n          <vxe-table-column type="seq" 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;">\n              <img src="static/other/img2.gif">\n              <p>没有更多数据了！</p>\n            </span>\n          </template>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              loading: false,\n              tableData: []\n            }\n          },\n          created () {\n            this.loading = true\n            setTimeout(() => {\n              this.tableData = []\n              this.loading = false\n            }, 1000)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          height="300"\n          :loading="loading"\n          :data="tableData">\n          <vxe-table-column type="seq" 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="date12" title="Date" width="300"></vxe-table-column>\n          <vxe-table-column field="address" title="Address" width="300" show-overflow></vxe-table-column>\n          <template v-slot:empty>\n            <span style="color: red;">\n              <img src="static/other/img1.gif">\n              <p>不用再看了，没有更多数据了！</p>\n            </span>\n          </template>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              loading: false,\n              tableData: []\n            }\n          },\n          created () {\n            this.loading = true\n            setTimeout(() => {\n              this.tableData = []\n              this.loading = false\n            }, 1000)\n          }\n        }\n        "]}},created:function(){var e=this;this.loading=!0,setTimeout((function(){e.tableData=[],e.loading=!1}),1e3)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))}},r=s,c=l("2877"),d=Object(c["a"])(r,a,n,!1,null,null,null);t["default"]=d.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-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[l("vxe-button",{on:{click:function(t){e.allAlign="left"}}},[e._v("居左")]),l("vxe-button",{on:{click:function(t){e.allAlign="center"}}},[e._v("居中")]),l("vxe-button",{on:{click:function(t){e.allAlign="right"}}},[e._v("居右")])]},proxy:!0}])}),l("vxe-table",{attrs:{border:"none",align:e.allAlign,data:e.tableData}},[l("vxe-table-column",{attrs:{type:"seq",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:{border:"","highlight-hover-row":"",data:e.tableData}},[l("vxe-table-column",{attrs:{type:"seq",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("4160"),l("a630"),l("fb6a"),l("3ca3"),l("159b"),l("1487")),i=l.n(o),s={data:function(){return{allAlign:null,tableData:[],demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="allAlign = \'left\'">居左</vxe-button>\n            <vxe-button @click="allAlign = \'center\'">居中</vxe-button>\n            <vxe-button @click="allAlign = \'right\'">居右</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          border="none"\n          :align="allAlign"\n          :data="tableData">\n          <vxe-table-column type="seq" 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              allAlign: null,\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          :data="tableData">\n          <vxe-table-column type="seq" 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)}))}},r=s,c=l("2877"),d=Object(c["a"])(r,a,n,!1,null,null,null);t["default"]=d.exports},"3c8d":function(e,t,l){"use strict";l.r(t);var a=function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",[l("p",{staticClass:"tip"},[e._v(" 通过设置 "),l("table-column-api-link",{attrs:{prop:"filters"}}),e._v(" 属性和 "),l("table-column-api-link",{attrs:{prop:"filter-method"}}),e._v(" 方法可以支持列筛选功能，可以通过 "),l("table-column-api-link",{attrs:{prop:"filter-multiple"}}),e._v("=false 设置为单选"),l("br"),e._v(" 如果是服务端筛选，只需加上 "),l("table-api-link",{attrs:{prop:"filter-config"}}),e._v("={"),l("table-api-link",{attrs:{prop:"remote"}}),e._v(": true} 和 "),l("table-api-link",{attrs:{prop:"filter-change"}}),e._v(" 事件就可以实现"),l("br"),e._v(" 如果是动态数据请配合 "),l("table-api-link",{attrs:{prop:"filter"}}),e._v(" 方法，参数 "),l("table-column-api-link",{attrs:{prop:"filters"}}),e._v(" 不支持动态数据"),l("br"),e._v(" context 对象（"),l("router-link",{staticClass:"link",attrs:{to:{name:"TableManualFilter"}}},[e._v("查看高级用法")]),e._v("）:"),l("br"),e._v(" "),l("span",{staticClass:"orange"},[e._v("changeOption(event, checked, option) 更新选项的状态")]),l("br"),e._v(" "),l("span",{staticClass:"orange"},[e._v("confirmFilter() 确认筛选")]),l("br"),e._v(" "),l("span",{staticClass:"orange"},[e._v("resetFilter() 清除筛选条件")])],1),l("vxe-table",{attrs:{border:"","highlight-hover-row":"",height:"400",data:e.tableData}},[l("vxe-table-column",{attrs:{type:"seq",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"}],"filter-multiple":!1}}),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:"",filters:[{label:"本周",value:"1"},{label:"上周",value:"2"}]}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[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}},[l("vxe-table-column",{attrs:{type:"seq",width:"60"}}),l("vxe-table-column",{attrs:{title:"基本信息"}},[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"}]}})],1),l("vxe-table-column",{attrs:{title:"其他"}},[l("vxe-table-column",{attrs:{title:"详细信息"}},[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)}]}})}))}}])})],1)],1),l("vxe-table-column",{attrs:{field:"time",title:"Time",sortable:"",filters:[{label:"本周",value:"1"},{label:"上周",value:"2"}]}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")])],1)},n=[],o=(l("4160"),l("a630"),l("fb6a"),l("a9e3"),l("3ca3"),l("159b"),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="tableData">\n          <vxe-table-column type="seq" 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\'}]" :filter-multiple="false"></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 :filters="[{label: \'本周\', value: \'1\'}, {label: \'上周\', value: \'2\'}]"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 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="tableData">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column title="基本信息">\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>\n          <vxe-table-column title="其他">\n            <vxe-table-column title="详细信息">\n              <vxe-table-column field="age" title="Age" :filters="[{ data: \'30\', 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>\n          </vxe-table-column>\n          <vxe-table-column field="time" title="Time" sortable :filters="[{label: \'本周\', value: \'1\'}, {label: \'上周\', value: \'2\'}]"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 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)}}},r=s,c=l("2877"),d=Object(c["a"])(r,a,n,!1,null,null,null);t["default"]=d.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(" 当一个表格需要铺满父容器时，这个功能将非常有用"),l("br"),e._v(" 通过设置 "),l("table-api-link",{attrs:{prop:"height"}}),e._v("=auto表格会相对于父容器的高度去铺满，但是只会在数据重新加载时才会计算"),l("br"),e._v(" 还可以根据不同场景添加 "),l("table-api-link",{attrs:{prop:"sync-resize"}}),e._v("（属性监听） 或 "),l("table-api-link",{attrs:{prop:"auto-resize"}}),e._v("（父元素监听），这样就只需要通过样式控制父容器高度就可以实现响应式表格 ")],1),l("div",{staticStyle:{height:"600px"}},[l("vxe-table",{attrs:{border:"",height:"auto",data:e.tableData}},[l("vxe-table-column",{attrs:{type:"seq",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}},[l("vxe-table-column",{attrs:{type:"seq",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}},[l("vxe-table-column",{attrs:{type:"seq",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("4160"),l("a630"),l("fb6a"),l("3ca3"),l("159b"),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="tableData">\n            <vxe-table-column type="seq" 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="tableData">\n            <vxe-table-column type="seq" 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="tableData">\n            <vxe-table-column type="seq" 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)}))}},r=s,c=l("2877"),d=Object(c["a"])(r,a,n,!1,null,null,null);t["default"]=d.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(" 当内容或表头超过隐藏时显示为省略号，"),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 显示"),l("br"),e._v(" 还可以通过 "),l("table-api-link",{attrs:{prop:"enterable"}}),e._v(" 开启鼠标是否可进入到 tooltip 中 ")],1),l("vxe-table",{attrs:{"highlight-hover-row":"",data:e.tableData}},[l("vxe-table-column",{attrs:{type:"seq",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:{border:"","show-header-overflow":"","highlight-hover-row":"",data:e.tableData,"tooltip-config":{theme:"light"}}},[l("vxe-table-column",{attrs:{type:"seq",width:"60"}}),l("vxe-table-column",{attrs:{field:"address",title:"超过隐藏时显示为省略号————————————","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:{title:"基本信息"}},[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:{title:"详细信息"}},[l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1)],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  ")])],1)},n=[],o=(l("4160"),l("a630"),l("fb6a"),l("3ca3"),l("159b"),l("1487")),i=l.n(o),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          highlight-hover-row\n          :data="tableData">\n          <vxe-table-column type="seq" 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          border\n          show-header-overflow\n          highlight-hover-row\n          :data="tableData"\n          :tooltip-config="{theme: \'light\'}">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column field="address" title="超过隐藏时显示为省略号————————————" 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 title="基本信息">\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 title="详细信息">\n              <vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>\n            </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, 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)}))}},r=s,c=l("2877"),d=Object(c["a"])(r,a,n,!1,null,null,null);t["default"]=d.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"}}),e._v("，还通过 "),l("table-api-link",{attrs:{prop:"highlight"}}),e._v(" 设置高亮选中行")],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,"radio-config":{highlight:!0}},on:{"cell-click":e.cellClickEvent,"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("p",{staticClass:"tip"},[e._v(" 还可以通过 "),l("table-api-link",{attrs:{prop:"checkMethod"}}),e._v(" 方法控制 checkbox 是否允许用户手动选中，还可以配置 "),l("table-api-link",{attrs:{prop:"labelField"}}),e._v(" 列显示属性"),l("br"),e._v(" 禁止用户手动选中，但是可以通过函数式调用强制选中，该功能对于某些场景需要强制选中指定行时非常有用 ")],1),l("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[l("vxe-button",{on:{click:function(t){return e.$refs.xTable2.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}},[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[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:"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"}}},[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[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:"highlight-current-row"}}),e._v(" 高亮方式")],1),l("vxe-table",{attrs:{border:"","highlight-current-row":"",height:"300",data:e.tableData},on:{"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[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:"","highlight-current-row":"",height:"300","radio-config":{labelField:"name"},data:e.tableData}},[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[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:"","highlight-hover-row":"","highlight-current-row":"",height:"300","radio-config":{labelField:"name",trigger:"row"},data:e.tableData}},[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[10]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[11]))]),e._v("\n  ")])],1)},n=[],o=(l("4160"),l("a630"),l("fb6a"),l("3ca3"),l("159b"),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="tableData"\n          :radio-config="{highlight: true}"\n          @cell-click="cellClickEvent"\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            cellClickEvent () {\n              console.log('单元格点击事件')\n            },\n            radioChangeEvent ({ row }) {\n              this.selectRow = row\n              console.log('单选事件')\n            },\n            clearRadioRowEevnt () {\n              this.selectRow = null\n              this.$refs.xTable1.clearRadioRow()\n            },\n            getRadioEvent1 () {\n              this.$XModal.alert(JSON.stringify(this.$refs.xTable1.getRadioRecord()))\n            }\n          }\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="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="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="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="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="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},cellClickEvent:function(){console.log("单元格点击事件")},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()},getRadioEvent1:function(){this.$XModal.alert(JSON.stringify(this.$refs.xTable1.getRadioRecord()))}}},r=s,c=l("2877"),d=Object(c["a"])(r,a,n,!1,null,null,null);t["default"]=d.exports},"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",[e._m(0),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}},[l("vxe-table-column",{attrs:{type:"seq",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:{"cell-click":e.cellClickEvent2}},[l("vxe-table-column",{attrs:{type:"seq",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=[function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("p",{staticClass:"tip"},[e._v(" 行的样色、单元格样式，表头的样式、表尾的样式、全部都可以完全自定义"),l("br"),l("span",{staticClass:"red"},[e._v("（注：当自定义样式之后可能会覆盖表格的样式，比如选中行..等，记得自行处理好相关样式）")])])}],o=(l("4160"),l("a630"),l("caad"),l("fb6a"),l("3ca3"),l("159b"),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="tableData">\n          <vxe-table-column type="seq" 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="tableData"\n          @cell-click="cellClickEvent">\n          <vxe-table-column type="seq" 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}}},r=s,c=(l("300b"),l("2877")),d=Object(c["a"])(r,a,n,!1,null,null,null);t["default"]=d.exports},"4eb9":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-scrollbar",attrs:{border:"","show-footer":"",height:"400","footer-method":e.footerMethod,data:e.tableData}},[l("vxe-table-column",{attrs:{type:"seq",width:"60",fixed:"left"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",width:"300"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex",width:"250"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age",width:"250"}}),l("vxe-table-column",{attrs:{field:"role",title:"Role",width:"300"}}),l("vxe-table-column",{attrs:{field:"address",title:"Address",width:"350","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  ")])],1)},n=[],o=(l("4160"),l("a630"),l("caad"),l("d81d"),l("fb6a"),l("3ca3"),l("159b"),l("c695")),i=l.n(o),s=l("1487"),r=l.n(s),c={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          show-footer\n          class="mytable-scrollbar"\n          height="400"\n          :footer-method="footerMethod"\n          :data="tableData">\n          <vxe-table-column type="seq" 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="sex" title="Sex" width="250"></vxe-table-column>\n          <vxe-table-column field="age" title="Age" width="250"></vxe-table-column>\n          <vxe-table-column field="role" title="Role" width="300"></vxe-table-column>\n          <vxe-table-column field="address" title="Address" width="350" 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          methods: {\n            footerMethod ({ columns, data }) {\n              return [\n                columns.map((column, columnIndex) => {\n                  if (columnIndex === 0) {\n                    return '平均'\n                  }\n                  if (['age'].includes(column.property)) {\n                    return parseInt(XEUtils.sum(data, column.property))\n                  }\n                  return '-'\n                })\n              ]\n            }\n          }\n        }\n        ","\n        /*滚动条整体部分*/\n        .mytable-scrollbar div::-webkit-scrollbar {\n          width: 10px;\n          height: 10px;\n        }\n        /*滚动条的轨道*/\n        .mytable-scrollbar div::-webkit-scrollbar-track {\n          background-color: #FFFFFF;\n        }\n        /*滚动条里面的小方块，能向上向下移动*/\n        .mytable-scrollbar div::-webkit-scrollbar-thumb {\n          background-color: #bfbfbf;\n          border-radius: 5px;\n          border: 1px solid #F1F1F1;\n          box-shadow: inset 0 0 6px rgba(0,0,0,.3);\n        }\n        .mytable-scrollbar div::-webkit-scrollbar-thumb:hover {\n          background-color: #A8A8A8;\n        }\n        .mytable-scrollbar div::-webkit-scrollbar-thumb:active {\n          background-color: #787878;\n        }\n        /*边角，即两个滚动条的交汇处*/\n        .mytable-scrollbar div::-webkit-scrollbar-corner {\n          background-color: #FFFFFF;\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){r.a.highlightBlock(e)}))},methods:{footerMethod:function(e){var t=e.columns,l=e.data;return[t.map((function(e,t){return 0===t?"平均":["age"].includes(e.property)?parseInt(i.a.sum(l,e.property)):"-"}))]}}},d=c,b=(l("6eff"),l("2877")),v=Object(b["a"])(d,a,n,!1,null,null,null);t["default"]=v.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(" 通过给需要排序功能的列加上 "),l("table-api-link",{attrs:{prop:"sortable"}}),e._v(" 属性可以支持排序，还可以通过设置 "),l("table-api-link",{attrs:{prop:"sort-by"}}),e._v(" 多字段进行排序"),l("br"),e._v(" 如果是服务端排序，只需加上 "),l("table-column-api-link",{attrs:{prop:"remote-sort"}}),e._v(" 和 "),l("table-api-link",{attrs:{prop:"sort-change"}}),e._v(" 事件就可以实现"),l("br"),e._v(" 还可以通过调用 "),l("table-api-link",{attrs:{prop:"sort"}}),e._v(" 方法实现手动排序 ")],1),l("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[l("vxe-button",{on:{click:function(t){return e.$refs.xTable.sort("name","asc")}}},[e._v("Name 升序")]),l("vxe-button",{on:{click:function(t){return e.$refs.xTable.sort("name","desc")}}},[e._v("Name 降序")]),l("vxe-button",{on:{click:function(t){return e.$refs.xTable.clearSort()}}},[e._v("清除排序")])]},proxy:!0}])}),l("vxe-table",{ref:"xTable",attrs:{border:"","highlight-hover-row":"",height:"300",data:e.tableData}},[l("vxe-table-column",{attrs:{type:"seq",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",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[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}},[l("vxe-table-column",{attrs:{type:"seq",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",sortable:""}}),l("vxe-table-column",{attrs:{field:"age",title:"Age",sortable:""}}),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:{"sort-change":e.sortChangeEvent}},[l("vxe-table-column",{attrs:{type:"seq",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",sortable:""}}),l("vxe-table-column",{attrs:{field:"age",title:"Age",sortable:""}}),l("vxe-table-column",{attrs:{field:"time",title:"Time",sortable:""}})],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[4]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[5]))]),e._v("\n  ")]),l("p",{staticClass:"tip"},[e._v("点击表头排序，通过 "),l("table-api-link",{attrs:{prop:"defaultSort"}}),e._v(" 默认排序、通过配置 "),l("table-api-link",{attrs:{prop:"trigger"}}),e._v(" 设置触发源")],1),l("vxe-table",{attrs:{border:"","highlight-hover-row":"","highlight-hover-column":"",height:"300",data:e.tableData,"sort-config":{trigger:"cell",defaultSort:{field:"age",order:"desc"}}},on:{"sort-change":e.sortChangeEvent}},[l("vxe-table-column",{attrs:{type:"seq",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("4160"),l("a630"),l("fb6a"),l("b0c0"),l("3ca3"),l("159b"),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.sort(\'name\', \'asc\')">Name 升序</vxe-button>\n            <vxe-button @click="$refs.xTable.sort(\'name\', \'desc\')">Name 降序</vxe-button>\n            <vxe-button @click="$refs.xTable.clearSort()">清除排序</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          border\n          highlight-hover-row\n          ref="xTable"\n          height="300"\n          :data="tableData">\n          <vxe-table-column type="seq" 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" 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        ",'\n        <vxe-table\n          border\n          highlight-hover-row\n          height="300"\n          :data="tableData">\n          <vxe-table-column type="seq" 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" 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 :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="tableData"\n          @sort-change="sortChangeEvent">\n          <vxe-table-column type="seq" 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" 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          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            sortChangeEvent ({ column, property, order }) {\n              console.info(property, order)\n            }\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          highlight-hover-row\n          highlight-hover-column\n          height="300"\n          :data="tableData"\n          :sort-config="{trigger: \'cell\', defaultSort: {field: \'age\', order: \'desc\'}}"\n          @sort-change="sortChangeEvent">\n          <vxe-table-column type="seq" 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          methods: {\n            sortChangeEvent ({ column, property, order }) {\n              console.info(property, order)\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:{sortNameMethod:function(e,t){var l=(e.name||"").toLowerCase(),a=(t.name||"").toLowerCase();return l<a?-1:l>a?1:0},sortChangeEvent:function(e){e.column;var t=e.property,l=e.order;console.info(t,l)}}},r=s,c=l("2877"),d=Object(c["a"])(r,a,n,!1,null,null,null);t["default"]=d.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",[e._m(0),l("vxe-form",{attrs:{data:e.formData}},[l("vxe-form-item",{attrs:{title:"输入框",field:"iVal"}},[l("vxe-input",{attrs:{placeholder:"请输入名称",clearable:""},model:{value:e.formData.iVal,callback:function(t){e.$set(e.formData,"iVal",t)},expression:"formData.iVal"}})],1),l("vxe-form-item",{attrs:{title:"下拉框",field:"sVal"}},[l("select",{directives:[{name:"model",rawName:"v-model",value:e.formData.sVal,expression:"formData.sVal"}],staticClass:"vxe-select",on:{change:function(t){var l=Array.prototype.filter.call(t.target.options,(function(e){return e.selected})).map((function(e){var t="_value"in e?e._value:e.value;return t}));e.$set(e.formData,"sVal",t.target.multiple?l:l[0])}}},[l("option",{attrs:{value:"0"}}),l("option",{attrs:{value:"1"}},[e._v("女")]),l("option",{attrs:{value:"2"}},[e._v("男")])])]),l("vxe-form-item",{attrs:{title:"复选框",field:"cVal"}},[l("vxe-checkbox",{model:{value:e.formData.cVal,callback:function(t){e.$set(e.formData,"cVal",t)},expression:"formData.cVal"}},[e._v("选项1")]),l("vxe-checkbox",{attrs:{indeterminate:e.formData.ciVal}},[e._v("半选")])],1),l("vxe-form-item",{attrs:{title:"单选框",field:"rVal"}},[l("vxe-radio",{attrs:{name:"size-radio",label:"1"},model:{value:e.formData.rVal,callback:function(t){e.$set(e.formData,"rVal",t)},expression:"formData.rVal"}},[e._v("选项1")]),l("vxe-radio",{attrs:{name:"size-radio",label:"2"},model:{value:e.formData.rVal,callback:function(t){e.$set(e.formData,"rVal",t)},expression:"formData.rVal"}},[e._v("选项2")])],1),l("vxe-form-item",[l("vxe-button",{attrs:{type:"submit",status:"primary"}},[e._v("查询")]),l("vxe-button",{attrs:{type:"reset"}},[e._v("重置")])],1)],1),l("vxe-toolbar",{attrs:{export:"",custom:""},scopedSlots:e._u([{key:"buttons",fn:function(){return[l("vxe-input",{attrs:{placeholder:"请输入名称",clearable:""},model:{value:e.formData.name,callback:function(t){e.$set(e.formData,"name",t)},expression:"formData.name"}}),l("vxe-button",{attrs:{status:"primary"}},[e._v("查询")])]},proxy:!0}])}),l("vxe-table",{attrs:{"export-config":"",data:e.tableData}},[l("vxe-table-column",{attrs:{type:"seq",width:"60"}}),l("vxe-table-column",{attrs:{type:"radio",width:"60"}}),l("vxe-table-column",{attrs:{type:"checkbox",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age",sortable:""}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex",filters:[{value:"0",label:"女"},{value:"1",label:"男"}]}}),l("vxe-table-column",{attrs:{field:"sex2",title:"Sex2",sortable:"",filters:[{value:"0",label:"女"},{value:"1",label:"男"}],"filter-multiple":!1}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("vxe-pager",{attrs:{perfect:"","current-page":e.tablePage.currentPage,"page-size":e.tablePage.pageSize,total:e.tablePage.total,"page-sizes":e.tablePage.pageSizes,layouts:e.tablePage.layouts},on:{"update:currentPage":function(t){return e.$set(e.tablePage,"currentPage",t)},"update:current-page":function(t){return e.$set(e.tablePage,"currentPage",t)},"update:pageSize":function(t){return e.$set(e.tablePage,"pageSize",t)},"update:page-size":function(t){return e.$set(e.tablePage,"pageSize",t)}}}),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("设置大小为 medium，默认大小：Table 44px 、Button 32px、Input 32px、Checkbox 15px、Radio 15px")]),l("vxe-form",{attrs:{data:e.formData,size:"medium"}},[l("vxe-form-item",{attrs:{title:"输入框",field:"iVal"}},[l("vxe-input",{attrs:{placeholder:"请输入名称",clearable:""},model:{value:e.formData.iVal,callback:function(t){e.$set(e.formData,"iVal",t)},expression:"formData.iVal"}})],1),l("vxe-form-item",{attrs:{title:"下拉框",field:"sVal"}},[l("select",{directives:[{name:"model",rawName:"v-model",value:e.formData.sVal,expression:"formData.sVal"}],staticClass:"vxe-select",on:{change:function(t){var l=Array.prototype.filter.call(t.target.options,(function(e){return e.selected})).map((function(e){var t="_value"in e?e._value:e.value;return t}));e.$set(e.formData,"sVal",t.target.multiple?l:l[0])}}},[l("option",{attrs:{value:"0"}}),l("option",{attrs:{value:"1"}},[e._v("女")]),l("option",{attrs:{value:"2"}},[e._v("男")])])]),l("vxe-form-item",{attrs:{title:"复选框",field:"cVal"}},[l("vxe-checkbox",{model:{value:e.formData.cVal,callback:function(t){e.$set(e.formData,"cVal",t)},expression:"formData.cVal"}},[e._v("选项1")]),l("vxe-checkbox",{attrs:{indeterminate:e.formData.ciVal}},[e._v("半选")])],1),l("vxe-form-item",{attrs:{title:"单选框",field:"rVal"}},[l("vxe-radio",{attrs:{name:"size-radio",label:"1"},model:{value:e.formData.rVal,callback:function(t){e.$set(e.formData,"rVal",t)},expression:"formData.rVal"}},[e._v("选项1")]),l("vxe-radio",{attrs:{name:"size-radio",label:"2"},model:{value:e.formData.rVal,callback:function(t){e.$set(e.formData,"rVal",t)},expression:"formData.rVal"}},[e._v("选项2")])],1),l("vxe-form-item",[l("vxe-button",{attrs:{type:"submit",status:"primary"}},[e._v("查询")]),l("vxe-button",{attrs:{type:"reset"}},[e._v("重置")])],1)],1),l("vxe-toolbar",{attrs:{size:"medium",export:"",custom:""},scopedSlots:e._u([{key:"buttons",fn:function(){return[l("vxe-input",{attrs:{placeholder:"请输入名称",clearable:""},model:{value:e.formData.name,callback:function(t){e.$set(e.formData,"name",t)},expression:"formData.name"}}),l("vxe-button",{attrs:{status:"primary"}},[e._v("查询")])]},proxy:!0}])}),l("vxe-table",{attrs:{"export-config":"",size:"medium",data:e.tableData}},[l("vxe-table-column",{attrs:{type:"seq",width:"60"}}),l("vxe-table-column",{attrs:{type:"radio",width:"60"}}),l("vxe-table-column",{attrs:{type:"checkbox",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age",sortable:""}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex",filters:[{value:"0",label:"女"},{value:"1",label:"男"}]}}),l("vxe-table-column",{attrs:{field:"sex2",title:"Sex2",sortable:"",filters:[{value:"0",label:"女"},{value:"1",label:"男"}],"filter-multiple":!1}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("vxe-pager",{attrs:{perfect:"",size:"medium","current-page":e.tablePage.currentPage,"page-size":e.tablePage.pageSize,total:e.tablePage.total,"page-sizes":e.tablePage.pageSizes,layouts:e.tablePage.layouts},on:{"update:currentPage":function(t){return e.$set(e.tablePage,"currentPage",t)},"update:current-page":function(t){return e.$set(e.tablePage,"currentPage",t)},"update:pageSize":function(t){return e.$set(e.tablePage,"pageSize",t)},"update:page-size":function(t){return e.$set(e.tablePage,"pageSize",t)}}}),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("设置大小为 small，默认大小：Table 40px 、Button 30px、Input 30px、Checkbox 14px、Radio 14px")]),l("vxe-form",{attrs:{data:e.formData,size:"small"}},[l("vxe-form-item",{attrs:{title:"输入框",field:"iVal"}},[l("vxe-input",{attrs:{placeholder:"请输入名称",clearable:""},model:{value:e.formData.iVal,callback:function(t){e.$set(e.formData,"iVal",t)},expression:"formData.iVal"}})],1),l("vxe-form-item",{attrs:{title:"下拉框",field:"sVal"}},[l("select",{directives:[{name:"model",rawName:"v-model",value:e.formData.sVal,expression:"formData.sVal"}],staticClass:"vxe-select",on:{change:function(t){var l=Array.prototype.filter.call(t.target.options,(function(e){return e.selected})).map((function(e){var t="_value"in e?e._value:e.value;return t}));e.$set(e.formData,"sVal",t.target.multiple?l:l[0])}}},[l("option",{attrs:{value:"0"}}),l("option",{attrs:{value:"1"}},[e._v("女")]),l("option",{attrs:{value:"2"}},[e._v("男")])])]),l("vxe-form-item",{attrs:{title:"复选框",field:"cVal"}},[l("vxe-checkbox",{model:{value:e.formData.cVal,callback:function(t){e.$set(e.formData,"cVal",t)},expression:"formData.cVal"}},[e._v("选项1")]),l("vxe-checkbox",{attrs:{indeterminate:e.formData.ciVal}},[e._v("半选")])],1),l("vxe-form-item",{attrs:{title:"单选框",field:"rVal"}},[l("vxe-radio",{attrs:{name:"size-radio",label:"1"},model:{value:e.formData.rVal,callback:function(t){e.$set(e.formData,"rVal",t)},expression:"formData.rVal"}},[e._v("选项1")]),l("vxe-radio",{attrs:{name:"size-radio",label:"2"},model:{value:e.formData.rVal,callback:function(t){e.$set(e.formData,"rVal",t)},expression:"formData.rVal"}},[e._v("选项2")])],1),l("vxe-form-item",[l("vxe-button",{attrs:{type:"submit",status:"primary"}},[e._v("查询")]),l("vxe-button",{attrs:{type:"reset"}},[e._v("重置")])],1)],1),l("vxe-toolbar",{attrs:{size:"small",export:"",custom:""},scopedSlots:e._u([{key:"buttons",fn:function(){return[l("vxe-input",{attrs:{placeholder:"请输入名称",clearable:""},model:{value:e.formData.name,callback:function(t){e.$set(e.formData,"name",t)},expression:"formData.name"}}),l("vxe-button",{attrs:{status:"primary"}},[e._v("查询")])]},proxy:!0}])}),l("vxe-table",{attrs:{"export-config":"",size:"small",data:e.tableData}},[l("vxe-table-column",{attrs:{type:"seq",width:"60"}}),l("vxe-table-column",{attrs:{type:"radio",width:"60"}}),l("vxe-table-column",{attrs:{type:"checkbox",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age",sortable:""}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex",filters:[{value:"0",label:"女"},{value:"1",label:"男"}]}}),l("vxe-table-column",{attrs:{field:"sex2",title:"Sex2",sortable:"",filters:[{value:"0",label:"女"},{value:"1",label:"男"}],"filter-multiple":!1}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("vxe-pager",{attrs:{perfect:"",size:"small","current-page":e.tablePage.currentPage,"page-size":e.tablePage.pageSize,total:e.tablePage.total,"page-sizes":e.tablePage.pageSizes,layouts:e.tablePage.layouts},on:{"update:currentPage":function(t){return e.$set(e.tablePage,"currentPage",t)},"update:current-page":function(t){return e.$set(e.tablePage,"currentPage",t)},"update:pageSize":function(t){return e.$set(e.tablePage,"pageSize",t)},"update:page-size":function(t){return e.$set(e.tablePage,"pageSize",t)}}}),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("设置大小为 mini，默认大小：Table 36px 、Button 28px、Input 28px、Checkbox 14px、Radio 14px")]),l("vxe-form",{attrs:{data:e.formData,size:"mini"}},[l("vxe-form-item",{attrs:{title:"输入框",field:"iVal"}},[l("vxe-input",{attrs:{placeholder:"请输入名称",clearable:""},model:{value:e.formData.iVal,callback:function(t){e.$set(e.formData,"iVal",t)},expression:"formData.iVal"}})],1),l("vxe-form-item",{attrs:{title:"下拉框",field:"sVal"}},[l("select",{directives:[{name:"model",rawName:"v-model",value:e.formData.sVal,expression:"formData.sVal"}],staticClass:"vxe-select",on:{change:function(t){var l=Array.prototype.filter.call(t.target.options,(function(e){return e.selected})).map((function(e){var t="_value"in e?e._value:e.value;return t}));e.$set(e.formData,"sVal",t.target.multiple?l:l[0])}}},[l("option",{attrs:{value:"0"}}),l("option",{attrs:{value:"1"}},[e._v("女")]),l("option",{attrs:{value:"2"}},[e._v("男")])])]),l("vxe-form-item",{attrs:{title:"复选框",field:"cVal"}},[l("vxe-checkbox",{model:{value:e.formData.cVal,callback:function(t){e.$set(e.formData,"cVal",t)},expression:"formData.cVal"}},[e._v("选项1")]),l("vxe-checkbox",{attrs:{indeterminate:e.formData.ciVal}},[e._v("半选")])],1),l("vxe-form-item",{attrs:{title:"单选框",field:"rVal"}},[l("vxe-radio",{attrs:{name:"size-radio",label:"1"},model:{value:e.formData.rVal,callback:function(t){e.$set(e.formData,"rVal",t)},expression:"formData.rVal"}},[e._v("选项1")]),l("vxe-radio",{attrs:{name:"size-radio",label:"2"},model:{value:e.formData.rVal,callback:function(t){e.$set(e.formData,"rVal",t)},expression:"formData.rVal"}},[e._v("选项2")])],1),l("vxe-form-item",[l("vxe-button",{attrs:{type:"submit",status:"primary"}},[e._v("查询")]),l("vxe-button",{attrs:{type:"reset"}},[e._v("重置")])],1)],1),l("vxe-toolbar",{attrs:{size:"mini",export:"",custom:""},scopedSlots:e._u([{key:"buttons",fn:function(){return[l("vxe-input",{attrs:{placeholder:"请输入名称",clearable:""},model:{value:e.formData.name,callback:function(t){e.$set(e.formData,"name",t)},expression:"formData.name"}}),l("vxe-button",{attrs:{status:"primary"}},[e._v("查询")])]},proxy:!0}])}),l("vxe-table",{attrs:{"export-config":"",size:"mini",data:e.tableData}},[l("vxe-table-column",{attrs:{type:"seq",width:"60"}}),l("vxe-table-column",{attrs:{type:"radio",width:"60"}}),l("vxe-table-column",{attrs:{type:"checkbox",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age",sortable:""}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex",filters:[{value:"0",label:"女"},{value:"1",label:"男"}]}}),l("vxe-table-column",{attrs:{field:"sex2",title:"Sex2",sortable:"",filters:[{value:"0",label:"女"},{value:"1",label:"男"}],"filter-multiple":!1}}),l("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),l("vxe-pager",{attrs:{perfect:"",size:"mini","current-page":e.tablePage.currentPage,"page-size":e.tablePage.pageSize,total:e.tablePage.total,"page-sizes":e.tablePage.pageSizes,layouts:e.tablePage.layouts},on:{"update:currentPage":function(t){return e.$set(e.tablePage,"currentPage",t)},"update:current-page":function(t){return e.$set(e.tablePage,"currentPage",t)},"update:pageSize":function(t){return e.$set(e.tablePage,"pageSize",t)},"update:page-size":function(t){return e.$set(e.tablePage,"pageSize",t)}}}),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=[function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("p",{staticClass:"tip"},[e._v(" 可以设置大小尺寸：medium / small / mini"),l("br"),e._v(" 默认大小：Table 48px 、Button 34px、Input 34px、Checkbox 16px、Radio 16px，可以通过 scss 变量修改，"),l("a",{staticClass:"link",attrs:{href:"https://github.com/xuliangzhan/vxe-table/blob/master/styles/variable.scss",target:"_blank"}},[e._v("查看所有变量")]),l("br"),l("a",{staticClass:"link",attrs:{href:"https://github.com/xuliangzhan/vxe-table-demo/tree/master/vxe-table-by-vue-custom-theme",target:"_blank"}},[e._v("（项目示例）")])])}],o=(l("4160"),l("a630"),l("fb6a"),l("3ca3"),l("159b"),l("1487")),i=l.n(o),s={data:function(){return{formData:{iVal:"",sVal:"",cVal:!0,ciVal:!0,rVal:"1"},tablePage:{total:500,currentPage:1,pageSize:10,pageSizes:[10,15,20,50,100],layouts:["PrevJump","PrevPage","JumpNumber","NextPage","NextJump","FullJump","Sizes","Total"]},tableData:[],demoCodes:['\n        <vxe-table\n          :data="tableData">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column type="radio" width="60"></vxe-table-column>\n          <vxe-table-column type="checkbox" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="age" title="Age" sortable></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex" :filters="[{value:\'0\',label:\'女\'},{value:\'1\',label:\'男\'}]"></vxe-table-column>\n          <vxe-table-column field="sex2" title="Sex2" sortable :filters="[{value:\'0\',label:\'女\'},{value:\'1\',label:\'男\'}]" :filter-multiple="false"></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          size="medium"\n          :data="tableData">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column type="radio" width="60"></vxe-table-column>\n          <vxe-table-column type="checkbox" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="age" title="Age" sortable></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex" :filters="[{value:\'0\',label:\'女\'},{value:\'1\',label:\'男\'}]"></vxe-table-column>\n          <vxe-table-column field="sex2" title="Sex2" sortable :filters="[{value:\'0\',label:\'女\'},{value:\'1\',label:\'男\'}]" :filter-multiple="false"></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          size="small"\n          :data="tableData">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column type="radio" width="60"></vxe-table-column>\n          <vxe-table-column type="checkbox" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="age" title="Age" sortable></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex" :filters="[{value:\'0\',label:\'女\'},{value:\'1\',label:\'男\'}]"></vxe-table-column>\n          <vxe-table-column field="sex2" title="Sex2" sortable :filters="[{value:\'0\',label:\'女\'},{value:\'1\',label:\'男\'}]" :filter-multiple="false"></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          size="mini"\n          :data="tableData">\n          <<vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column type="radio" width="60"></vxe-table-column>\n          <vxe-table-column type="checkbox" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="age" title="Age" sortable></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex" :filters="[{value:\'0\',label:\'女\'},{value:\'1\',label:\'男\'}]"></vxe-table-column>\n          <vxe-table-column field="sex2" title="Sex2" sortable :filters="[{value:\'0\',label:\'女\'},{value:\'1\',label:\'男\'}]" :filter-multiple="false"></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        "]}},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)}))}},r=s,c=l("2877"),d=Object(c["a"])(r,a,n,!1,null,null,null);t["default"]=d.exports},"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",[e._m(0),l("vxe-table",{attrs:{stripe:"",data:e.tableData}},[l("vxe-table-column",{attrs:{type:"seq",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}},[l("vxe-table-column",{attrs:{type:"seq",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=[function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("p",{staticClass:"tip"},[e._v("斑马线条纹"),l("br"),l("span",{staticClass:"red"},[e._v("（注：在可编辑表格场景下，临时插入的数据不会有斑马纹样式）")])])}],o=(l("4160"),l("a630"),l("fb6a"),l("3ca3"),l("159b"),l("1487")),i=l.n(o),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          stripe\n          :data="tableData">\n          <vxe-table-column type="seq" 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="tableData">\n          <vxe-table-column type="seq" 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)}))}},r=s,c=l("2877"),d=Object(c["a"])(r,a,n,!1,null,null,null);t["default"]=d.exports},"6eff":function(e,t,l){"use strict";var a=l("e6ab"),n=l.n(a);n.a},"739d":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("="),l("table-column-api-link",{attrs:{prop:"html"}}),e._v(" 显示为 HTML 标签"),l("br"),e._m(0)],1),l("vxe-table",{attrs:{border:"",data:e.tableData}},[l("vxe-table-column",{attrs:{type:"seq",width:"60"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:""}}),l("vxe-table-column",{attrs:{field:"describeHtml",title:"HTML 标签与筛选",type:"html",sortable:"",filters:[{label:"包含 aa",value:"aa"},{label:"包含 bb",value:"bb"}],"filter-method":e.filterDescribeMethod,"sort-method":e.sortDescribeMethod}}),l("vxe-table-column",{attrs:{field:"role",type:"html",title:"HTML 标签与格式化",formatter:e.formatRole}})],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=[function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("span",{staticClass:"red"},[e._v("（动态渲染任意 HTML 是非常危险的，很容易导致 "),l("a",{staticClass:"link",attrs:{href:"https://zh.wikipedia.org/wiki/%E8%B7%A8%E7%B6%B2%E7%AB%99%E6%8C%87%E4%BB%A4%E7%A2%BC"}},[e._v("XSS")]),e._v(" 攻击，请确保内容是可信的）")])}],o=(l("4160"),l("a630"),l("c975"),l("d3b7"),l("25f0"),l("3ca3"),l("159b"),l("c695")),i=l.n(o),s=l("1487"),r=l.n(s),c={data:function(){return{tableData:[{name:"xx1",describe:"字母 aa -1",describeHtml:'<span style="color: red">字母 <span style="color: blue">aa</span> -1</span>',role:"oo1"},{name:"xx2",describe:"字母 bb -2",describeHtml:'<span style="color: blue">字母 <span style="color: green">bb</span> -2</span>',role:"oo2"},{name:"xx3",describe:"字母 cc -3",describeHtml:'<span style="color: green">字母 <span style="color: red">cc</span> -3</span>',role:"oo3"},{name:"xx4",describe:"字母 dd -4",describeHtml:'<span style="color: blue">字母 <span style="color: green">dd</span> -4</span>',role:"oo4"}],demoCodes:['\n        <vxe-table\n          border\n          :data="tableData">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" sortable></vxe-table-column>\n          <vxe-table-column field="describeHtml" type="html" title="HTML 标签"></vxe-table-column>\n          <vxe-table-column\n            field="describeHtml"\n            title="HTML 标签与筛选"\n            type="html"\n            sortable\n            :filters="[{label:\'包含 aa\', value: \'aa\'}, {label:\'包含 bb\', value: \'bb\'}]"\n            :filter-method="filterDescribeMethod"\n            :sort-method="sortDescribeMethod"></vxe-table-column>\n          <vxe-table-column field="role" type="html" title="HTML 标签与格式化" :formatter="formatRole"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [\n                { name: 'xx1', describe: '字母 aa -1', describeHtml: '<span style=\"color: red\">字母 <span style=\"color: blue\">aa</span> -1</span>', role: 'oo1' },\n                { name: 'xx2', describe: '字母 bb -2', describeHtml: '<span style=\"color: blue\">字母 <span style=\"color: green\">bb</span> -2</span>', role: 'oo2' },\n                { name: 'xx3', describe: '字母 cc -3', describeHtml: '<span style=\"color: green\">字母 <span style=\"color: red\">cc</span> -3</span>', role: 'oo3' },\n                { name: 'xx4', describe: '字母 dd -4', describeHtml: '<span style=\"color: blue\">字母 <span style=\"color: green\">dd</span> -4</span>', role: 'oo4' }\n              ]\n            }\n          },\n          methods: {\n            formatRole ({ cellValue }) {\n              return `<a href=\"https://github.com/xuliangzhan/vxe-table\" class=\"link\" target=\"_black\" style=\"color: orange\">链接 ${cellValue}</a>`\n            },\n            sortDescribeMethod (a, b) {\n              // 由于 HTML 是无法排序的，使用自定义排序\n              var v1 = a.describe\n              var v2 = b.describe\n              return v1 < v2 ? -1 : v1 > v2 ? 1 : 0\n            },\n            filterDescribeMethod ({ value, row, column }) {\n              return XEUtils.toString(row.html1).indexOf(value) > -1\n            }\n          }\n        }\n        "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){r.a.highlightBlock(e)}))},methods:{formatRole:function(e){var t=e.cellValue;return'<a href="https://github.com/xuliangzhan/vxe-table" class="link" target="_black" style="color: orange">链接 '.concat(t,"</a>")},sortDescribeMethod:function(e,t){var l=e.describe,a=t.describe;return l<a?-1:l>a?1:0},filterDescribeMethod:function(e){var t=e.value,l=e.row;e.column;return i.a.toString(l.html1).indexOf(t)>-1}}},d=c,b=l("2877"),v=Object(b["a"])(d,a,n,!1,null,null,null);t["default"]=v.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}},[l("vxe-table-column",{attrs:{type:"seq",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}},[l("vxe-table-column",{attrs:{type:"seq",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("4160"),l("a630"),l("fb6a"),l("3ca3"),l("159b"),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="tableData">\n          <vxe-table-column type="seq" 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="tableData">\n          <vxe-table-column type="seq" 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)}))}},r=s,c=l("2877"),d=Object(c["a"])(r,a,n,!1,null,null,null);t["default"]=d.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}},[l("vxe-table-column",{attrs:{type:"seq",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}},[l("vxe-table-column",{attrs:{type:"seq",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("4160"),l("a630"),l("fb6a"),l("3ca3"),l("159b"),l("1487")),i=l.n(o),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          :show-header="false"\n          :data="tableData">\n          <vxe-table-column type="seq" 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="tableData2">\n          <vxe-table-column type="seq" 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)}))}},r=s,c=l("2877"),d=Object(c["a"])(r,a,n,!1,null,null,null);t["default"]=d.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}},[l("vxe-table-column",{attrs:{type:"seq",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}},[l("vxe-table-column",{attrs:{type:"seq",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}},[l("vxe-table-column",{attrs:{type:"seq",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("4160"),l("a630"),l("fb6a"),l("3ca3"),l("159b"),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="tableData">\n          <vxe-table-column type="seq" 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="tableData2">\n          <vxe-table-column type="seq" 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="tableData">\n            <vxe-table-column type="seq" 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)}))}},r=s,c=l("2877"),d=Object(c["a"])(r,a,n,!1,null,null,null);t["default"]=d.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}},[l("vxe-table-column",{attrs:{type:"seq",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}},[l("vxe-table-column",{attrs:{type:"seq",width:"60"}}),l("vxe-table-column",{attrs:{field:"date",title:"转日期",width:"180",formatter:"toDateString"}}),l("vxe-table-column",{attrs:{field:"time",title:"转日期格式",width:"140",formatter:["toDateString","yyyy-MM-dd"]}}),l("vxe-table-column",{attrs:{field:"amount",title:"格式化金额",formatter:"commafy"}}),l("vxe-table-column",{attrs:{field:"bankCard",title:"银行卡",width:"180",formatter:["commafy",{spaceNumber:4,separator:" "}]}}),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:["formatSelect",e.sexList]}})],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(" 全局格式化内容，会在需要的时候自动调用对应 "),l("a",{staticClass:"link",attrs:{href:"https://xuliangzhan.github.io/xe-utils/#/",target:"_blank"}},[e._v("xe-utils")]),e._v(" 函数库的方法进行数据处理"),l("br"),e._v(" 可以通过自定义函数实现统一的格式化处理，这对于很多场景非常有用，减少很多不必要的重复代码 ")])}],o=(l("7db0"),l("4160"),l("a630"),l("fb6a"),l("3ca3"),l("159b"),l("1487")),i=l.n(o),s=l("c695"),r=l.n(s);r.a.mixin({formatSelect:function(e,t){var l=t.find((function(t){return t.value===e}));return l?l.label:""}});var c={data:function(){return{tableData:[],sexList:[{label:"女",value:"0"},{label:"男",value:"1"}],demoCodes:['\n        <vxe-table\n          border\n          :data="tableData">\n          <vxe-table-column type="seq" 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              sexList: [\n                {\n                  label: '女',\n                  value: '0'\n                },\n                {\n                  label: '男',\n                  value: '1'\n                }\n              ]\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n          },\n          methods: {\n            formatterSex ({ cellValue }) {\n              let item = this.sexList.find(item => item.value === cellValue)\n              return item ? item.label : ''\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="tableData">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column field="date" title="转日期" width="180" formatter="toDateString"></vxe-table-column>\n          <vxe-table-column field="time" title="转日期格式" width="140" :formatter="[\'toDateString\', \'yyyy-MM-dd\']"></vxe-table-column>\n          <vxe-table-column field="amount" title="格式化金额" formatter="commafy"></vxe-table-column>\n          <vxe-table-column field="bankCard" title="银行卡" width="180" :formatter="[\'commafy\', {spaceNumber: 4, separator: \' \'}]"></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="[\'formatSelect\', sexList]"></vxe-table-column>\n        </vxe-table>\n        ',"\n        XEUtils.mixin({\n          // 自定义全局的格式化处理函数\n          formatSelect (cellValue, list) {\n            let item = list.find(item => item.value === cellValue)\n            return item ? item.label : ''\n          }\n        })\n\n        export default {\n          data () {\n            return {\n              tableData: [],\n              sexList: [\n                {\n                  label: '女',\n                  value: '0'\n                },\n                {\n                  label: '男',\n                  value: '1'\n                }\n              ]\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,l=this.sexList.find((function(e){return e.value===t}));return l?l.label:""},formatTime:function(e){var t=e.cellValue;e.row,e.column;return r.a.toDateString(t,"yyyy-MM-dd HH:ss:mm")}}},d=c,b=l("2877"),v=Object(b["a"])(d,a,n,!1,null,null,null);t["default"]=v.exports},ad46: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("="),l("table-column-api-link",{attrs:{prop:"seq"}}),e._v(" 开启序号列")],1),l("vxe-table",{attrs:{border:"",height:"300",data:e.tableData}},[l("vxe-table-column",{attrs:{type:"seq",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:"seq-config"}}),e._v("={"),l("table-api-link",{attrs:{prop:"startIndex"}}),e._v("} 自定义起始序号")],1),l("vxe-table",{attrs:{border:"","highlight-hover-row":"",height:"300","seq-config":{startIndex:100},data:e.tableData}},[l("vxe-table-column",{attrs:{type:"seq",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-api-link",{attrs:{prop:"seq-config"}}),e._v("={"),l("table-api-link",{attrs:{prop:"seqMethod"}}),e._v("} 自定义方法")],1),l("vxe-table",{attrs:{border:"","highlight-hover-row":"",height:"300","seq-config":{seqMethod:e.seqMethod},data:e.tableData}},[l("vxe-table-column",{attrs:{type:"seq",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[4]))]),e._v("\n    "),l("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[5]))]),e._v("\n  ")])],1)},n=[],o=(l("4160"),l("a630"),l("fb6a"),l("3ca3"),l("159b"),l("1487")),i=l.n(o),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          height="300"\n          :data="tableData">\n          <vxe-table-column type="seq" 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          :seq-config="{startIndex: 100}"\n          :data="tableData">\n          <vxe-table-column type="seq" 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          :seq-config="{seqMethod: seqMethod}"\n          :data="tableData">\n          <vxe-table-column type="seq" 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        "]}},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:{seqMethod:function(e){var t=e.rowIndex;return 2*t}}},r=s,c=l("2877"),d=Object(c["a"])(r,a,n,!1,null,null,null);t["default"]=d.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}},[l("vxe-table-column",{attrs:{type:"seq",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}},[l("vxe-table-column",{attrs:{type:"seq",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("4160"),l("a630"),l("fb6a"),l("3ca3"),l("159b"),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="tableData">\n          <vxe-table-column type="seq" 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="tableData">\n          <vxe-table-column type="seq" 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)}))}},r=s,c=l("2877"),d=Object(c["a"])(r,a,n,!1,null,null,null);t["default"]=d.exports},b683: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:"width"}}),e._v(" 参数，支持固定像素、百分比、自适应等，如果不设置则全部均匀分配"),l("br"),l("span",{staticClass:"red"},[e._v('(注：不应该全部都使用固定像素，应该当所有列加起来的宽度小于表格宽度时，就会出现空白区，可以配合 "%" 或 "'),l("table-column-api-link",{attrs:{prop:"min-width"}}),e._v('" 实现等比例缩放)')],1)],1),l("vxe-table",{attrs:{border:"",data:e.tableData}},[l("vxe-table-column",{attrs:{type:"seq"}}),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:"date",title:"Date"}})],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}},[l("vxe-table-column",{attrs:{type:"seq",width:"80"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",width:"200"}}),l("vxe-table-column",{attrs:{field:"role",title:"Role"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex",width:"140"}}),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[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:"",data:e.tableData}},[l("vxe-table-column",{attrs:{type:"seq",width:"80"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name","min-width":"200"}}),l("vxe-table-column",{attrs:{field:"role",title:"Role","min-width":"140"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex","min-width":"120"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age","min-width":"120"}})],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:"",data:e.tableData}},[l("vxe-table-column",{attrs:{type:"seq",width:"10%"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",width:"30%"}}),l("vxe-table-column",{attrs:{field:"role",title:"Role",width:"20%"}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex",width:"20%"}}),l("vxe-table-column",{attrs:{field:"age",title:"Age",width:"20%"}})],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("4160"),l("a630"),l("fb6a"),l("3ca3"),l("159b"),l("1487")),i=l.n(o),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          :data="tableData">\n          <vxe-table-column type="seq"></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="date" title="Date"></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          :data="tableData">\n          <vxe-table-column type="seq" width="80"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" width="200"></vxe-table-column>\n          <vxe-table-column field="role" title="Role"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex" width="140"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 4)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          :data="tableData">\n          <vxe-table-column type="seq" width="80"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" min-width="200"></vxe-table-column>\n          <vxe-table-column field="role" title="Role" min-width="140"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex" min-width="120"></vxe-table-column>\n          <vxe-table-column field="age" title="Age" min-width="120"></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          :data="tableData">\n          <vxe-table-column type="seq" width="10%"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" width="30%"></vxe-table-column>\n          <vxe-table-column field="role" title="Role" width="20%"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex" width="20%"></vxe-table-column>\n          <vxe-table-column field="age" title="Age" width="20%"></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)}))}},r=s,c=l("2877"),d=Object(c["a"])(r,a,n,!1,null,null,null);t["default"]=d.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}},[l("vxe-table-column",{attrs:{title:"基本信息"}},[l("vxe-table-column",{attrs:{type:"seq",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  ")]),e._m(0),l("vxe-table",{attrs:{border:"",height:"400",data:e.tableData}},[l("vxe-table-column",{attrs:{title:"基本信息"}},[l("vxe-table-column",{attrs:{type:"seq",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=[function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("p",{staticClass:"tip"},[l("span",{staticClass:"red"},[e._v("注：如果使用了分组表头，则需要按组来设置固定列，且固定列必须是在左右两侧位置，不允许跨列")])])}],o=(l("4160"),l("a630"),l("fb6a"),l("3ca3"),l("159b"),l("1487")),i=l.n(o),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          height="400"\n          :data="tableData">\n          <vxe-table-column title="基本信息">\n            <vxe-table-column type="seq" 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="tableData">\n          <vxe-table-column title="基本信息">\n            <vxe-table-column type="seq" 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)}))}},r=s,c=l("2877"),d=Object(c["a"])(r,a,n,!1,null,null,null);t["default"]=d.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("=none 去掉外部边框")],1),l("vxe-table",{attrs:{border:"none",data:e.tableData}},[l("vxe-table-column",{attrs:{type:"seq",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:"border"}}),e._v("=false 只显示外边框")],1),l("vxe-table",{attrs:{data:e.tableData}},[l("vxe-table-column",{attrs:{type:"seq",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:"border"}}),e._v("=true 显示所有边框")],1),l("vxe-table",{attrs:{border:"",data:e.tableData}},[l("vxe-table-column",{attrs:{type:"seq",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  ")])],1)},n=[],o=(l("4160"),l("a630"),l("fb6a"),l("3ca3"),l("159b"),l("1487")),i=l.n(o),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border="none"\n          :data="tableData">\n          <vxe-table-column type="seq" 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, 3)\n          }\n        }\n        ",'\n        <vxe-table\n          :data="tableData">\n          <vxe-table-column type="seq" 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, 3)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          :data="tableData">\n          <vxe-table-column type="seq" 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, 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)}))}},r=s,c=l("2877"),d=Object(c["a"])(r,a,n,!1,null,null,null);t["default"]=d.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}},[l("vxe-table-column",{attrs:{type:"seq",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("4160"),l("a630"),l("fb6a"),l("3ca3"),l("159b"),l("1487")),i=l.n(o),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          height="400"\n          :data="tableData">\n          <vxe-table-column type="seq" 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)}))}},r=s,c=l("2877"),d=Object(c["a"])(r,a,n,!1,null,null,null);t["default"]=d.exports},df8c: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:"",stripe:"",resizable:"","highlight-hover-row":"",height:"500",loading:e.loading,"checkbox-config":{labelField:"id",highlight:!0,range:!0},data:e.tableData}},[l("vxe-table-column",{attrs:{type:"seq",width:"60"}}),l("vxe-table-column",{attrs:{type:"checkbox",title:"ID",width:"140"}}),l("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:""}}),l("vxe-table-column",{attrs:{field:"sex",title:"Sex",filters:e.sexList,"filter-multiple":!1,formatter:e.formatterSex}}),l("vxe-table-column",{attrs:{field:"age",title:"Age",sortable:"",filters:[{label:"大于16岁",value:16},{label:"大于26岁",value:26},{label:"大于30岁",value:30}],"filter-method":e.filterAgeMethod}}),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("7db0"),l("4160"),l("a630"),l("fb6a"),l("3ca3"),l("159b"),l("1487")),i=l.n(o),s={data:function(){return{loading:!1,tableData:[],sexList:[{label:"女",value:"0"},{label:"男",value:"1"}],demoCodes:['\n        <vxe-table\n          border\n          stripe\n          resizable\n          highlight-hover-row\n          height="500"\n          :loading="loading"\n          :checkbox-config="{labelField: \'id\', highlight: true, range: true}"\n          :data="tableData">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column type="checkbox" title="ID" width="140"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" sortable></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex" :filters="sexList" :filter-multiple="false" :formatter="formatterSex"></vxe-table-column>\n          <vxe-table-column\n            field="age"\n            title="Age"\n            sortable\n            :filters="[{label: \'大于16岁\', value: 16}, {label: \'大于26岁\', value: 26}, {label: \'大于30岁\', value: 30}]"\n            :filter-method="filterAgeMethod"></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              loading: false,\n              tableData: [],\n              sexList: [\n                {\n                  label: '女',\n                  value: '0'\n                },\n                {\n                  label: '男',\n                  value: '1'\n                }\n              ]\n            }\n          },\n          created () {\n            this.loading = true\n            setTimeout(() => {\n              this.tableData = window.MOCK_DATA_LIST.slice(0, 15)\n              this.loading = false\n            }, 500)\n          },\n          methods: {\n            formatterSex ({ cellValue }) {\n              let item = this.sexList.find(item => item.value === cellValue)\n              return item ? item.label : ''\n            },\n            filterAgeMethod ({ value, row, column }) {\n              return row.age >= value\n            }\n          }\n        }\n        "]}},created:function(){var e=this;this.loading=!0,setTimeout((function(){e.tableData=window.MOCK_DATA_LIST.slice(0,15),e.loading=!1}),500)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},methods:{formatterSex:function(e){var t=e.cellValue,l=this.sexList.find((function(e){return e.value===t}));return l?l.label:""},filterAgeMethod:function(e){var t=e.value,l=e.row;e.column;return l.age>=t}}},r=s,c=l("2877"),d=Object(c["a"])(r,a,n,!1,null,null,null);t["default"]=d.exports},e6ab:function(e,t,l){},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:"",resizable:"",height:"300","highlight-hover-row":"",data:e.tableData}},[l("vxe-table-column",{attrs:{type:"seq",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:{title:"操作",fixed:"right",width:"200"}},[[l("vxe-button",{attrs:{type:"text"}},[e._v("按钮1")]),l("vxe-button",{attrs:{type:"text"}},[e._v("按钮2")])]],2)],1),l("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),l("pre",[e._v("    "),l("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[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:"show-overflow"}}),e._v(" 该值，禁用自动换行，大幅提升渲染速度")],1),l("vxe-table",{attrs:{border:"",height:"300","highlight-hover-row":"","show-overflow":"",data:e.tableData}},[l("vxe-table-column",{attrs:{type:"seq",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:{title:"操作",fixed:"right",width:"200"}},[[l("vxe-button",{attrs:{status:"primary"}},[e._v("按钮1")]),l("vxe-button",[e._v("按钮2")])]],2)],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      | Page Up | 向上翻页滚动 |\n      | Page Down | 向下翻页滚动 |\n      | Spacebar | 翻页滚动 |\n      | Home | 滚动到顶部 |\n      | End | 滚动到底部 |\n    ")]),e._v("\n  ")])}],o=(l("4160"),l("a630"),l("fb6a"),l("3ca3"),l("159b"),l("1487")),i=l.n(o),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          resizable\n          height="300"\n          highlight-hover-row\n          :data="tableData">\n          <vxe-table-column type="seq" 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 title="操作" fixed="right" width="200">\n            <template>\n              <vxe-button type="text">按钮1</vxe-button>\n              <vxe-button type="text">按钮2</vxe-button>\n            </template>\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, 20)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          height="300"\n          highlight-hover-row\n          show-overflow\n          :data="tableData">\n          <vxe-table-column type="seq" 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 title="操作" fixed="right" width="200">\n            <template>\n              <vxe-button status="primary">按钮1</vxe-button>\n              <vxe-button>按钮2</vxe-button>\n            </template>\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, 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)}))}},r=s,c=l("2877"),d=Object(c["a"])(r,a,n,!1,null,null,null);t["default"]=d.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(" 固定列，通过设置 "),l("table-column-api-link",{attrs:{prop:"fixed"}}),e._v(" 参数"),l("br"),e._v(" 当横向内容过多时，将列固定在左右两侧 ")],1),l("vxe-table",{attrs:{border:"none","show-overflow":"",data:e.tableData}},[l("vxe-table-column",{attrs:{type:"seq",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}},[l("vxe-table-column",{attrs:{type:"seq",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("4160"),l("a630"),l("fb6a"),l("3ca3"),l("159b"),l("1487")),i=l.n(o),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border="none"\n          show-overflow\n          :data="tableData">\n          <vxe-table-column type="seq" 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="tableData">\n          <vxe-table-column type="seq" 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)}))}},r=s,c=l("2877"),d=Object(c["a"])(r,a,n,!1,null,null,null);t["default"]=d.exports},fab1: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.tableData1}},[l("vxe-table-column",{attrs:{type:"seq",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:"content",title:"Html",type:"html","show-overflow":""}}),l("vxe-table-column",{attrs:{field:"role",title:"Role","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:{data:e.tableData2}},[l("vxe-table-column",{attrs:{type:"seq",width:"60"}}),l("vxe-table-column",{attrs:{field:"userInfo.name",title:"Name"}}),l("vxe-table-column",{attrs:{field:"other[0].sex",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"userInfo.age",title:"Age"}}),l("vxe-table-column",{attrs:{field:"other[1].more.content",title:"Html",type:"html","show-overflow":""}}),l("vxe-table-column",{attrs:{field:"role",title:"Role","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("span",{staticClass:"red"},[e._v("（缺点局限性比较大，需要手动指定 "),l("table-api-link",{attrs:{prop:"row-id"}}),e._v(" 唯一主键）")],1)]),l("vxe-table",{attrs:{"row-id":"0",data:e.tableData3}},[l("vxe-table-column",{attrs:{type:"seq",width:"60"}}),l("vxe-table-column",{attrs:{field:"1",title:"Name"}}),l("vxe-table-column",{attrs:{field:"2",title:"Sex"}}),l("vxe-table-column",{attrs:{field:"3",title:"Age"}}),l("vxe-table-column",{attrs:{field:"4",title:"Html",type:"html","show-overflow":""}}),l("vxe-table-column",{attrs:{field:"5",title:"Role","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=[function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("p",{staticClass:"tip"},[e._v("深层结构，可用于带有复杂结构的场景"),l("span",{staticClass:"red"},[e._v("（缺点深层级数据类型必须先定义，深层结构将导致性能直线下降，具体取决于数据量大小）")])])}],o=(l("4160"),l("a630"),l("3ca3"),l("159b"),l("1487")),i=l.n(o),s={data:function(){return{tableData1:[{name:"Test2",age:28,sex:"男",role:"后端",content:'<img height="40" src="static/other/img1.gif">'},{name:"Test4",age:26,sex:"男",role:"前端",content:'<a href="https://github.com/xuliangzhan/vxe-table">我是链接</a>'},{name:"Test3",age:20,sex:"女",role:"程序员鼓励师",content:'<img height="40" src="static/other/img2.gif">'},{name:"Test1",age:22,sex:"女",role:"设计师",content:'<div><span style="color: red">在线观看.avi</span></div>'}],tableData2:[{userInfo:{name:"Test1",age:22},other:[{sex:"女"},{more:{content:'<div><span style="color: red">在线观看.avi</span></div>'}}],role:"设计师"},{userInfo:{name:"Test2",age:28},other:[{sex:"男"},{more:{content:'<img height="40" src="static/other/img1.gif">'}}],role:"后端"},{userInfo:{name:"Test3",age:20},other:[{sex:"女"},{more:{content:'<img height="40" src="static/other/img2.gif">'}}],role:"程序员鼓励师"},{userInfo:{name:"Test4",age:26},other:[{sex:"男"},{more:{content:'<a href="https://github.com/xuliangzhan/vxe-table">我是链接</a>'}}],role:"前端"}],tableData3:[[101,"Test4","男",26,'<a href="https://github.com/xuliangzhan/vxe-table">我是链接</a>',"前端"],[102,"Test2","男",28,'<img height="40" src="static/other/img1.gif">',"后端"],[103,"Test1","女",22,'<div><span style="color: red">在线观看.avi</span></div>',"设计师"],[104,"Test3","女",20,'<img height="40" src="static/other/img2.gif">',"程序员鼓励师"]],demoCodes:['\n        <vxe-table\n          :data="tableData">\n          <vxe-table-column type="seq" 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="content" title="Html" type="html" show-overflow></vxe-table-column>\n          <vxe-table-column field="role" title="Role" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [\n                { name: 'Test2', age: 28, sex: '男', role: '后端', content: '<img height=\"40\" src=\"static/other/img1.gif\">' },\n                { name: 'Test4', age: 26, sex: '男', role: '前端', content: '<a href=\"https://github.com/xuliangzhan/vxe-table\">我是链接</a>' },\n                { name: 'Test3', age: 20, sex: '女', role: '程序员鼓励师', content: '<img height=\"40\" src=\"static/other/img2.gif\">' },\n                { name: 'Test1', age: 22, sex: '女', role: '设计师', content: '<div><span style=\"color: red\">在线观看.avi</span></div>' }\n              ]\n            }\n          }\n        }\n        ",'\n        <vxe-table\n          :data="tableData">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column field="userInfo.name" title="Name"></vxe-table-column>\n          <vxe-table-column field="other[0].sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="userInfo.age" title="Age"></vxe-table-column>\n          <vxe-table-column field="other[1].more.content" title="Html" type="html" show-overflow></vxe-table-column>\n          <vxe-table-column field="role" title="Role" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [\n                {\n                  userInfo: { name: 'Test1', age: 22 },\n                  other: [\n                    { sex: '女' },\n                    { more: { content: '<div><span style=\"color: red\">在线观看.avi</span></div>' } }\n                  ],\n                  role: '设计师'\n                },\n                {\n                  userInfo: { name: 'Test2', age: 28 },\n                  other: [\n                    { sex: '男' },\n                    { more: { content: '<img height=\"40\" src=\"static/other/img1.gif\">' } }\n                  ],\n                  role: '后端'\n                },\n                {\n                  userInfo: { name: 'Test3', age: 20 },\n                  other: [\n                    { sex: '女' },\n                    { more: { content: '<img height=\"40\" src=\"static/other/img2.gif\">' } }\n                  ],\n                  role: '程序员鼓励师'\n                },\n                {\n                  userInfo: { name: 'Test4', age: 26 },\n                  other: [\n                    { sex: '男' },\n                    { more: { content: '<a href=\"https://github.com/xuliangzhan/vxe-table\">我是链接</a>' } }\n                  ],\n                  role: '前端'\n                }\n              ]\n            }\n          }\n        }\n        ",'\n        <vxe-table\n          row-id="0"\n          :data="tableData">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column field="1" title="Name"></vxe-table-column>\n          <vxe-table-column field="2" title="Sex"></vxe-table-column>\n          <vxe-table-column field="3" title="Age"></vxe-table-column>\n          <vxe-table-column field="4" title="Html" type="html" show-overflow></vxe-table-column>\n          <vxe-table-column field="5" title="Role" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [\n                [101, 'Test4', '男', 26, '<a href=\"https://github.com/xuliangzhan/vxe-table\">我是链接</a>', '前端'],\n                [102, 'Test2', '男', 28, '<img height=\"40\" src=\"static/other/img1.gif\">', '后端'],\n                [103, 'Test1', '女', 22, '<div><span style=\"color: red\">在线观看.avi</span></div>', '设计师'],\n                [104, 'Test3', '女', 20, '<img height=\"40\" src=\"static/other/img2.gif\">', '程序员鼓励师']\n              ]\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 3)\n          }\n        }\n        "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))}},r=s,c=l("2877"),d=Object(c["a"])(r,a,n,!1,null,null,null);t["default"]=d.exports}}]);