lxm_front/vxe-table
1
0
Fork 0
mirror of https://gitee.com/xuliangzhan_admin/vxe-table.git synced 2026-01-21 05:27:57 +08:00
Code Issues Projects Releases Wiki Activity
Files
66e9cd5ec577b8f8faec0bb8a3480a3e2b37a3fa
vxe-table/docs/static/js/edit.2cefec1d.js
xuliangzhan bee253cb15 update
2019-07-13 22:19:40 +08:00

1 line
80 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
(window["webpackJsonpVXETable"]=window["webpackJsonpVXETable"]||[]).push([["edit"],{"0389":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",[e._v("设置 "),n("table-api-link",{attrs:{prop:"edit-config"}}),e._v("={trigger: 'manual', mode: 'row'} 启用行编辑的功能")],1),n("p",{staticClass:"red"},[e._v("开启编辑功能，必须要有唯一行数据的 key，通过设置 "),n("table-api-link",{attrs:{prop:"row-id"}}),e._v(" 或者 "),n("table-api-link",{attrs:{prop:"row-key"}}),e._v(" 自定义字段名")],1),n("vxe-table",{ref:"xTable",attrs:{border:"",resizable:"","show-overflow":"",height:"500","row-id":"id",data:e.tableData,"edit-config":{trigger:"manual",mode:"row"}},on:{"update:data":function(t){e.tableData=t}}},[n("vxe-table-column",{attrs:{type:"index",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"date",title:"Date","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"address",title:"Address","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{title:"操作"},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[e.$refs.xTable.hasActiveRow(a)?[n("vxe-button",{on:{click:function(t){return e.saveRowEvent(a)}}},[e._v("保存")]),n("vxe-button",{on:{click:function(t){return e.cancelRowEvent(a)}}},[e._v("取消")])]:[n("vxe-button",{on:{click:function(t){return e.editRowEvent(a)}}},[e._v("编辑")])]]}}])})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},l=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],demoCodes:['\n <vxe-table\n ref="xTable"\n border\n resizable\n show-overflow\n height="500"\n row-id="id"\n :data.sync="tableData"\n :edit-config="{trigger: \'manual\', mode: \'row\'}">\n <vxe-table-column type="index" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="sex" title="Sex" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="date" title="Date" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="address" title="Address" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column title="操作">\n <template v-slot="{ row }">\n <template v-if="$refs.xTable.hasActiveRow(row)">\n <vxe-button @click="saveRowEvent(row)">保存</vxe-button>\n <vxe-button @click="cancelRowEvent(row)">取消</vxe-button>\n </template>\n <template v-else>\n <vxe-button @click="editRowEvent(row)">编辑</vxe-button>\n </template>\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, 100)\n },\n methods: {\n editRowEvent (row) {\n this.$refs.xTable.setActiveRow(row)\n },\n saveRowEvent (row) {\n this.$XMsg.alert('success')\n this.cancelRowEvent()\n },\n cancelRowEvent (row) {\n this.$refs.xTable.clearActived()\n }\n }\n }\n "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,100)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})},methods:{editRowEvent:function(e){this.$refs.xTable.setActiveRow(e)},saveRowEvent:function(e){this.$XMsg.alert("success"),this.$refs.xTable.clearActived()},cancelRowEvent:function(e){this.$refs.xTable.clearActived()}}},s=r,d=n("2877"),c=Object(d["a"])(s,a,l,!1,null,null,null);t["default"]=c.exports},1726:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",[e._v("统计编辑列的表尾合计")]),n("p",[e._v("对于某些场景下如果需要频繁计算的可以手动调用 "),n("table-api-link",{attrs:{prop:"updateFooter"}}),e._v(" 函数")],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:e.insertEvent}},[e._v("新增")]),n("vxe-button",{on:{click:e.getInsertEvent}},[e._v("获取新增")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable",staticClass:"editable-footer",attrs:{border:"","show-footer":"","show-overflow":"","highlight-hover-row":"",height:"400","row-id":"id","footer-method":e.footerMethod,"footer-cell-class-name":e.footerCellClassName,data:e.tableData,"edit-config":{trigger:"click",mode:"row"}},on:{"update:data":function(t){e.tableData=t}}},[n("vxe-table-column",{attrs:{type:"index",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"age",title:"Age","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"date",title:"Date","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"address",title:"Address","edit-render":{name:"input"}}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},l=[],o=(n("6762"),n("2fdb"),n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r=n("c695"),s=n.n(r),d={data:function(){return{tableData:[],demoCodes:['\n <vxe-toolbar>\n <template v-slot:buttons>\n <vxe-button @click="insertEvent">新增</vxe-button>\n <vxe-button @click="getInsertEvent">获取新增</vxe-button>\n </template>\n </vxe-toolbar>\n\n <vxe-table\n border\n show-footer\n show-overflow\n highlight-hover-row\n ref="xTable"\n height="400"\n class="editable-footer"\n row-id="id"\n :footer-method="footerMethod"\n :footer-cell-class-name="footerCellClassName"\n :data.sync="tableData"\n :edit-config="{trigger: \'click\', mode: \'row\'}">\n <vxe-table-column type="index" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="age" title="Age" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="date" title="Date" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="address" title="Address" :edit-render="{name: \'input\'}"></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 methods: {\n footerCellClassName ({ $rowIndex, column, columnIndex }) {\n if (columnIndex === 0) {\n if ($rowIndex === 0) {\n return 'col-blue'\n } else {\n return 'col-red'\n }\n }\n },\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 XEUtils.mean(data, column.property)\n }\n return '-'\n }),\n columns.map((column, columnIndex) => {\n if (columnIndex === 0) {\n return '和值'\n }\n if (['age'].includes(column.property)) {\n return XEUtils.sum(data, column.property)\n }\n return '-'\n })\n ]\n },\n insertEvent () {\n let record = {\n name: 'New name'\n }\n this.$refs.xTable.insert(record).then(({ row }) => this.$refs.xTable.setActiveCell(row, 'age'))\n },\n getInsertEvent () {\n let insertRecords = this.$refs.xTable.getInsertRecords()\n this.$XMsg.alert(insertRecords.length)\n }\n }\n }\n "]}},created:function(){var e=window.MOCK_DATA_LIST.slice(0,20);this.tableData=e},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})},methods:{footerCellClassName:function(e){var t=e.$rowIndex,n=(e.column,e.columnIndex);if(0===n)return 0===t?"col-blue":"col-red"},footerMethod:function(e){var t=e.columns,n=e.data;return[t.map(function(e,t){return 0===t?"平均":["age"].includes(e.property)?s.a.mean(n,e.property):"-"}),t.map(function(e,t){return 0===t?"和值":["age"].includes(e.property)?s.a.sum(n,e.property):"-"})]},insertEvent:function(){var e=this,t={name:"New name"};this.$refs.xTable.insert(t).then(function(t){var n=t.row;return e.$refs.xTable.setActiveCell(n,"age")})},getInsertEvent:function(){var e=this.$refs.xTable.getInsertRecords();this.$XMsg.alert(e.length)}}},c=d,u=(n("6da9"),n("2877")),v=Object(u["a"])(c,a,l,!1,null,null,null);t["default"]=v.exports},"1a05":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div")},l=[],o=n("2877"),i={},r=Object(o["a"])(i,a,l,!1,null,null,null);t["default"]=r.exports},"3ab7":function(e,t,n){},"504c":function(e,t,n){var a=n("9e1e"),l=n("0d58"),o=n("6821"),i=n("52a7").f;e.exports=function(e){return function(t){var n,r=o(t),s=l(r),d=s.length,c=0,u=[];while(d>c)n=s[c++],a&&!i.call(r,n)||u.push(e?[n,r[n]]:r[n]);return u}}},5513:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div")},l=[],o=n("2877"),i={},r=Object(o["a"])(i,a,l,!1,null,null,null);t["default"]=r.exports},"59b6":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",[e._v("设置 "),n("table-api-link",{attrs:{prop:"edit-config"}}),e._v("={trigger: 'click', mode: 'cell'} 启用单元格点击编辑的功能")],1),n("p",{staticClass:"red"},[e._v("开启编辑功能，必须要有唯一行数据的 key，通过设置 "),n("table-api-link",{attrs:{prop:"row-id"}}),e._v(" 或者 "),n("table-api-link",{attrs:{prop:"row-key"}}),e._v(" 自定义字段名")],1),n("vxe-table",{attrs:{border:"",resizable:"","show-overflow":"",height:"500","row-id":"id",data:e.tableData,"edit-config":{trigger:"click",mode:"cell"}},on:{"update:data":function(t){e.tableData=t},"edit-actived":e.editActivedEvent,"edit-closed":e.editClosedEvent}},[n("vxe-table-column",{attrs:{type:"index",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"date",title:"Date","edit-render":{name:"input"}}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")]),n("p",[e._v("设置 "),n("table-api-link",{attrs:{prop:"edit-config"}}),e._v("={trigger: 'click', mode: 'row'} 启用行点击编辑的功能")],1),n("p",[e._v("需要注意的 mode=row 时，事件中的 column 相关参数是不确定性的（会保留 column 相关参数，但不一定是准确的）")]),n("vxe-table",{attrs:{border:"",resizable:"","show-overflow":"",height:"500","row-id":"id",data:e.tableData,"edit-config":{trigger:"click",mode:"row"}},on:{"update:data":function(t){e.tableData=t}}},[n("vxe-table-column",{attrs:{type:"index",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"date",title:"Date","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"address",title:"Address","edit-render":{name:"input"}}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n ")])],1)},l=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],demoCodes:['\n <vxe-table\n border\n resizable\n show-overflow\n height="500"\n row-id="id"\n :data.sync="tableData"\n :edit-config="{trigger: \'click\', mode: \'cell\'}"\n @edit-actived="editActivedEvent"\n @edit-closed="editClosedEvent">\n <vxe-table-column type="index" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="sex" title="Sex" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="date" title="Date" :edit-render="{name: \'input\'}"></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 editActivedEvent ({ row, column }, event) {\n console.log(`打开 ${column.title} 列编辑`)\n },\n editClosedEvent ({ row, column }, event) {\n console.log(`关闭 ${column.title} 列编辑`)\n }\n }\n }\n ",'\n <vxe-table\n border\n resizable\n show-overflow\n height="500"\n row-id="id"\n :data.sync="tableData"\n :edit-config="{trigger: \'click\', mode: \'row\'}">\n <vxe-table-column type="index" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="sex" title="Sex" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="date" title="Date" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="address" title="Address" :edit-render="{name: \'input\'}"></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, 100)\n }\n }\n "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,100)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})},methods:{editActivedEvent:function(e,t){e.row;var n=e.column;console.log("打开 ".concat(n.title," 列编辑"))},editClosedEvent:function(e,t){e.row;var n=e.column;console.log("关闭 ".concat(n.title," 列编辑"))}}},s=r,d=n("2877"),c=Object(d["a"])(s,a,l,!1,null,null,null);t["default"]=c.exports},"62f0":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",[e._v("设置 "),n("table-api-link",{attrs:{prop:"edit-config"}}),e._v("={trigger: 'manual', mode: 'row', autoClear: false}，还可以通过设置 "),n("table-api-link",{attrs:{prop:"autoClear"}}),e._v(" 关闭默认的单元格清除激活行为")],1),n("vxe-table",{ref:"xTable",attrs:{border:"","show-overflow":"","row-id":"id",data:e.tableData,"edit-config":{trigger:"manual",mode:"row",autoClear:!1}},on:{"update:data":function(t){e.tableData=t}}},[n("vxe-table-column",{attrs:{type:"index",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"date",title:"Date","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"address",title:"Address","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{title:"操作"},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[e.$refs.xTable.hasActiveRow(a)?[n("vxe-button",{on:{click:function(t){return e.saveRowEvent(a)}}},[e._v("保存")]),n("vxe-button",{on:{click:function(t){return e.cancelRowEvent(a)}}},[e._v("取消")])]:[n("vxe-button",{on:{click:function(t){return e.editRowEvent(a)}}},[e._v("编辑")])]]}}])})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},l=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],demoCodes:['\n <vxe-table\n ref="xTable"\n border\n show-overflow\n row-id="id"\n :data.sync="tableData"\n :edit-config="{trigger: \'manual\', mode: \'row\', autoClear: false}">\n <vxe-table-column type="index" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="sex" title="Sex" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="date" title="Date" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="address" title="Address" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column title="操作">\n <template v-slot="{ row }">\n <template v-if="$refs.xTable.hasActiveRow(row)">\n <vxe-button @click="saveRowEvent(row)">保存</vxe-button>\n <vxe-button @click="cancelRowEvent(row)">取消</vxe-button>\n </template>\n <template v-else>\n <vxe-button @click="editRowEvent(row)">编辑</vxe-button>\n </template>\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, 6)\n },\n methods: {\n editRowEvent (row) {\n this.$refs.xTable.setActiveRow(row)\n },\n saveRowEvent (row) {\n this.$XMsg.alert('success')\n this.cancelRowEvent()\n },\n cancelRowEvent (row) {\n this.$refs.xTable.clearActived()\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:{editRowEvent:function(e){this.$refs.xTable.setActiveRow(e)},saveRowEvent:function(e){this.$XMsg.alert("success"),this.$refs.xTable.clearActived()},cancelRowEvent:function(e){this.$refs.xTable.clearActived()}}},s=r,d=n("2877"),c=Object(d["a"])(s,a,l,!1,null,null,null);t["default"]=c.exports},"68ae":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",[e._v("调用 "),n("table-api-link",{attrs:{prop:"remove"}}),e._v(" 删除指定行数据")],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.$refs.xTable.remove(e.tableData[1])}}},[e._v("删除第2行")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTable.removeSelecteds()}}},[e._v("删除选中")]),n("vxe-button",{on:{click:e.getRemoveEvent}},[e._v("获取删除")]),n("vxe-button",{on:{click:e.getSelectionEvent}},[e._v("获取选中")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable",attrs:{border:"","show-overflow":"","row-id":"id",data:e.tableData,"edit-config":{trigger:"click",mode:"cell"}},on:{"update:data":function(t){e.tableData=t}}},[n("vxe-table-column",{attrs:{type:"selection",width:"60"}}),n("vxe-table-column",{attrs:{type:"index",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"age",title:"Age","edit-render":{name:"input"}}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},l=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],demoCodes:['\n <vxe-toolbar>\n <template v-slot:buttons>\n <vxe-button @click="$refs.xTable.remove(tableData[1])">删除第2行</vxe-button>\n <vxe-button @click="$refs.xTable.removeSelecteds()">删除选中</vxe-button>\n <vxe-button @click="getRemoveEvent">获取删除</vxe-button>\n <vxe-button @click="getSelectionEvent">获取选中</vxe-button>\n </template>\n </vxe-toolbar>\n\n <vxe-table\n ref="xTable"\n border\n show-overflow\n row-id="id"\n :data.sync="tableData"\n :edit-config="{trigger: \'click\', mode: \'cell\'}">\n <vxe-table-column type="selection" width="60"></vxe-table-column>\n <vxe-table-column type="index" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="sex" title="Sex" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="age" title="Age" :edit-render="{name: \'input\'}"></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 getRemoveEvent () {\n let removeRecords = this.$refs.xTable.getRemoveRecords()\n this.$XMsg.alert(removeRecords.length)\n },\n getSelectionEvent () {\n let removeRecords = this.$refs.xTable.getSelectRecords()\n this.$XMsg.alert(removeRecords.length)\n }\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)})},methods:{getRemoveEvent:function(){var e=this.$refs.xTable.getRemoveRecords();this.$XMsg.alert(e.length)},getSelectionEvent:function(){var e=this.$refs.xTable.getSelectRecords();this.$XMsg.alert(e.length)}}},s=r,d=n("2877"),c=Object(d["a"])(s,a,l,!1,null,null,null);t["default"]=c.exports},"6da9":function(e,t,n){"use strict";var a=n("3ab7"),l=n.n(a);l.a},7356:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",[e._v("通过调用 "),n("table-api-link",{attrs:{prop:"validate"}}),e._v(" 函数校验数据，"),n("table-api-link",{attrs:{prop:"edit-rules"}}),e._v(" 校验规则配置")],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:e.insertEvent}},[e._v("新增")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTable.removeSelecteds()}}},[e._v("删除选中")]),n("vxe-button",{on:{click:e.validEvent}},[e._v("校验")]),n("vxe-button",{on:{click:e.fullValidEvent}},[e._v("完整校验")]),n("vxe-button",{on:{click:e.selectValidEvent}},[e._v("选中校验")]),n("vxe-button",{on:{click:e.getInsertEvent}},[e._v("获取新增")]),n("vxe-button",{on:{click:e.getRemoveEvent}},[e._v("获取删除")]),n("vxe-button",{on:{click:e.getUpdateEvent}},[e._v("获取修改")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable",attrs:{border:"","show-overflow":"","highlight-cell":"",height:"500","row-id":"id",data:e.tableData,"edit-rules":e.validRules,"mouse-config":{selected:!0},"keyboard-config":{isArrow:!0,isTab:!0},"edit-config":{trigger:"click",mode:"cell",showStatus:!0}},on:{"update:data":function(t){e.tableData=t}}},[n("vxe-table-column",{attrs:{type:"selection",width:"60"}}),n("vxe-table-column",{attrs:{type:"index",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"date",title:"Date","edit-render":{name:"input"}}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},l=[],o=(n("8615"),n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],validRules:{name:[{required:!0,message:"名称必须填写"},{min:3,max:50,message:"名称长度在 3 到 50 个字符"}],sex:[{required:!0,message:"性别必须填写"}]},demoCodes:['\n <vxe-toolbar>\n <template v-slot:buttons>\n <vxe-button @click="insertEvent">新增</vxe-button>\n <vxe-button @click="validEvent">校验</vxe-button>\n <vxe-button @click="fullValidEvent">完整校验</vxe-button>\n <vxe-button @click="selectValidEvent">选中校验</vxe-button>\n <vxe-button @click="getInsertEvent">获取新增</vxe-button>\n <vxe-button @click="getRemoveEvent">获取删除</vxe-button>\n <vxe-button @click="getUpdateEvent">获取修改</vxe-button>\n </template>\n </vxe-toolbar>\n\n <vxe-table\n border\n show-overflow\n highlight-cell\n height="500"\n ref="xTable"\n row-id="id"\n :data.sync="tableData"\n :edit-rules="validRules"\n :mouse-config="{selected: true}"\n :keyboard-config="{isArrow: true, isTab: true}"\n :edit-config="{trigger: \'click\', mode: \'cell\', showStatus: true}">\n <vxe-table-column type="selection" width="60"></vxe-table-column>\n <vxe-table-column type="index" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="sex" title="Sex" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="date" title="Date" :edit-render="{name: \'input\'}"></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n tableData: [],\n validRules: {\n name: [\n { required: true, message: '名称必须填写' },\n { min: 3, max: 50, message: '名称长度在 3 到 50 个字符' }\n ],\n sex: [\n { required: true, message: '性别必须填写' }\n ]\n }\n }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 100)\n },\n methods: {\n validEvent () {\n this.$refs.xTable.validate(valid => {\n if (valid) {\n this.$XMsg.message({ status: 'success', message: '校验成功！' })\n } else {\n this.$XMsg.message({ status: 'error', message: '校验不通过！' })\n }\n })\n },\n fullValidEvent () {\n this.$refs.xTable.fullValidate((valid, errMap) => {\n if (valid) {\n this.$XMsg.message({ status: 'success', message: '校验成功！' })\n } else {\n let msgList = []\n Object.values(errMap).forEach(errList => {\n errList.forEach(params => {\n let { rowIndex, column, rules } = params\n rules.forEach(rule => {\n msgList.push(`第 ${rowIndex} 行 ${column.title} 校验错误：${rule.message}`)\n })\n })\n })\n this.$XMsg.message({\n status: 'error',\n message: () => {\n return [\n <div class=\"red\" style=\"max-height: 400px;overflow: auto;\">\n {\n msgList.map(msg => {\n return <div>{ msg }</div>\n })\n }\n </div>\n ]\n }\n })\n }\n })\n },\n selectValidEvent () {\n let selectRecords = this.$refs.xTable.getSelectRecords()\n if (selectRecords.length > 0) {\n this.$refs.xTable.validate(selectRecords, valid => {\n if (valid) {\n this.$XMsg.message({ status: 'success', message: '校验成功！' })\n } else {\n this.$XMsg.message({ status: 'error', message: '校验不通过！' })\n }\n })\n } else {\n this.$XMsg.message({ status: 'warning', message: '未选中数据！' })\n }\n },\n insertEvent () {\n this.$refs.xTable.insert().then(({ row }) => {\n // 插入一条数据并触发校验\n this.$refs.xTable.validate(row, valid => {\n if (valid) {\n\n }\n })\n })\n },\n getInsertEvent () {\n let insertRecords = this.$refs.xTable.getInsertRecords()\n this.$XMsg.alert(insertRecords.length)\n },\n getRemoveEvent () {\n let removeRecords = this.$refs.xTable.getRemoveRecords()\n this.$XMsg.alert(removeRecords.length)\n },\n getUpdateEvent () {\n let updateRecords = this.$refs.xTable.getUpdateRecords()\n this.$XMsg.alert(updateRecords.length)\n }\n }\n }\n "]}},created:function(){var e=window.MOCK_DATA_LIST.slice(0,100);this.tableData=e},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})},methods:{validEvent:function(){var e=this;this.$refs.xTable.validate(function(t){t?e.$XMsg.message({status:"success",message:"校验成功！"}):e.$XMsg.message({status:"error",message:"校验不通过！"})})},fullValidEvent:function(){var e=this,t=this.$createElement;this.$refs.xTable.fullValidate(function(n,a){if(n)e.$XMsg.message({status:"success",message:"校验成功！"});else{var l=[];Object.values(a).forEach(function(e){e.forEach(function(e){var t=e.rowIndex,n=e.column,a=e.rules;a.forEach(function(e){l.push("第 ".concat(t," 行 ").concat(n.title," 校验错误：").concat(e.message))})})}),e.$XMsg.message({status:"error",message:function(){return[t("div",{class:"red",style:"max-height: 400px;overflow: auto;"},[l.map(function(e){return t("div",[e])})])]}})}})},selectValidEvent:function(){var e=this,t=this.$refs.xTable.getSelectRecords();t.length>0?this.$refs.xTable.validate(t,function(t){t?e.$XMsg.message({status:"success",message:"校验成功！"}):e.$XMsg.message({status:"error",message:"校验不通过！"})}):this.$XMsg.message({status:"warning",message:"未选中数据！"})},insertEvent:function(){var e=this;this.$refs.xTable.insert().then(function(t){var n=t.row;e.$refs.xTable.validate(n,function(e){})})},getInsertEvent:function(){var e=this.$refs.xTable.getInsertRecords();this.$XMsg.alert(e.length)},getRemoveEvent:function(){var e=this.$refs.xTable.getRemoveRecords();this.$XMsg.alert(e.length)},getUpdateEvent:function(){var e=this.$refs.xTable.getUpdateRecords();this.$XMsg.alert(e.length)}}},s=r,d=n("2877"),c=Object(d["a"])(s,a,l,!1,null,null,null);t["default"]=c.exports},8615:function(e,t,n){var a=n("5ca1"),l=n("504c")(!1);a(a.S,"Object",{values:function(e){return l(e)}})},9335:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",[e._v("调用 "),n("table-api-link",{attrs:{prop:"insert"}}),e._v("、"),n("table-api-link",{attrs:{prop:"insertAt"}}),e._v(" 函数插入数据")],1),n("p",{staticClass:"red"},[e._v("开启编辑功能，必须要有唯一行数据的 key，通过设置 "),n("table-api-link",{attrs:{prop:"row-id"}}),e._v(" 或者 "),n("table-api-link",{attrs:{prop:"row-key"}}),e._v(" 自定义字段名")],1),n("p",{staticClass:"red"},[e._v("注意：如果行 key 不存在则会在在插入后自动生成随机数")]),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:function(t){e.$refs.xTable.insert({name:Date.now()})}}},[e._v("在第1行插入")]),n("vxe-button",{on:{click:e.insertEvent}},[e._v("在第3行插入并激活 Sex 单元格")]),n("vxe-button",{on:{click:function(t){e.$refs.xTable.insertAt({name:Date.now()},-1)}}},[e._v("在最后行插入")]),n("vxe-button",{on:{click:e.getInsertEvent}},[e._v("获取新增")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable",attrs:{border:"","show-overflow":"",height:"400","row-id":"id",data:e.tableData,"edit-config":{trigger:"click",mode:"cell"}},on:{"update:data":function(t){e.tableData=t}}},[n("vxe-table-column",{attrs:{type:"index",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"age",title:"Age","edit-render":{name:"input"}}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},l=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],demoCodes:['\n <vxe-toolbar>\n <template v-slot:buttons>\n <vxe-button @click="$refs.xTable.insert({name: Date.now()})">在第1行插入</vxe-button>\n <vxe-button @click="insertEvent">在第3行插入并激活 Sex 单元格</vxe-button>\n <vxe-button @click="$refs.xTable.insertAt({name: Date.now()}, -1)">在最后行插入</vxe-button>\n <vxe-button @click="getInsertEvent">获取新增</vxe-button>\n </template>\n </vxe-toolbar>\n \n <vxe-table\n border\n show-overflow\n ref="xTable"\n height="400"\n row-id="id"\n :data.sync="tableData"\n :edit-config="{trigger: \'click\', mode: \'cell\'}">\n <vxe-table-column type="index" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="sex" title="Sex" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="age" title="Age" :edit-render="{name: \'input\'}"></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 insertEvent () {\n let record = {\n name: Date.now()\n }\n this.$refs.xTable.insertAt(record, this.tableData[2])\n .then(({ row }) => this.$refs.xTable.setActiveCell(row, 'sex'))\n },\n getInsertEvent () {\n let insertRecords = this.$refs.xTable.getInsertRecords()\n this.$XMsg.alert(insertRecords.length)\n }\n }\n }\n "]}},created:function(){var e=window.MOCK_DATA_LIST.slice(0,50);this.tableData=e},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})},methods:{insertEvent:function(){var e=this,t={name:Date.now()};this.$refs.xTable.insertAt(t,this.tableData[2]).then(function(t){var n=t.row;return e.$refs.xTable.setActiveCell(n,"sex")})},getInsertEvent:function(){var e=this.$refs.xTable.getInsertRecords();this.$XMsg.alert(e.length)}}},s=r,d=n("2877"),c=Object(d["a"])(s,a,l,!1,null,null,null);t["default"]=c.exports},"946e":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",[e._v("通过调用 "),n("table-api-link",{attrs:{prop:"validate"}}),e._v(" 函数校验数据，"),n("table-api-link",{attrs:{prop:"edit-rules"}}),e._v(" 校验规则配置")],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:e.insertEvent}},[e._v("新增")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTable.removeSelecteds()}}},[e._v("删除选中")]),n("vxe-button",{on:{click:e.validEvent}},[e._v("校验")]),n("vxe-button",{on:{click:e.fullValidEvent}},[e._v("完整校验")]),n("vxe-button",{on:{click:e.selectValidEvent}},[e._v("选中校验")]),n("vxe-button",{on:{click:e.getInsertEvent}},[e._v("获取新增")]),n("vxe-button",{on:{click:e.getRemoveEvent}},[e._v("获取删除")]),n("vxe-button",{on:{click:e.getUpdateEvent}},[e._v("获取修改")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable",attrs:{border:"","show-overflow":"","row-id":"id",data:e.tableData,"edit-rules":e.validRules,"edit-config":{trigger:"click",mode:"row",showStatus:!0}},on:{"update:data":function(t){e.tableData=t}}},[n("vxe-table-column",{attrs:{type:"selection",width:"60"}}),n("vxe-table-column",{attrs:{type:"index",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"date",title:"Date","edit-render":{name:"input"}}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},l=[],o=(n("8615"),n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],validRules:{name:[{required:!0,message:"名称必须填写"},{min:3,max:50,message:"名称长度在 3 到 50 个字符"}],sex:[{required:!0,message:"性别必须填写"}]},demoCodes:['\n <vxe-toolbar>\n <template v-slot:buttons>\n <vxe-button @click="insertEvent">新增</vxe-button>\n <vxe-button @click="validEvent">校验</vxe-button>\n <vxe-button @click="fullValidEvent">完整校验</vxe-button>\n <vxe-button @click="selectValidEvent">选中校验</vxe-button>\n <vxe-button @click="getInsertEvent">获取新增</vxe-button>\n <vxe-button @click="getRemoveEvent">获取删除</vxe-button>\n <vxe-button @click="getUpdateEvent">获取修改</vxe-button>\n </template>\n </vxe-toolbar>\n\n <vxe-table\n ref="xTable"\n border\n show-overflow\n row-id="id"\n :data.sync="tableData"\n :edit-rules="validRules"\n :edit-config="{trigger: \'click\', mode: \'row\', showStatus: true}">\n <vxe-table-column type="selection" width="60"></vxe-table-column>\n <vxe-table-column type="index" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="sex" title="Sex" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="date" title="Date" :edit-render="{name: \'input\'}"></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n tableData: [],\n validRules: {\n name: [\n { required: true, message: '名称必须填写' },\n { min: 3, max: 50, message: '名称长度在 3 到 50 个字符' }\n ],\n sex: [\n { required: true, message: '性别必须填写' }\n ]\n }\n }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n },\n methods: {\n validEvent () {\n this.$refs.xTable.validate(valid => {\n if (valid) {\n this.$XMsg.message({ status: 'success', message: '校验成功！' })\n } else {\n this.$XMsg.message({ status: 'error', message: '校验不通过！' })\n }\n })\n },\n fullValidEvent () {\n this.$refs.xTable.fullValidate((valid, errMap) => {\n if (valid) {\n this.$XMsg.message({ status: 'success', message: '校验成功！' })\n } else {\n let msgList = []\n Object.values(errMap).forEach(errList => {\n errList.forEach(params => {\n let { rowIndex, column, rules } = params\n rules.forEach(rule => {\n msgList.push(`第 ${rowIndex} 行 ${column.title} 校验错误：${rule.message}`)\n })\n })\n })\n this.$XMsg.message({\n status: 'error',\n message: () => {\n return [\n <div class=\"red\" style=\"max-height: 400px;overflow: auto;\">\n {\n msgList.map(msg => {\n return <div>{ msg }</div>\n })\n }\n </div>\n ]\n }\n })\n }\n })\n },\n selectValidEvent () {\n let selectRecords = this.$refs.xTable.getSelectRecords()\n if (selectRecords.length > 0) {\n this.$refs.xTable.validate(selectRecords, valid => {\n if (valid) {\n this.$XMsg.message({ status: 'success', message: '校验成功！' })\n } else {\n this.$XMsg.message({ status: 'error', message: '校验不通过！' })\n }\n })\n } else {\n this.$XMsg.message({ status: 'warning', message: '未选中数据！' })\n }\n },\n insertEvent () {\n this.$refs.xTable.insert().then(({ row }) => {\n // 插入一条数据并触发校验\n this.$refs.xTable.validate(row, valid => {\n if (valid) {\n\n }\n })\n })\n },\n getInsertEvent () {\n let insertRecords = this.$refs.xTable.getInsertRecords()\n this.$XMsg.alert(insertRecords.length)\n },\n getRemoveEvent () {\n let removeRecords = this.$refs.xTable.getRemoveRecords()\n this.$XMsg.alert(removeRecords.length)\n },\n getUpdateEvent () {\n let updateRecords = this.$refs.xTable.getUpdateRecords()\n this.$XMsg.alert(updateRecords.length)\n }\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)})},methods:{validEvent:function(){var e=this;this.$refs.xTable.validate(function(t){t?e.$XMsg.message({status:"success",message:"校验成功！"}):e.$XMsg.message({status:"error",message:"校验不通过！"})})},fullValidEvent:function(){var e=this,t=this.$createElement;this.$refs.xTable.fullValidate(function(n,a){if(n)e.$XMsg.message({status:"success",message:"校验成功！"});else{var l=[];Object.values(a).forEach(function(e){e.forEach(function(e){var t=e.rowIndex,n=e.column,a=e.rules;a.forEach(function(e){l.push("第 ".concat(t," 行 ").concat(n.title," 校验错误：").concat(e.message))})})}),e.$XMsg.message({status:"error",message:function(){return[t("div",{class:"red",style:"max-height: 400px;overflow: auto;"},[l.map(function(e){return t("div",[e])})])]}})}})},selectValidEvent:function(){var e=this,t=this.$refs.xTable.getSelectRecords();t.length>0?this.$refs.xTable.validate(t,function(t){t?e.$XMsg.message({status:"success",message:"校验成功！"}):e.$XMsg.message({status:"error",message:"校验不通过！"})}):this.$XMsg.message({status:"warning",message:"未选中数据！"})},insertEvent:function(){var e=this;this.$refs.xTable.insert().then(function(t){var n=t.row;e.$refs.xTable.validate(n,function(e){})})},getInsertEvent:function(){var e=this.$refs.xTable.getInsertRecords();this.$XMsg.alert(e.length)},getRemoveEvent:function(){var e=this.$refs.xTable.getRemoveRecords();this.$XMsg.alert(e.length)},getUpdateEvent:function(){var e=this.$refs.xTable.getUpdateRecords();this.$XMsg.alert(e.length)}}},s=r,d=n("2877"),c=Object(d["a"])(s,a,l,!1,null,null,null);t["default"]=c.exports},a5f4:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",[e._v("设置 "),n("table-api-link",{attrs:{prop:"edit-config"}}),e._v(" 的 "),n("table-api-link",{attrs:{prop:"activeMethod"}}),e._v(" 方法判断单元格是否禁用")],1),n("vxe-table",{ref:"xTable",attrs:{border:"","show-overflow":"","row-id":"id",data:e.tableData,"edit-config":{trigger:"click",mode:"cell",activeMethod:e.activeCellMethod}},on:{"update:data":function(t){e.tableData=t},"edit-disabled":e.editDisabledEvent}},[n("vxe-table-column",{attrs:{type:"index",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"date",title:"Date","edit-render":{name:"input"}}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")]),n("P",[e._v("禁用第二行编辑")]),n("vxe-table",{ref:"xTable",attrs:{border:"","show-overflow":"","row-id":"id",data:e.tableData,"edit-config":{trigger:"click",mode:"cell",activeMethod:e.activeRowMethod}},on:{"update:data":function(t){e.tableData=t},"edit-disabled":e.editDisabledEvent}},[n("vxe-table-column",{attrs:{type:"index",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"date",title:"Date","edit-render":{name:"input"}}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n ")])],1)},l=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],demoCodes:['\n <vxe-table\n ref="xTable"\n border\n show-overflow\n row-id="id"\n :data.sync="tableData"\n :edit-config="{trigger: \'click\', mode: \'cell\', activeMethod: activeCellMethod}"\n @edit-disabled="editDisabledEvent">\n <vxe-table-column type="index" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="sex" title="Sex" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="date" title="Date" :edit-render="{name: \'input\'}"></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 activeCellMethod ({ column, columnIndex }) {\n return columnIndex !== 1\n },\n activeRowMethod ({ row, rowIndex }) {\n return rowIndex !== 1\n },\n editDisabledEvent ({ row, column }) {\n alert('禁止编辑')\n }\n }\n }\n ",'\n <vxe-table\n ref="xTable"\n border\n show-overflow\n row-id="id"\n :data.sync="tableData"\n :edit-config="{trigger: \'click\', mode: \'row\', , activeMethod: activeRowMethod}"\n @edit-disabled="editDisabledEvent">\n <vxe-table-column type="index" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="sex" title="Sex" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="date" title="Date" :edit-render="{name: \'input\'}"></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 activeCellMethod ({ column, columnIndex }) {\n return columnIndex !== 1\n },\n activeRowMethod ({ row, rowIndex }) {\n return rowIndex !== 1\n },\n editDisabledEvent ({ row, column }) {\n this.$XMsg.alert('禁止编辑')\n }\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)})},methods:{activeCellMethod:function(e){e.column;var t=e.columnIndex;return 1!==t},activeRowMethod:function(e){e.row;var t=e.rowIndex;return 1!==t},editDisabledEvent:function(e){e.row,e.column;this.$XMsg.alert("禁止编辑")}}},s=r,d=n("2877"),c=Object(d["a"])(s,a,l,!1,null,null,null);t["default"]=c.exports},b08c:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",[e._v("调用 "),n("table-api-link",{attrs:{prop:"revert"}}),e._v(" 还原数据")],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.$refs.xTable.revert()}}},[e._v("还原全部")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTable.removeSelecteds()}}},[e._v("删除选中")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable",attrs:{border:"","show-overflow":"","row-id":"id",data:e.tableData,"edit-config":{trigger:"click",mode:"cell",showStatus:!0}},on:{"update:data":function(t){e.tableData=t}}},[n("vxe-table-column",{attrs:{type:"selection",width:"60"}}),n("vxe-table-column",{attrs:{type:"index",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"age",title:"Age","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{title:"操作"},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[n("vxe-button",{on:{click:function(t){return e.$refs.xTable.revert(a)}}},[e._v("还原")])]}}])})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},l=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],demoCodes:['\n <vxe-toolbar>\n <template v-slot:buttons>\n <vxe-button @click="$refs.xTable.revert()">还原全部</vxe-button>\n <vxe-button @click="$refs.xTable.removeSelecteds()">删除选中</vxe-button>\n </template>\n </vxe-toolbar>\n\n <vxe-table\n ref="xTable"\n border\n show-overflow\n row-id="id"\n :data.sync="tableData"\n :edit-config="{trigger: \'click\', mode: \'cell\', showStatus: true}">\n <vxe-table-column type="selection" width="60"></vxe-table-column>\n <vxe-table-column type="index" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="sex" title="Sex" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="age" title="Age" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column title="操作">\n <template v-slot="{ row }">\n <vxe-button @click="$refs.xTable.revert(row)">还原</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, 6)\n }\n }\n "]}},created:function(){var e=window.MOCK_DATA_LIST.slice(0,6);this.tableData=e},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})}},s=r,d=n("2877"),c=Object(d["a"])(s,a,l,!1,null,null,null);t["default"]=c.exports},b254:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div")},l=[],o=n("2877"),i={},r=Object(o["a"])(i,a,l,!1,null,null,null);t["default"]=r.exports},b453:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",[e._v("设置 "),n("table-api-link",{attrs:{prop:"edit-config"}}),e._v(" 的 "),n("table-api-link",{attrs:{prop:"activeMethod"}}),e._v(" 方法判断单元格是否禁用")],1),n("vxe-table",{ref:"xTable",attrs:{border:"","show-overflow":"","row-id":"id",data:e.tableData,"edit-config":{trigger:"click",mode:"row",activeMethod:e.activeRowMethod}},on:{"update:data":function(t){e.tableData=t},"edit-disabled":e.editDisabledEvent}},[n("vxe-table-column",{attrs:{type:"index",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"date",title:"Date","edit-render":{name:"input"}}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")]),n("P",[e._v("配合自定义渲染，第三行name禁止编辑禁 age 小于 26")]),n("vxe-table",{ref:"xTable",attrs:{border:"","show-overflow":"","row-id":"id",data:e.tableData,"edit-config":{trigger:"click",mode:"row"}},on:{"update:data":function(t){e.tableData=t}}},[n("vxe-table-column",{attrs:{type:"index",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name","edit-render":{type:"default"}},scopedSlots:e._u([{key:"edit",fn:function(t){var a=t.row;return[n("input",{directives:[{name:"model",rawName:"v-model",value:a.name,expression:"row.name"}],attrs:{type:"text"},domProps:{value:a.name},on:{input:function(t){t.target.composing||e.$set(a,"name",t.target.value)}}})]}}])}),n("vxe-table-column",{attrs:{field:"age",title:"Age","edit-render":{type:"default"}},scopedSlots:e._u([{key:"edit",fn:function(t){return[n("input",{directives:[{name:"model",rawName:"v-model",value:t.row.name,expression:"scope.row.name"}],attrs:{type:"text",disabled:e.disableMethod(t)},domProps:{value:t.row.name},on:{input:function(n){n.target.composing||e.$set(t.row,"name",n.target.value)}}})]}}])}),n("vxe-table-column",{attrs:{field:"date",title:"Date","edit-render":{type:"default"}},scopedSlots:e._u([{key:"edit",fn:function(t){var a=t.row;return[n("input",{directives:[{name:"model",rawName:"v-model",value:a.name,expression:"row.name"}],attrs:{type:"date"},domProps:{value:a.name},on:{input:function(t){t.target.composing||e.$set(a,"name",t.target.value)}}})]}}])})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n ")])],1)},l=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],demoCodes:['\n <vxe-table\n ref="xTable"\n border\n show-overflow\n row-id="id"\n :data.sync="tableData"\n :edit-config="{trigger: \'click\', mode: \'row\', activeMethod: activeRowMethod}"\n @edit-disabled="editDisabledEvent">\n <vxe-table-column type="index" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="sex" title="Sex" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="date" title="Date" :edit-render="{name: \'input\'}"></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 activeRowMethod ({ row, rowIndex }) {\n return rowIndex !== 1\n },\n editDisabledEvent ({ row, column }) {\n this.$XMsg.alert('禁止编辑')\n }\n }\n }\n ",'\n <vxe-table\n ref="xTable"\n border\n show-overflow\n row-id="id"\n :data.sync="tableData"\n :edit-config="{trigger: \'click\', mode: \'row\'}">\n <vxe-table-column type="index" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name" :edit-render="{type: \'default\'}">\n <template v-slot:edit="{ row }">\n <input type="text" v-model="row.name">\n </template>\n </vxe-table-column>\n <vxe-table-column field="sex" title="Sex" :edit-render="{type: \'default\'}">\n <template v-slot:edit="{ row }">\n <input type="sex" v-model="row.name" :disabled="row.disabled">\n </template>\n </vxe-table-column>\n <vxe-table-column field="date" title="Date" :edit-render="{type: \'default\'}">\n <template v-slot:edit="{ row }">\n <input type="date" v-model="row.name">\n </template>\n </vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n tableData: []\n }\n },\n created () {\n let list = window.MOCK_DATA_LIST.slice(0, 6)\n this.tableData = list.map((item, index) => {\n return Object.assign({\n disabled: index === 2\n }, item)\n })\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)})},methods:{activeRowMethod:function(e){e.row;var t=e.rowIndex;return 1!==t},disableMethod:function(e){var t=e.row,n=e.column;return"age"===n.property&&t.age<26},editDisabledEvent:function(e){e.row,e.column;this.$XMsg.alert("禁止编辑")}}},s=r,d=n("2877"),c=Object(d["a"])(s,a,l,!1,null,null,null);t["default"]=c.exports},b9bd:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",[e._v("设置 "),n("table-api-link",{attrs:{prop:"edit-config"}}),e._v("={trigger: 'click', mode: 'cell', showStatus: true} 开启编辑状态显示功能")],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:e.getInsertEvent}},[e._v("获取新增")]),n("vxe-button",{on:{click:e.getRemoveEvent}},[e._v("获取删除")]),n("vxe-button",{on:{click:e.getUpdateEvent}},[e._v("获取修改")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable",attrs:{border:"","show-overflow":"","row-id":"id",data:e.tableData,"edit-config":{trigger:"click",mode:"cell",showStatus:!0}},on:{"update:data":function(t){e.tableData=t}}},[n("vxe-table-column",{attrs:{type:"index",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"date",title:"Date","edit-render":{name:"input"}}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},l=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],demoCodes:['\n <vxe-toolbar>\n <template v-slot:buttons>\n <vxe-button @click="getInsertEvent">获取新增</vxe-button>\n <vxe-button @click="getRemoveEvent">获取删除</vxe-button>\n <vxe-button @click="getUpdateEvent">获取修改</vxe-button>\n </template>\n </vxe-toolbar>\n\n <vxe-table\n ref="xTable"\n border\n show-overflow\n row-id="id"\n :data.sync="tableData"\n :edit-config="{trigger: \'click\', mode: \'cell\', showStatus: true}">\n <vxe-table-column type="index" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="sex" title="Sex" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="date" title="Date" :edit-render="{name: \'input\'}"></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 getInsertEvent () {\n let insertRecords = this.$refs.xTable.getInsertRecords()\n this.$XMsg.alert(insertRecords.length)\n },\n getRemoveEvent () {\n let removeRecords = this.$refs.xTable.getRemoveRecords()\n this.$XMsg.alert(removeRecords.length)\n },\n getUpdateEvent () {\n let updateRecords = this.$refs.xTable.getUpdateRecords()\n this.$XMsg.alert(updateRecords.length)\n }\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)})},methods:{getInsertEvent:function(){var e=this.$refs.xTable.getInsertRecords();this.$XMsg.alert(e.length)},getRemoveEvent:function(){var e=this.$refs.xTable.getRemoveRecords();this.$XMsg.alert(e.length)},getUpdateEvent:function(){var e=this.$refs.xTable.getUpdateRecords();this.$XMsg.alert(e.length)}}},s=r,d=n("2877"),c=Object(d["a"])(s,a,l,!1,null,null,null);t["default"]=c.exports},c1c2:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",[e._v("使用 edit "),n("table-column-api-link",{attrs:{prop:"slot"}}),e._v(" 自定义渲染任意 Vue 组件")],1),n("vxe-table",{attrs:{border:"","show-overflow":"","row-id":"id",data:e.tableData,"edit-config":{trigger:"click",mode:"cell"}},on:{"update:data":function(t){e.tableData=t}}},[n("vxe-table-column",{attrs:{type:"index",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name","edit-render":{name:"input"}},scopedSlots:e._u([{key:"edit",fn:function(t){var a=t.row;return[n("input",{directives:[{name:"model",rawName:"v-model",value:a.name,expression:"row.name"}],staticClass:"custom-input",attrs:{type:"text"},domProps:{value:a.name},on:{input:function(t){t.target.composing||e.$set(a,"name",t.target.value)}}})]}}])}),n("vxe-table-column",{attrs:{field:"age",title:"Age","edit-render":{autofocus:".custom-input"}},scopedSlots:e._u([{key:"edit",fn:function(t){var a=t.row;return[n("input",{directives:[{name:"model",rawName:"v-model",value:a.age,expression:"row.age"}],staticClass:"custom-input",attrs:{type:"number"},domProps:{value:a.age},on:{input:function(t){t.target.composing||e.$set(a,"age",t.target.value)}}})]}}])}),n("vxe-table-column",{attrs:{field:"date3",title:"Date","edit-render":{name:"input"}},scopedSlots:e._u([{key:"edit",fn:function(t){var a=t.row;return[n("input",{directives:[{name:"model",rawName:"v-model",value:a.date3,expression:"row.date3"}],staticClass:"custom-input",attrs:{type:"date"},domProps:{value:a.date3},on:{input:function(t){t.target.composing||e.$set(a,"date3",t.target.value)}}})]}},{key:"default",fn:function(t){var n=t.row;return[e._v("选中日期："+e._s(n.date3))]}}])})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},l=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],demoCodes:['\n <vxe-table\n border\n show-overflow\n :data.sync="tableData"\n :edit-config="{trigger: \'click\', mode: \'cell\'}">\n <vxe-table-column type="index" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name" :edit-render="{name: \'input\'}">\n <template v-slot:edit="{ row }">\n <input type="text" v-model="row.name" class="custom-input">\n </template>\n </vxe-table-column>\n <vxe-table-column field="age" title="Age" :edit-render="{autofocus: \'.custom-input\'}">\n <template v-slot:edit="{ row }">\n <input type="number" v-model="row.age" class="custom-input">\n </template>\n </vxe-table-column>\n <vxe-table-column field="date3" title="Date" :edit-render="{name: \'input\'}">\n <template v-slot:edit="{ row }">\n <input type="date" v-model="row.date3" class="custom-input">\n </template>\n <template v-slot="{ row }">选中日期：{{ row.date3 }}</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, 6)\n }\n }\n "]}},created:function(){var e=window.MOCK_DATA_LIST.slice(0,6);this.tableData=e},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})}},s=r,d=n("2877"),c=Object(d["a"])(s,a,l,!1,null,null,null);t["default"]=c.exports},c466:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",[e._v("设置 "),n("table-api-link",{attrs:{prop:"mouse-config"}}),e._v("={selected: true} 启用单元格选中功能")],1),n("p",[e._v("设置 "),n("table-api-link",{attrs:{prop:"keyboard-config"}}),e._v("={isArrow: true, isDel: true, isTab: true, isEdit: true} 启用按键功能及任意键编辑功能，方向键、Tab 键、Esc 键、F2 键、Del、Back 键")],1),n("vxe-table",{attrs:{border:"","show-overflow":"","highlight-cell":"","row-id":"id",data:e.tableData,"mouse-config":{selected:!0},"keyboard-config":{isArrow:!0,isDel:!0,isTab:!0,isEdit:!0},"edit-config":{trigger:"dblclick",mode:"cell"}},on:{"update:data":function(t){e.tableData=t}}},[n("vxe-table-column",{attrs:{type:"index",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"date",title:"Date"}}),n("vxe-table-column",{attrs:{field:"address",title:"Address","edit-render":{name:"input"}}})],1),e._m(0),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},l=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("pre",[e._v(" "),n("code",[e._v("\n | Arrow Up ↑ | 移动到当前活动单元格上面的单元格 |\n | Arrow Down ↓ | 移动到当前活动单元格下面的单元格 |\n | Arrow Left ← | 移动到当前活动单元格左边的单元格 |\n | Arrow Right → | 移动到当前活动单元格右边的单元格 |\n | Tab | 移动到当前选中或活动单元格的右侧单元格，如果到最后一列且存在下一行，则从下一行开始移动 |\n | Enter | 取消编辑并移动到当前活动单元格下面的单元格 |\n | Delete | 清空内容 |\n | Backspace | 清空内容并激活选中单元格为编辑状态 |\n | F2 | 激活单元格编辑 |\n | Esc | 取消单元格编辑 |\n ")]),e._v("\n ")])}],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],demoCodes:['\n <vxe-table\n border\n show-overflow\n highlight-cell\n row-id="id"\n :data.sync="tableData"\n :mouse-config="{selected: true}"\n :keyboard-config="{isArrow: true, isDel: true, isTab: true, isEdit: true}"\n :edit-config="{trigger: \'dblclick\', mode: \'cell\'}">\n <vxe-table-column type="index" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="sex" title="Sex" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="date" title="Date"></vxe-table-column>\n <vxe-table-column field="address" title="Address" show-overflow :edit-render="{name: \'input\'}"></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n tableData: []\n }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n }\n }\n "]}},created:function(){var e=window.MOCK_DATA_LIST.slice(0,6);this.tableData=e},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})}},s=r,d=n("2877"),c=Object(d["a"])(s,a,l,!1,null,null,null);t["default"]=c.exports},e77b:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",[e._v("单元格点击编辑，还可以通过 "),n("table-column-api-link",{attrs:{prop:"autoselect"}}),e._v(" 开启默认选中")],1),n("vxe-table",{attrs:{border:"",resizable:"","show-overflow":"","row-id":"id",data:e.tableData,"edit-config":{trigger:"click",mode:"cell"}},on:{"update:data":function(t){e.tableData=t}}},[n("vxe-table-column",{attrs:{type:"index",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name","edit-render":{name:"input",autoselect:!0}}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"date",title:"Date","edit-render":{name:"input"}}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},l=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],demoCodes:['\n <vxe-table\n border\n resizable\n show-overflow\n row-id="id"\n :data.sync="tableData"\n :edit-config="{trigger: \'click\', mode: \'cell\'}">\n <vxe-table-column type="index" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name" :edit-render="{name: \'input\', autoselect: true}"></vxe-table-column>\n <vxe-table-column field="sex" title="Sex" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="date" title="Date" :edit-render="{name: \'input\'}"></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n tableData: []\n }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n }\n }\n "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,6)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})}},s=r,d=n("2877"),c=Object(d["a"])(s,a,l,!1,null,null,null);t["default"]=c.exports},f43b:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",[e._v("设置 "),n("table-api-link",{attrs:{prop:"edit-config"}}),e._v("={trigger: 'dblclick', mode: 'cell'} 启用单元格双击编辑的功能")],1),n("p",{staticClass:"red"},[e._v("开启编辑功能，必须要有唯一行数据的 key，通过设置 "),n("table-api-link",{attrs:{prop:"row-id"}}),e._v(" 或者 "),n("table-api-link",{attrs:{prop:"row-key"}}),e._v(" 自定义字段名")],1),n("vxe-table",{attrs:{border:"",resizable:"","show-overflow":"",height:"500","row-id":"id",data:e.tableData,"edit-config":{trigger:"dblclick",mode:"cell"}},on:{"update:data":function(t){e.tableData=t},"edit-actived":e.editActivedEvent,"edit-closed":e.editClosedEvent}},[n("vxe-table-column",{attrs:{type:"index",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"date",title:"Date","edit-render":{name:"input"}}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")]),n("p",[e._v("设置 "),n("table-api-link",{attrs:{prop:"edit-config"}}),e._v("={trigger: 'dblclick', mode: 'row'} 启用行双击编辑的功能")],1),n("p",[e._v("需要注意的 mode=row 时，事件中的 column 相关参数是不确定性的（会保留 column 相关参数，但不一定是准确的）")]),n("vxe-table",{attrs:{border:"",resizable:"","show-overflow":"",height:"500","row-id":"id",data:e.tableData,"edit-config":{trigger:"dblclick",mode:"row"}},on:{"update:data":function(t){e.tableData=t}}},[n("vxe-table-column",{attrs:{type:"index",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"date",title:"Date","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"address",title:"Address","edit-render":{name:"input"}}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n ")])],1)},l=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],demoCodes:['\n <vxe-table\n border\n resizable\n show-overflow\n height="500"\n row-id="id"\n :data.sync="tableData"\n :edit-config="{trigger: \'dblclick\', mode: \'cell\'}">\n <vxe-table-column type="index" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="sex" title="Sex" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="date" title="Date" :edit-render="{name: \'input\'}"></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, 100)\n },\n methods: {\n editActivedEvent ({ row, column }, event) {\n console.log(`打开 ${column.title} 列编辑`)\n },\n editClosedEvent ({ row, column }, event) {\n console.log(`关闭 ${column.title} 列编辑`)\n }\n }\n }\n ",'\n <vxe-table\n border\n resizable\n show-overflow\n height="500"\n row-id="id"\n :data.sync="tableData"\n :edit-config="{trigger: \'dblclick\', mode: \'row\'}">\n <vxe-table-column type="index" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="sex" title="Sex" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="date" title="Date" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="address" title="Address" show-overflow :edit-render="{name: \'input\'}"></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, 100)\n }\n }\n "]}},created:function(){var e=window.MOCK_DATA_LIST.slice(0,100);this.tableData=e},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})},methods:{editActivedEvent:function(e,t){e.row;var n=e.column;console.log("打开 ".concat(n.title," 列编辑"))},editClosedEvent:function(e,t){e.row;var n=e.column;console.log("关闭 ".concat(n.title," 列编辑"))}}},s=r,d=n("2877"),c=Object(d["a"])(s,a,l,!1,null,null,null);t["default"]=c.exports}}]);
Reference in New Issue View Git Blame Copy Permalink