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

(window["webpackJsonpVXETable"]=window["webpackJsonpVXETable"]||[]).push([["base"],{"069f":function(e,t,a){"use strict";a.r(t);var l=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("p",[e._v("通过设置 "),a("table-api-link",{attrs:{prop:"resizable"}}),e._v(" 属性可以启用所有列宽拖动")],1),a("p",[e._v("也可以通过给 column 设置 "),a("table-column-api-link",{attrs:{prop:"resizable"}}),e._v(" 属性控制列是否允许拖动")],1),a("vxe-table",{attrs:{resizable:"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"60"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"time",label:"Time"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),a("p",[e._v("横向滚动条")]),a("vxe-table",{attrs:{border:"",resizable:"","highlight-hover-row":"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"60"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name",width:"300"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex",width:"300"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age",width:"300"}}),a("vxe-table-column",{attrs:{prop:"time",label:"Time",width:"300"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address",width:"300","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")])],1)},n=[],o=(a("5df3"),a("1c4c"),a("ac6a"),a("1487")),r=a.n(o),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          resizable\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name"></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n          <vxe-table-column prop="time" label="Time"></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          resizable\n          highlight-hover-row\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name" width="300"></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex" width="300"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age" width="300"></vxe-table-column>\n          <vxe-table-column prop="time" label="Time" width="300"></vxe-table-column>\n          <vxe-table-column prop="address" label="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, 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){r.a.highlightBlock(e)})}},c=s,b=a("2877"),d=Object(b["a"])(c,l,n,!1,null,null,null);t["default"]=d.exports},"0dc5":function(e,t,a){"use strict";a.r(t);var l=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("p",[e._v("多选表格，基础方式")]),a("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[a("vxe-button",{on:{click:function(t){return e.$refs.xTable1.toggleRowSelection(e.tableData[1])}}},[e._v("切换第二行选中")]),a("vxe-button",{on:{click:function(t){return e.$refs.xTable1.setSelection([e.tableData[2],e.tableData[3]],!0)}}},[e._v("设置第三、四行选中")]),a("vxe-button",{on:{click:function(t){return e.$refs.xTable1.setAllSelection(!0)}}},[e._v("设置所有行选中")]),a("vxe-button",{on:{click:function(t){return e.$refs.xTable1.clearSelection()}}},[e._v("清除所有行选中")])]},proxy:!0}])}),a("vxe-table",{ref:"xTable1",attrs:{border:"",height:"300",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"selection",width:"60"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),a("p",[e._v("还可以通过 "),a("table-api-link",{attrs:{prop:"checkMethod"}}),e._v(" 方法控制是否允许点击 CheckBox 勾选，还可以配置 "),a("table-api-link",{attrs:{prop:"labelProp"}}),e._v(" 列显示属性")],1),a("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[a("vxe-button",{on:{click:function(t){return e.$refs.xTable2.toggleRowSelection(e.tableData[1])}}},[e._v("切换第二行选中")]),a("vxe-button",{on:{click:function(t){return e.$refs.xTable2.setSelection([e.tableData[2],e.tableData[3]],!0)}}},[e._v("设置第三、四行选中")]),a("vxe-button",{on:{click:function(t){return e.$refs.xTable2.setAllSelection(!0)}}},[e._v("设置所有行选中")]),a("vxe-button",{on:{click:function(t){return e.$refs.xTable2.clearSelection()}}},[e._v("清除所有行选中")])]},proxy:!0}])}),a("vxe-table",{ref:"xTable2",attrs:{border:"",height:"300",data:e.tableData,"select-config":{labelProp:"name",checkMethod:e.checkMethod}},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"selection",label:"All"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")]),a("p",[e._v("多选表格，通过配置 "),a("table-api-link",{attrs:{prop:"select-config"}}),e._v(" 参数，使用渲染最快的 "),a("table-api-link",{attrs:{prop:"labelProp"}}),e._v(" 属性绑定方式")],1),a("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[a("vxe-button",{on:{click:function(t){return e.$refs.xTable3.toggleRowSelection(e.tableData[1])}}},[e._v("切换第二行选中")]),a("vxe-button",{on:{click:function(t){return e.$refs.xTable3.setSelection([e.tableData[2],e.tableData[3]],!0)}}},[e._v("设置第三、四行选中")]),a("vxe-button",{on:{click:function(t){return e.$refs.xTable3.setAllSelection(!0)}}},[e._v("设置所有行选中")]),a("vxe-button",{on:{click:function(t){return e.$refs.xTable3.clearSelection()}}},[e._v("清除所有行选中")])]},proxy:!0}])}),a("vxe-table",{ref:"xTable3",attrs:{border:"",height:"300",data:e.tableData,"select-config":{checkProp:"checked"}},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"selection",width:"60"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[4]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[5]))]),e._v("\n  ")])],1)},n=[],o=(a("5df3"),a("1c4c"),a("ac6a"),a("1487")),r=a.n(o),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="$refs.xTable1.toggleRowSelection(tableData[1])">切换第二行选中</vxe-button>\n            <vxe-button @click="$refs.xTable1.setSelection([tableData[2], tableData[3]], true)">设置第三、四行选中</vxe-button>\n            <vxe-button @click="$refs.xTable1.setAllSelection(true)">设置所有行选中</vxe-button>\n            <vxe-button @click="$refs.xTable1.clearSelection()">清除所有行选中</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          ref="xTable1"\n          border\n          height="300"\n          :data.sync="tableData">\n          <vxe-table-column type="selection" width="60"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name"></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 10)\n          }\n        }\n        ",'\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="$refs.xTable2.toggleRowSelection(tableData[1])">切换第二行选中</vxe-button>\n            <vxe-button @click="$refs.xTable2.setSelection([tableData[2], tableData[3]], true)">设置第三、四行选中</vxe-button>\n            <vxe-button @click="$refs.xTable2.setAllSelection(true)">设置所有行选中</vxe-button>\n            <vxe-button @click="$refs.xTable2.clearSelection()">清除所有行选中</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          ref="xTable2"\n          border\n          height="300"\n          :data.sync="tableData"\n          :select-config="{labelProp: \'name\', checkMethod}">\n          <vxe-table-column type="selection" label="All"></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 10)\n          },\n          methods: {\n            checkMethod ({ row }) {\n              return row.age > 26\n            }\n          }\n        }\n        ",'\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="$refs.xTable3.toggleRowSelection(tableData[1])">切换第二行选中</vxe-button>\n            <vxe-button @click="$refs.xTable3.setSelection([tableData[2], tableData[3]], true)">设置第三、四行选中</vxe-button>\n            <vxe-button @click="$refs.xTable3.setAllSelection(true)">设置所有行选中</vxe-button>\n            <vxe-button @click="$refs.xTable3.clearSelection()">清除所有行选中</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          ref="xTable3"\n          border\n          height="300"\n          :data.sync="tableData"\n          :select-config="{checkProp: \'checked\'}">\n          <vxe-table-column type="selection" width="60"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name"></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 10)\n          }\n        }\n        "]}},created:function(){var e=window.MOCK_DATA_LIST.slice(0,10);this.tableData=e},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){r.a.highlightBlock(e)})},methods:{checkMethod:function(e){var t=e.row;return t.age>26}}},c=s,b=a("2877"),d=Object(b["a"])(c,l,n,!1,null,null,null);t["default"]=d.exports},"203d":function(e,t,a){"use strict";a.r(t);var l=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("p",[e._v("默认的序号从 1 开始，你也可以自定义 "),a("table-column-api-link",{attrs:{prop:"index-method"}}),e._v(" 函数")],1),a("vxe-table",{attrs:{border:"","highlight-hover-row":"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"60"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name",sortable:""}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",[e._v("使用 "),a("table-column-api-link",{attrs:{prop:"index-method"}}),e._v(" 自定义序号")],1),a("vxe-table",{attrs:{border:"",height:"300",data:e.tableData2},on:{"update:data":function(t){e.tableData2=t}}},[a("vxe-table-column",{attrs:{type:"index",label:"序号",width:"60","index-method":e.indexMethod}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name",sortable:""}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1)],1)},n=[],o={data:function(){return{tableData:[],tableData2:[]}},created:function(){var e=window.MOCK_DATA_LIST.slice(0,4);this.tableData=e,this.tableData2=window.MOCK_DATA_LIST.slice(0,50)},methods:{indexMethod:function(e){var t=e.rowIndex;return 2*t}}},r=o,s=a("2877"),c=Object(s["a"])(r,l,n,!1,null,null,null);t["default"]=c.exports},"300b":function(e,t,a){"use strict";var l=a("4b04"),n=a.n(l);n.a},"31d8":function(e,t,a){"use strict";a.r(t);var l=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("p",[e._v("基础使用")]),a("vxe-table",{attrs:{data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"60"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),a("p",[e._v("配合 loading 使用，可以通过 slot="),a("table-api-link",{attrs:{prop:"empty"}}),e._v(" 自定义提示语")],1),a("vxe-table",{attrs:{height:"300",loading:e.loading,data:e.tableData},on:{"update:data":function(t){e.tableData=t}},scopedSlots:e._u([{key:"empty",fn:function(){return[a("span",{staticStyle:{color:"red"}},[e._v("没有更多数据了！")])]},proxy:!0}])},[a("vxe-table-column",{attrs:{type:"index",width:"60"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")])],1)},n=[],o=(a("5df3"),a("1c4c"),a("ac6a"),a("1487")),r=a.n(o),s={data:function(){return{loading:!1,tableData:[],tableData2:[],demoCodes:['\n        <vxe-table\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name"></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              loading: false,\n              tableData: [],\n              tableData2: []\n            }\n          },\n          created () {\n            setTimeout(() => {\n              this.tableData = []\n            }, 1000)\n          }\n        }\n        ",'\n        <vxe-table\n          :loading="loading"\n          :data.sync="tableData2">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name"></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>\n          <template v-slot:empty>\n            <span style="color: red;">没有更多数据了！</span>\n          </template>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              loading: false,\n              tableData: [],\n              tableData2: []\n            }\n          },\n          created () {\n            this.loading = true\n            setTimeout(() => {\n              this.loading = false\n              this.tableData2 = []\n            }, 1000)\n          }\n        }\n        "]}},created:function(){var e=this;setTimeout(function(){e.tableData=[]},1e3),this.loading=!0,setTimeout(function(){e.loading=!1,e.tableData2=[]},1e3)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){r.a.highlightBlock(e)})}},c=s,b=a("2877"),d=Object(b["a"])(c,l,n,!1,null,null,null);t["default"]=d.exports},3617:function(e,t,a){"use strict";a.r(t);var l=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("p",[e._v("基础使用")]),a("vxe-table",{attrs:{data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"60"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),a("p",[e._v("使用 "),a("table-api-link",{attrs:{prop:"highlight-hover-row"}}),e._v(" 属性启用 hover 行高亮")],1),a("vxe-table",{attrs:{"highlight-hover-row":"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"index",label:"序号",width:"60"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")])],1)},n=[],o=(a("5df3"),a("1c4c"),a("ac6a"),a("1487")),r=a.n(o),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name"></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n          }\n        }\n        ",'\n        <vxe-table\n          highlight-hover-row\n          :data.sync="tableData">\n          <vxe-table-column type="index" label="序号" width="60"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name"></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 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){r.a.highlightBlock(e)})}},c=s,b=a("2877"),d=Object(b["a"])(c,l,n,!1,null,null,null);t["default"]=d.exports},"3c8d":function(e,t,a){"use strict";a.r(t);var l=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("p",[e._v("通过设置 "),a("table-column-api-link",{attrs:{prop:"filters"}}),e._v(" 属性和 "),a("table-column-api-link",{attrs:{prop:"filter-method"}}),e._v(" 方法可以支持列筛选功能")],1),a("p",[e._v("如果是服务端筛选，只需加上 "),a("table-api-link",{attrs:{prop:"remote-filter"}}),e._v(" 和 "),a("table-api-link",{attrs:{prop:"filter-change"}}),e._v(" 事件就可以实现")],1),a("vxe-table",{attrs:{border:"","highlight-hover-row":"",height:"400",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"60"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name",sortable:"",filters:[{label:"id大于10",value:10},{label:"id大于40",value:40}],"filter-method":e.filterMethod}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex",sortable:"",filters:[{label:"Man",value:"1"},{label:"Woman",value:"0"}]}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"time",label:"Time",sortable:""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},n=[],o=(a("5df3"),a("1c4c"),a("ac6a"),a("1487")),r=a.n(o),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          highlight-hover-row\n          height="400"\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name" sortable :filters="[{label: \'id大于10\', value: 10}, {label: \'id大于40\', value: 40}]" :filter-method="filterMethod"></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex" sortable :filters="[{label: \'Man\', value: \'1\'}, {label: \'Woman\', value: \'0\'}]"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n          <vxe-table-column prop="time" label="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            filterMethod ({ value, row, column }) {\n              return row.id >= value\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){r.a.highlightBlock(e)})},methods:{filterMethod:function(e){var t=e.value,a=e.row;e.column;return a.id>=t}}},c=s,b=a("2877"),d=Object(b["a"])(c,l,n,!1,null,null,null);t["default"]=d.exports},4308:function(e,t,a){"use strict";a.r(t);var l=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("p",[e._v("当一个表格需要铺满父容器时，这个功能将非常有用")]),a("p",[e._v("通过设置 "),a("table-api-link",{attrs:{prop:"height"}}),e._v("=auto 表格会相对于父容器的高度去铺满，但是只会在数据重新加载时才会计算")],1),a("p",[e._v("还可以根据不同场景添加 "),a("table-api-link",{attrs:{prop:"auto-resize"}}),e._v(" 属性启用自动监听（"),a("table-api-link",{attrs:{prop:"auto-resize"}}),e._v(" 会有额外的损耗，根据需要的场景添加），这样就只需要通过样式控制父容器高度就可以实现响应式表格")],1),a("div",{staticStyle:{height:"800px"}},[a("vxe-table",{attrs:{border:"",height:"auto",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"60"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1)],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])])},n=[],o=(a("5df3"),a("1c4c"),a("ac6a"),a("1487")),r=a.n(o),s={data:function(){return{tableData:[],demoCodes:['\n        <div style="height: 800px">\n          <vxe-table\n            border\n            height="auto"\n            :data.sync="tableData">\n            <vxe-table-column type="index" width="60"></vxe-table-column>\n            <vxe-table-column prop="name" label="Name"></vxe-table-column>\n            <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n            <vxe-table-column prop="age" label="Age"></vxe-table-column>\n            <vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>\n          </vxe-table>\n        </div>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 50)\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,50)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){r.a.highlightBlock(e)})}},c=s,b=a("2877"),d=Object(b["a"])(c,l,n,!1,null,null,null);t["default"]=d.exports},"43ce":function(e,t,a){"use strict";a.r(t);var l=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("p",[e._v("当内容或表头超过隐藏时显示为省略号，"),a("table-column-api-link",{attrs:{prop:"show-overflow"}}),e._v(" 和 "),a("table-api-link",{attrs:{prop:"show-header-overflow"}})],1),a("p",[a("table-column-api-link",{attrs:{prop:"ellipsis"}}),e._v(" 当内容超过时显示为省略号")],1),a("p",[a("table-column-api-link",{attrs:{prop:"title"}}),e._v(" 当内容超过时显示为省略号并用原生 title 显示")],1),a("p",[a("table-column-api-link",{attrs:{prop:"tooltip"}}),e._v(" 当内容超过隐藏时显示为省略号并用 tooltip 显示")],1),a("vxe-table",{attrs:{"highlight-hover-row":"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"60"}}),a("vxe-table-column",{attrs:{prop:"address",label:"超过隐藏时显示为省略号————————————","show-header-overflow":"","show-overflow":""}}),a("vxe-table-column",{attrs:{prop:"date",label:"内容超过隐藏时显示为省略号并用原生 title 显示","show-overflow":"title"}}),a("vxe-table-column",{attrs:{prop:"age",label:"表头超过隐藏时显示为省略号并 tooltip 显示——————————————","show-header-overflow":""}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),a("p",[e._v("使用 light 主题，通过 "),a("table-api-link",{attrs:{prop:"tooltip-config"}}),e._v(" 参数配置")],1),a("vxe-table",{attrs:{"highlight-hover-row":"",data:e.tableData,"tooltip-config":{theme:"light"}},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"60"}}),a("vxe-table-column",{attrs:{prop:"address",label:"超过隐藏时显示为省略号————————————","show-header-overflow":"","show-overflow":""}}),a("vxe-table-column",{attrs:{prop:"date",label:"内容超过隐藏时显示为省略号并用原生 title 显示","show-overflow":"title"}}),a("vxe-table-column",{attrs:{prop:"age",label:"表头超过隐藏时显示为省略号并 tooltip 显示——————————————","show-header-overflow":""}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")])],1)},n=[],o=(a("5df3"),a("1c4c"),a("ac6a"),a("1487")),r=a.n(o),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          highlight-hover-row\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column prop="address" label="超过隐藏时显示为省略号————————————" show-header-overflow show-overflow></vxe-table-column>\n          <vxe-table-column prop="date" label="内容超过隐藏时显示为省略号并用原生 title 显示" show-overflow="title"></vxe-table-column>\n          <vxe-table-column prop="age" label="表头超过隐藏时显示为省略号并 tooltip 显示——————————————" show-header-overflow></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n          }\n        }\n        ",'\n        <vxe-table\n          highlight-hover-row\n          :data.sync="tableData"\n          :tooltip-config="{theme: \'light\'}">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column prop="address" label="超过隐藏时显示为省略号————————————" show-header-overflow show-overflow></vxe-table-column>\n          <vxe-table-column prop="date" label="内容超过隐藏时显示为省略号并用原生 title 显示" show-overflow="title"></vxe-table-column>\n          <vxe-table-column prop="age" label="表头超过隐藏时显示为省略号并 tooltip 显示——————————————" show-header-overflow></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 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){r.a.highlightBlock(e)})}},c=s,b=a("2877"),d=Object(b["a"])(c,l,n,!1,null,null,null);t["default"]=d.exports},"447e":function(e,t,a){"use strict";a.r(t);var l=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("p",[e._v("使用 "),a("table-api-link",{attrs:{prop:"highlight-current-row"}}),e._v(" 方式；选项改变触发事件 "),a("table-api-link",{attrs:{prop:"select-change"}})],1),a("vxe-table",{attrs:{border:"","highlight-current-row":"",height:"300",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{prop:"name",label:"Name"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),a("p",[e._v("使用 radio 方式")]),a("vxe-table",{attrs:{border:"",height:"300","radio-config":{labelProp:"name"},data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"radio",label:"这样也行"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")]),a("p",[e._v("当然也可以两种方式同时使用")]),a("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[a("vxe-button",{on:{click:function(t){return e.$refs.xTable.setCurrentRow(e.tableData[1])}}},[e._v("设置第二行选中")])]},proxy:!0}])}),a("vxe-table",{ref:"xTable",attrs:{border:"","highlight-current-row":"",height:"300",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"radio",label:"还可以这样",width:"120"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[4]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[5]))]),e._v("\n  ")])],1)},n=[],o=(a("5df3"),a("1c4c"),a("ac6a"),a("1487")),r=a.n(o),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          highlight-current-row\n          height="300"\n          :data.sync="tableData">\n          <vxe-table-column prop="name" label="Name"></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          height="300"\n          :radio-config="{labelProp: \'name\'}"\n          :data.sync="tableData">\n          <vxe-table-column type="radio" label="这样也行"></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n          }\n        }\n        ",'\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="$refs.xTable.setCurrentRow(tableData[1])">设置第二行选中</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          ref="xTable"\n          border\n          highlight-current-row\n          height="300"\n          :data.sync="tableData">\n          <vxe-table-column type="radio" label="还可以这样" width="120"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name"></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n          }\n        }\n        "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){r.a.highlightBlock(e)})},created:function(){var e=window.MOCK_DATA_LIST.slice(0,6);this.tableData=e}},c=s,b=a("2877"),d=Object(b["a"])(c,l,n,!1,null,null,null);t["default"]=d.exports},"4b04":function(e,t,a){},"4ce9":function(e,t,a){"use strict";a.r(t);var l=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("p",[e._v("行的样色、单元格样式，表头的样式、表尾的样式、全部都可以完全自定义")]),a("vxe-table",{staticClass:"mytable-style",attrs:{border:"","header-cell-class-name":e.headerCellClassName,"row-class-name":e.rowClassName,"cell-class-name":e.cellClassName,data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"60"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n    "),a("code",{staticClass:"scss"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n  ")]),a("p",[e._v("通过 "),a("table-api-link",{attrs:{prop:"cell-click"}}),e._v(" 事件点击改变颜色")],1),a("vxe-table",{staticClass:"mytable-style",attrs:{border:"","cell-class-name":e.cellClassName2,data:e.tableData},on:{"update:data":function(t){e.tableData=t},"cell-click":e.cellClickEvent2}},[a("vxe-table-column",{attrs:{type:"index",width:"60"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[4]))]),e._v("\n    "),a("code",{staticClass:"scss"},[e._v(e._s(e.demoCodes[5]))]),e._v("\n  ")])],1)},n=[],o=(a("6762"),a("2fdb"),a("5df3"),a("1c4c"),a("ac6a"),a("1487")),r=a.n(o),s={data:function(){return{tableData:[],selectRow:null,selectColumn:null,demoCodes:['\n        <vxe-table\n          border\n          class="mytable-style"\n          :header-cell-class-name="headerCellClassName"\n          :row-class-name="rowClassName"\n          :cell-class-name="cellClassName"\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name"></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [],\n              selectRow: null,\n              selectColumn: null\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n          },\n          methods: {\n            headerCellClassName ({ column, columnIndex }) {\n              if (column.property === 'name') {\n                return 'col-blue'\n              }\n            },\n            rowClassName ({ row, rowIndex }) {\n              if ([2, 3, 5].includes(rowIndex)) {\n                return 'row-green'\n              }\n            },\n            cellClassName ({ row, rowIndex, column, columnIndex }) {\n              if (column.property === 'sex') {\n                if (row.sex >= '1') {\n                  return 'col-red'\n                } else if (row.age === 26) {\n                  return 'col-orange'\n                }\n              }\n            }\n          }\n        }\n        ","\n        .mytable-style .vxe-body--row.row-green {\n          background-color: #187;\n          color: #fff;\n        }\n        .mytable-style .vxe-header--column.col-blue {\n          background-color: #2db7f5;\n          color: #fff;\n        }\n        .mytable-style .vxe-body--column.col-red {\n          background-color: red;\n          color: #fff;\n        }\n        .mytable-style .vxe-body--column.col-orange {\n          background-color: #f60;\n          color: #fff;\n        }\n        ",'\n        <vxe-table\n          border\n          class="mytable-style"\n          :cell-class-name="cellClassName2"\n          :data.sync="tableData"\n          @cell-click="cellClickEvent2">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name"></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [],\n              selectRow: null,\n              selectColumn: null\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n          },\n          methods: {\n            cellClassName2 ({ row, column }) {\n              if (row === this.selectRow & column === this.selectColumn) {\n                return 'col-orange'\n              }\n            },\n            cellClickEvent2 ({ row, column }) {\n              this.selectRow = row\n              this.selectColumn = column\n            }\n          }\n        }\n        ","\n        .mytable-style .vxe-body--row.row-green {\n          background-color: #187;\n          color: #fff;\n        }\n        .mytable-style .vxe-header--column.col-blue {\n          background-color: #2db7f5;\n          color: #fff;\n        }\n        .mytable-style .vxe-body--column.col-red {\n          background-color: red;\n          color: #fff;\n        }\n        .mytable-style .vxe-body--column.col-orange {\n          background-color: #f60;\n          color: #fff;\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,6)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){r.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,a=(e.rowIndex,e.column);e.columnIndex;if("sex"===a.property){if(t.sex>="1")return"col-red";if(26===t.age)return"col-orange"}},cellClassName2:function(e){var t=e.row,a=e.column;if(t===this.selectRow&a===this.selectColumn)return"col-orange"},cellClickEvent2:function(e){var t=e.row,a=e.column;this.selectRow=t,this.selectColumn=a}}},c=s,b=(a("300b"),a("2877")),d=Object(b["a"])(c,l,n,!1,null,null,null);t["default"]=d.exports},5029:function(e,t,a){"use strict";a.r(t);var l=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("p",[e._v("通过给需要排序功能的列加上 "),a("table-api-link",{attrs:{prop:"sortable"}}),e._v(" 属性可以支持排序，还可以通过设置 "),a("table-api-link",{attrs:{prop:"sort-by"}}),e._v(" 多字段进行排序")],1),a("p",[e._v("如果是服务端排序，只需加上 "),a("table-column-api-link",{attrs:{prop:"remote-sort"}}),e._v(" 和 "),a("table-api-link",{attrs:{prop:"sort-change"}}),e._v(" 事件就可以实现")],1),a("vxe-table",{attrs:{border:"","highlight-hover-row":"",height:"300",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"60"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name",sortable:""}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"time",label:"Time",sortable:""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),a("p",[e._v("配置 "),a("table-column-api-link",{attrs:{prop:"sort-by"}}),e._v(" 多个字段组合排序")],1),a("vxe-table",{attrs:{border:"","highlight-hover-row":"",height:"300",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"60"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name",sortable:""}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"time",label:"Time",sortable:"","sort-by":["time","name"]}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")])],1)},n=[],o=(a("5df3"),a("1c4c"),a("ac6a"),a("1487")),r=a.n(o),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          highlight-hover-row\n          height="300"\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name" sortable></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n          <vxe-table-column prop="time" label="Time" sortable></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 50)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          highlight-hover-row\n          height="300"\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name" sortable></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n          <vxe-table-column prop="time" label="Time" sortable :sort-by="[\'time\', \'name\']"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 50)\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,50)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){r.a.highlightBlock(e)})}},c=s,b=a("2877"),d=Object(b["a"])(c,l,n,!1,null,null,null);t["default"]=d.exports},"5c3a0":function(e,t,a){"use strict";a.r(t);var l=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("p",[e._v("可以设置大小尺寸："),a("table-api-link",{attrs:{prop:"medium"}}),e._v(" / "),a("table-api-link",{attrs:{prop:"small"}}),e._v(" / "),a("table-api-link",{attrs:{prop:"mini"}})],1),a("p"),a("vxe-table",{attrs:{data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"60"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),a("p",[e._v("设置大小为 "),a("table-api-link",{attrs:{prop:"medium"}})],1),a("vxe-table",{attrs:{size:"medium",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"60"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")]),a("p",[e._v("设置大小为 "),a("table-api-link",{attrs:{prop:"small"}})],1),a("vxe-table",{attrs:{size:"small",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"60"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[4]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[5]))]),e._v("\n  ")]),a("p",[e._v("设置大小为 "),a("table-api-link",{attrs:{prop:"mini"}})],1),a("vxe-table",{attrs:{size:"mini",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"60"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[6]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[7]))]),e._v("\n  ")])],1)},n=[],o=(a("5df3"),a("1c4c"),a("ac6a"),a("1487")),r=a.n(o),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name"></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 4)\n          }\n        }\n        ",'\n        <vxe-table\n          size="medium"\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name"></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 4)\n          }\n        }\n        ",'\n        <vxe-table\n          size="small"\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name"></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 4)\n          }\n        }\n        ",'\n        <vxe-table\n          size="mini"\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name"></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 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){r.a.highlightBlock(e)})}},c=s,b=a("2877"),d=Object(b["a"])(c,l,n,!1,null,null,null);t["default"]=d.exports},"6dcd":function(e,t,a){"use strict";a.r(t);var l=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("p",[e._v("斑马线条纹")]),a("vxe-table",{attrs:{stripe:"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"60"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),a("p",[e._v("使用 "),a("table-api-link",{attrs:{prop:"highlight-hover-row"}}),e._v(" 属性启用 hover 行高亮")],1),a("vxe-table",{attrs:{stripe:"","highlight-hover-row":"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"60"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")])],1)},n=[],o=(a("5df3"),a("1c4c"),a("ac6a"),a("1487")),r=a.n(o),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          stripe\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name"></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n          }\n        }\n        ",'\n        <vxe-table\n          stripe\n          highlight-hover-row\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name"></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 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){r.a.highlightBlock(e)})}},c=s,b=a("2877"),d=Object(b["a"])(c,l,n,!1,null,null,null);t["default"]=d.exports},"8b2b":function(e,t,a){"use strict";a.r(t);var l=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("p",[e._v("通过设置 "),a("table-api-link",{attrs:{prop:"loading"}}),e._v(" 属性可以使用自带的加载效果")],1),a("vxe-table",{attrs:{border:"","highlight-hover-row":"",height:"300",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"60"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name",sortable:""}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),a("p",[e._v("加载中")]),a("vxe-table",{attrs:{border:"","highlight-hover-row":"",height:"300",loading:e.loading,data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"60"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name",sortable:""}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")])],1)},n=[],o=(a("5df3"),a("1c4c"),a("ac6a"),a("1487")),r=a.n(o),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          highlight-hover-row\n          height="300"\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name" sortable></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            setTimeout(() => {\n              this.tableData = window.MOCK_DATA_LIST.slice(0, 50)\n            }, 3000)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          highlight-hover-row\n          height="300"\n          :loading="loading"\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name" sortable></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.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){r.a.highlightBlock(e)})}},c=s,b=a("2877"),d=Object(b["a"])(c,l,n,!1,null,null,null);t["default"]=d.exports},"8bd2":function(e,t,a){"use strict";a.r(t);var l=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("p",[e._v("隐藏头部，通过设置 "),a("table-column-api-link",{attrs:{prop:"show-header"}}),e._v(" 参数")],1),a("vxe-table",{attrs:{"show-header":!1,data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"60"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),a("p",[e._v("当纵向或横向内容过多时，自动出现滚动条")]),a("vxe-table",{attrs:{height:"400","show-header":!1,data:e.tableData2},on:{"update:data":function(t){e.tableData2=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"60"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")])],1)},n=[],o=(a("5df3"),a("1c4c"),a("ac6a"),a("1487")),r=a.n(o),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          :show-header="false"\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name"></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n          }\n        }\n        ",'\n        <vxe-table\n          height="400"\n          :show-header="false"\n          :data.sync="tableData2">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name"></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData2: []\n            }\n          },\n          created () {\n            this.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){r.a.highlightBlock(e)})}},c=s,b=a("2877"),d=Object(b["a"])(c,l,n,!1,null,null,null);t["default"]=d.exports},"8c9e":function(e,t,a){"use strict";a.r(t);var l=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("p",[e._v("当一个表格高度需要自适应的时候可以设置为流体高度")]),a("vxe-table",{attrs:{border:"","highlight-hover-row":"","max-height":"200",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"60"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name",sortable:""}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),a("p",[e._v("如果设置 "),a("table-api-link",{attrs:{prop:"max-height"}}),e._v("，当内容为达到最大高度时会自适应")],1),a("vxe-table",{attrs:{border:"","highlight-hover-row":"","max-height":"200",data:e.tableData2},on:{"update:data":function(t){e.tableData2=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"60"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name",sortable:""}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")])],1)},n=[],o=(a("5df3"),a("1c4c"),a("ac6a"),a("1487")),r=a.n(o),s={data:function(){return{tableData:[],tableData2:[],demoCodes:['\n        <vxe-table\n          border\n          highlight-hover-row\n          max-height="200"\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name" sortable></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 50)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          highlight-hover-row\n          max-height="200"\n          :data.sync="tableData2">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name" sortable></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData2: []\n            }\n          },\n          created () {\n            this.tableData2 = window.MOCK_DATA_LIST.slice(0, 2)\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,50),this.tableData2=window.MOCK_DATA_LIST.slice(0,2)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){r.a.highlightBlock(e)})}},c=s,b=a("2877"),d=Object(b["a"])(c,l,n,!1,null,null,null);t["default"]=d.exports},a5bb:function(e,t,a){"use strict";a.r(t);var l=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("p",[e._v("使用 "),a("table-column-api-link",{attrs:{prop:"formatter"}}),e._v(" 格式化内容（建议是提前转换好数据，"),a("table-column-api-link",{attrs:{prop:"formatter"}}),e._v(" 一般用于动态的数据，跟随数据的变化而执行）")],1),a("vxe-table",{attrs:{border:"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"60"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name",sortable:""}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"time",label:"Time",formatter:e.formatTime}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},n=[],o=(a("5df3"),a("1c4c"),a("ac6a"),a("1487")),r=a.n(o),s=a("c695"),c=a.n(s),b={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name" sortable></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n          <vxe-table-column prop="time" label="Time" :formatter="formatTime"></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n          },\n          methods: {\n            formatTime ({ cellValue, row, column }) {\n              return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:ss:mm')\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){r.a.highlightBlock(e)})},methods:{formatTime:function(e){var t=e.cellValue;e.row,e.column;return c.a.toDateString(t,"yyyy-MM-dd HH:ss:mm")}}},d=b,v=a("2877"),u=Object(v["a"])(d,l,n,!1,null,null,null);t["default"]=u.exports},b369:function(e,t,a){"use strict";a.r(t);var l=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("p",[e._v("列选中高亮，通过设置 "),a("table-api-link",{attrs:{prop:"highlight-current-column"}}),e._v(" 参数")],1),a("vxe-table",{attrs:{border:"","highlight-hover-column":"","highlight-current-column":"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"60"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},n=[],o=(a("5df3"),a("1c4c"),a("ac6a"),a("1487")),r=a.n(o),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          highlight-hover-column\n          highlight-current-column\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name"></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 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){r.a.highlightBlock(e)})}},c=s,b=a("2877"),d=Object(b["a"])(c,l,n,!1,null,null,null);t["default"]=d.exports},b811:function(e,t,a){"use strict";a.r(t);var l=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("p",[e._v("当数据结构比较复杂的时候，可以使用多级表头显示更加直观")]),a("vxe-table",{attrs:{border:"",height:"400",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{label:"基本信息"}},[a("vxe-table-column",{attrs:{type:"index",width:"60"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name"}})],1),a("vxe-table-column",{attrs:{label:"更多信息"}},[a("vxe-table-column",{attrs:{prop:"role",label:"Role"}}),a("vxe-table-column",{attrs:{label:"详细信息"}},[a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}})],1)],1),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),a("p",[e._v("如果使用了分组表头情，则需要按组来设置固定列")]),a("vxe-table",{attrs:{border:"",height:"400",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{label:"基本信息"}},[a("vxe-table-column",{attrs:{type:"index",width:"60",fixed:"left"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name",fixed:"left",width:"100"}})],1),a("vxe-table-column",{attrs:{label:"更多信息"}},[a("vxe-table-column",{attrs:{prop:"role",label:"Role",width:"300"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex",width:"300"}}),a("vxe-table-column",{attrs:{label:"详细信息"}},[a("vxe-table-column",{attrs:{prop:"sex",label:"Sex",width:"300"}}),a("vxe-table-column",{attrs:{prop:"date",label:"Date",width:"300"}})],1)],1),a("vxe-table-column",{attrs:{prop:"address",label:"Address",width:"300",fixed:"right","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")])],1)},n=[],o=(a("5df3"),a("1c4c"),a("ac6a"),a("1487")),r=a.n(o),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          height="400"\n          :data.sync="tableData">\n          <vxe-table-column label="基本信息">\n            <vxe-table-column type="index" width="60"></vxe-table-column>\n            <vxe-table-column prop="name" label="Name"></vxe-table-column>\n          </vxe-table-column>\n          <vxe-table-column label="更多信息">\n            <vxe-table-column prop="role" label="Role"></vxe-table-column>\n            <vxe-table-column label="详细信息">\n              <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n              <vxe-table-column prop="age" label="Age"></vxe-table-column>\n            </vxe-table-column>\n          </vxe-table-column>\n          <vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 50)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          height="400"\n          :data.sync="tableData">\n          <vxe-table-column label="基本信息">\n            <vxe-table-column type="index" width="60" fixed="left"></vxe-table-column>\n            <vxe-table-column prop="name" label="Name" fixed="left" width="100"></vxe-table-column>\n          </vxe-table-column>\n          <vxe-table-column label="更多信息">\n            <vxe-table-column prop="role" label="Role" width="300"></vxe-table-column>\n            <vxe-table-column prop="sex" label="Sex" width="300"></vxe-table-column>\n            <vxe-table-column label="详细信息">\n              <vxe-table-column prop="sex" label="Sex" width="300"></vxe-table-column>\n              <vxe-table-column prop="date" label="Date" width="300"></vxe-table-column>\n            </vxe-table-column>\n          </vxe-table-column>\n          <vxe-table-column prop="address" label="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){r.a.highlightBlock(e)})}},c=s,b=a("2877"),d=Object(b["a"])(c,l,n,!1,null,null,null);t["default"]=d.exports},c7b5:function(e,t,a){"use strict";a.r(t);var l=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("p",[e._v("带边框的表格，通过设置 "),a("table-api-link",{attrs:{prop:"border"}}),e._v(" 参数")],1),a("vxe-table",{attrs:{border:"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"60"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},n=[],o=(a("5df3"),a("1c4c"),a("ac6a"),a("1487")),r=a.n(o),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name"></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 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){r.a.highlightBlock(e)})}},c=s,b=a("2877"),d=Object(b["a"])(c,l,n,!1,null,null,null);t["default"]=d.exports},db47:function(e,t,a){"use strict";a.r(t);var l=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("p",[e._v("当纵向内容过多时，固定表头就非常有用了，通过设置 "),a("table-api-link",{attrs:{prop:"height"}}),e._v(" 参数")],1),a("vxe-table",{attrs:{border:"",height:"400",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"60"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address","show-overflow":""}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},n=[],o=(a("5df3"),a("1c4c"),a("ac6a"),a("1487")),r=a.n(o),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          height="400"\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name"></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 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){r.a.highlightBlock(e)})}},c=s,b=a("2877"),d=Object(b["a"])(c,l,n,!1,null,null,null);t["default"]=d.exports},e7ab:function(e,t,a){"use strict";a.r(t);var l=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("p",[e._v("横纵内容过多时，同时固定列和表头")]),a("vxe-table",{attrs:{border:"",height:"300","highlight-hover-row":"","show-overflow":"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"60",fixed:"left"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name",width:"300"}}),a("vxe-table-column",{attrs:{prop:"role",label:"Role",width:"300"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex",width:"300"}}),a("vxe-table-column",{attrs:{prop:"date",label:"Date",width:"300"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address",fixed:"right",width:"300"}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),a("p",[e._v("固定列建议设置 show-overflow 或 show-overflow 该值，禁用自动换行，大幅提升渲染速度")]),a("vxe-table",{attrs:{border:"",height:"300","highlight-hover-row":"","show-overflow":"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"60",fixed:"left"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name",width:"300"}}),a("vxe-table-column",{attrs:{prop:"role",label:"Role",width:"300"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex",width:"300"}}),a("vxe-table-column",{attrs:{prop:"date",label:"Date",width:"300"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address",fixed:"right",width:"300"}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")])],1)},n=[],o=(a("5df3"),a("1c4c"),a("ac6a"),a("1487")),r=a.n(o),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          height="300"\n          highlight-hover-row\n          show-overflow\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60" fixed="left"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name" width="300"></vxe-table-column>\n          <vxe-table-column prop="role" label="Role" width="300"></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex" width="300"></vxe-table-column>\n          <vxe-table-column prop="date" label="Date" width="300"></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" fixed="right" width="300"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 50)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          height="300"\n          highlight-hover-row\n          show-overflow\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60" fixed="left"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name" width="300"></vxe-table-column>\n          <vxe-table-column prop="role" label="Role" width="300"></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex" width="300"></vxe-table-column>\n          <vxe-table-column prop="date" label="Date" width="300"></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" fixed="right" width="300"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 50)\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,50)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){r.a.highlightBlock(e)})}},c=s,b=a("2877"),d=Object(b["a"])(c,l,n,!1,null,null,null);t["default"]=d.exports},ed84:function(e,t,a){"use strict";a.r(t);var l=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("p",[e._v("固定列，通过设置 "),a("table-column-api-link",{attrs:{prop:"fixed"}}),e._v(" 参数")],1),a("p",[e._v("当横向内容过多时，将列固定在左右两侧")]),a("vxe-table",{attrs:{border:"","show-overflow":"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"60",fixed:"left"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name",width:"300"}}),a("vxe-table-column",{attrs:{prop:"role",label:"Role",width:"300"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex",width:"300"}}),a("vxe-table-column",{attrs:{prop:"date",label:"Date",width:"300"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address",fixed:"right",width:"300"}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),a("p",[e._v("如果列宽足够的情况下，固定列不会浮动")]),a("vxe-table",{attrs:{border:"","show-overflow":"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[a("vxe-table-column",{attrs:{type:"index",width:"60",fixed:"left"}}),a("vxe-table-column",{attrs:{prop:"name",label:"Name"}}),a("vxe-table-column",{attrs:{prop:"role",label:"Role"}}),a("vxe-table-column",{attrs:{prop:"sex",label:"Sex"}}),a("vxe-table-column",{attrs:{prop:"age",label:"Age"}}),a("vxe-table-column",{attrs:{prop:"address",label:"Address",fixed:"right",width:"300"}})],1),a("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),a("pre",[e._v("    "),a("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),a("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")])],1)},n=[],o=(a("5df3"),a("1c4c"),a("ac6a"),a("1487")),r=a.n(o),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          show-overflow\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60" fixed="left"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name" width="300"></vxe-table-column>\n          <vxe-table-column prop="role" label="Role" width="300"></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex" width="300"></vxe-table-column>\n          <vxe-table-column prop="date" label="Date" width="300"></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" fixed="right" width="300"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 4)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          show-overflow\n          :data.sync="tableData">\n          <vxe-table-column type="index" width="60" fixed="left"></vxe-table-column>\n          <vxe-table-column prop="name" label="Name"></vxe-table-column>\n          <vxe-table-column prop="role" label="Role"></vxe-table-column>\n          <vxe-table-column prop="sex" label="Sex"></vxe-table-column>\n          <vxe-table-column prop="age" label="Age"></vxe-table-column>\n          <vxe-table-column prop="address" label="Address" 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){r.a.highlightBlock(e)})}},c=s,b=a("2877"),d=Object(b["a"])(c,l,n,!1,null,null,null);t["default"]=d.exports}}]);