text: (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",{staticClass:"tip"},[e._v("设置 "),n("table-api-link",{attrs:{prop:"edit-config"}}),e._v("={trigger: 'manual', mode: 'row'} 启用行编辑的功能")],1),n("vxe-table",{ref:"xTable",attrs:{border:"",resizable:"","show-overflow":"",data:e.tableData,"edit-config":{trigger:"manual",mode:"row"}}},[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:"role",title:"Role","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex","edit-render":{name:"select",options:e.sexList}}}),n("vxe-table-column",{attrs:{field:"date12",title:"Date","edit-render":{name:"input",attrs:{type:"date"}}}}),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),s={data:function(){return{tableData:[],sexList:[],demoCodes:['\n        <vxe-table\n          ref="xTable"\n          border\n          resizable\n          show-overflow\n          :data="tableData"\n          :edit-config="{trigger: \'manual\', mode: \'row\'}">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column field="role" title="Role" :edit-render="{name: \'input\'}"></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: \'select\', options: sexList}"></vxe-table-column>\n          <vxe-table-column field="date12" title="Date" :edit-render="{name: \'input\', attrs: {type: \'date\'}}"></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              sexList: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n            this.findSexList()\n          },\n          methods: {\n            findSexList () {\n              return this.$ajax.getJSON('/api/conf/sex/list').then(data => {\n                this.sexList = data\n              })\n            },\n            editRowEvent (row) {\n              this.$refs.xTable.setActiveRow(row)\n            },\n            saveRowEvent (row) {\n              this.$refs.xTable.clearActived().then(() => {\n                this.$XModal.alert('success')\n              })\n            },\n            cancelRowEvent (row) {\n              this.$refs.xTable.clearActived()\n            }\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,6),this.findSexList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},methods:{findSexList:function(){var e=this;return this.$ajax.getJSON("/api/conf/sex/list").then((function(t){e.sexList=t}))},editRowEvent:function(e){this.$refs.xTable.setActiveRow(e)},saveRowEvent:function(e){var t=this;this.$refs.xTable.clearActived().then((function(){t.$XModal.alert("success")}))},cancelRowEvent:function(e){this.$refs.xTable.clearActived()}}},r=s,d=n("2877"),c=Object(d["a"])(r,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",{staticClass:"tip"},[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","footer-method":e.footerMethod,"footer-cell-class-name":e.footerCellClassName,data:e.tableData,"edit-config":{trigger:"click",mode:"row"}}},[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),s=n("c695"),r=n.n(s),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          :footer-method="footerMethod"\n          :footer-cell-class-name="footerCellClassName"\n          :data="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 null\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 null\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.$XModal.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)?r.a.mean(n,e.property):null})),t.map((function(e,t){return 0===t?"和值":["age"].includes(e.property)?r.a.sum(n,e.property):null}))]},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.$XModal.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={},s=Object(o["a"])(i,a,l,!1,null,null,null);t["default"]=s.exports},"3ab7":function(e,t,n){},"3e3f":function(e,t,n){},"4c2f":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",{staticClass:"tip"},[e._v("展开行")]),n("vxe-table",{attrs:{border:"",resizable:"",data:e.tableData,"edit-config":{trigger:"click",mode:"cell"}}},[n("vxe-table-column",{attrs:{type:"index",width:"60"}}),n("vxe-table-column",{attrs:{type:"expand",width:"60"},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;t.rowIndex;return[n("ul",{staticClass:"expand-form"},[n("li",[n("span",{staticClass:"title"},[e._v("Name：")]),n("span",{staticClass:"content"},[n("vxe-input",{model:{value:a.name,callback:function(t){e.$set(a,"name",t)},expression:"row.name"}})],1)]),n("li",[n("span",{staticClass:"title"},[e._v("Sex：")]),n("span",{staticClass:"content"},[n("vxe-input",{model:{value:a.sex,callback:function(t){e.$set(a,"sex",t)},expression:"row.sex"}})],1)]),n("li",[n("span",{staticClass:"title"},[e._v("Age：")]),n("span",{staticClass:"content"},[n("vxe-input",{model:{value:a.age,callback:function(t){e.$set(a,"age",t)},expression:"row.age"}})],1)])])]}}])}),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),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          resizable\n          :data="tableData"\n          :edit-config="{trigger: \'click\', mode: \'cell\'}">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column type="expand" width="60">\n            <template v-slot="{ row, rowIndex }">\n              <ul class="expand-form">\n                <li>\n                  <span class="title">Name：</span>\n                  <span class="content">\n                    <vxe-input v-model="row.name"></vxe-input>\n                  </span>\n                </li>\n                <li>\n                  <span class="title">Sex：</span>\n                  <span class="content">\n                    <vxe-input v-model="row.sex"></vxe-input>\n                  </span>\n                </li>\n                <li>\n                  <span class="title">Age：</span>\n                  <span class="content">\n                    <vxe-input v-model="row.age"></vxe-input>\n                  </span>\n                </li>\n              </ul>\n            </template>\n          </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        }\n        ","\n        .expand-form li {\n          margin: 5px 0;\n        }\n        .expand-form li .title,\n        .expand-form li .content {\n          display: inline-block;\n        }\n        .expand-form li .title {\n          width: 100px;\n        }\n        .expand-form li .content {\n          width: 200px;\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,6)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))}},r=s,d=(n("51a8"),n("2877")),c=Object(d["a"])(r,a,l,!1,null,"460d7af4",null);t["default"]=c.exports},"51a8":function(e,t,n){"use strict";var a=n("3e3f"),l=n.n(a);l.a},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={},s=Object(o["a"])(i,a,l,!1,null,null,null);t["default"]=s.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",{staticClass:"tip"},[e._v("设置 "),n("table-api-link",{attrs:{prop:"edit-config"}}),e._v("={trigger: 'click', mode: 'cell'} 启用单元格点击编辑的功能")],1),n("vxe-table",{attrs:{border:"",resizable:"",data:e.tableData,"edit-config":{trigger:"click",mode:"cell"}},on:{"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:"role",title:"Role","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex","edit-render":{name:"select",options:e.sexList}}}),n("vxe-table-column",{attrs:{field:"date12",title:"Date","edit-render":{name:"input",attrs:{type:"date"}}}})],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",{staticClass:"tip"},[e._v("设置 "),n("table-api-link",{attrs:{prop:"edit-config"}}),e._v("={trigger: 'click', mode: 'row'} 启用行点击编辑的功能")],1),n("vxe-table",{attrs:{border:"",resizable:"","show-overflow":"",data:e.tableData,"edit-config":{trigger:"click",mode:"row"}}},[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:"role",title:"Role","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"sex2",title:"Sex","edit-render":{name:"select",options:e.sexList,optionProps:{value:"value",label:"spell"}}}}),n("vxe-table-column",{attrs:{field:"date13",title:"Date","edit-render":{name:"input",attrs:{type:"date"}}}}),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),s={data:function(){return{tableData:[],sexList:[],demoCodes:['\n        <vxe-table\n          border\n          resizable\n          :data="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="role" title="Role" :edit-render="{name: \'input\'}"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex" :edit-render="{name: \'select\', options: sexList}"></vxe-table-column>\n          <vxe-table-column field="date12" title="Date" :edit-render="{name: \'input\', attrs: {type: \'date\'}}"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [],\n              sexList: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n            this.findSexList()\n          },\n          methods: {\n            findSexList () {\n              return this.$ajax.getJSON('/api/conf/sex/list').then(data => {\n                this.sexList = data\n              })\n            },\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          :data="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="role" title="Role" :edit-render="{name: \'input\'}"></vxe-table-column>\n          <vxe-table-column field="sex2" title="Sex" :edit-render="{name: \'select\', options: sexList, optionProps: {value: \'value\', label: \'spell\'}}"></vxe-table-column>\n          <vxe-table-column field="date13" title="Date" :edit-render="{name: \'input\', attrs: {type: \'date\'}}"></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              sexList: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n            this.findSexList()\n          },\n          methods: {\n            findSexList () {\n              return this.$ajax.getJSON('/api/conf/sex/list').then(data => {\n                this.sexList = data\n              })\n            }\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,6),this.findSexList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},methods:{findSexList:function(){var e=this;return this.$ajax.getJSON("/api/conf/sex/list").then((function(t){e.sexList=t}))},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," 列编辑"))}}},r=s,d=n("2877"),c=Object(d["a"])(r,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",{staticClass:"tip"},[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":"",data:e.tableData,"edit-config":{trigger:"manual",mode:"row",autoClear:!1}}},[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),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          ref="xTable"\n          border\n          show-overflow\n          :data="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.$refs.xTable.clearActived().then(() => {\n                this.$XModal.alert('success')\n              })\n            },\n            cancelRowEvent (row) {\n              let xTable = this.$refs.xTable\n              xTable.clearActived()\n                .then(() => xTable.revertData(row))\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){var t=this;this.$refs.xTable.clearActived().then((function(){t.$XModal.alert("success")}))},cancelRowEvent:function(e){var t=this.$refs.xTable;t.clearActived().then((function(){return t.revertData(e)}))}}},r=s,d=n("2877"),c=Object(d["a"])(r,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",{staticClass:"tip"},[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.insertEvent()}}},[e._v("在第1行插入")]),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":"",data:e.tableData,"edit-config":{trigger:"click",mode:"cell"}}},[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),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="insertEvent()">在第1行插入</vxe-button>\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          :data="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            insertEvent (row) {\n              let record = {\n                sex: '1'\n              }\n              this.$refs.xTable.insertAt(record, row)\n                .then(({ row }) => this.$refs.xTable.setActiveCell(row, 'sex'))\n            },\n            getRemoveEvent () {\n              let removeRecords = this.$refs.xTable.getRemoveRecords()\n              this.$XModal.alert(removeRecords.length)\n            },\n            getSelectionEvent () {\n              let removeRecords = this.$refs.xTable.getSelectRecords()\n              this.$XModal.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:{insertEvent:function(e){var t=this,n={sex:"1"};this.$refs.xTable.insertAt(n,e).then((function(e){var n=e.row;return t.$refs.xTable.setActiveCell(n,"sex")}))},getRemoveEvent:function(){var e=this.$refs.xTable.getRemoveRecords();this.$XModal.alert(e.length)},getSelectionEvent:function(){var e=this.$refs.xTable.getSelectRecords();this.$XModal.alert(e.length)}}},r=s,d=n("2877"),c=Object(d["a"])(r,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",{staticClass:"tip"},[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.getSelectEvent}},[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":"",height:"500",data:e.tableData,"edit-rules":e.validRules,"edit-config":{trigger:"click",mode:"cell",showStatus:!0}}},[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),s={data:function(){return{tableData:[],validRules:{name:[{required:!0,message:"app.body.valid.rName"},{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="getSelectEvent">获取选中</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          height="500"\n          ref="xTable"\n          :data="tableData"\n          :edit-rules="validRules"\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: 'app.body.valid.rName' },\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.$XModal.message({ status: 'success', message: '校验成功！' })\n                } else {\n                  this.$XModal.message({ status: 'error', message: '校验不通过！' })\n                }\n              })\n            },\n            fullValidEvent () {\n              this.$refs.xTable.fullValidate((valid, errMap) => {\n                if (valid) {\n                  this.$XModal.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.$XModal.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.$XModal.message({ status: 'success', message: '校验成功！' })\n                  } else {\n                    this.$XModal.message({ status: 'error', message: '校验不通过！' })\n                  }\n                })\n              } else {\n                this.$XModal.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            getSelectEvent () {\n              let selectRecords = this.$refs.xTable.getSelectRecords()\n              this.$XModal.alert(selectRecords.length)\n            },\n            getInsertEvent () {\n              let insertRecords = this.$refs.xTable.getInsertRecords()\n              this.$XModal.alert(insertRecords.length)\n            },\n            getRemoveEvent () {\n              let removeRecords = this.$refs.xTable.getRemoveRecords()\n              this.$XModal.alert(removeRecords.length)\n            },\n            getUpdateEvent () {\n              let updateRecords = this.$refs.xTable.getUpdateRecords()\n              this.$XModal.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.$XModal.message({status:"success",message:"校验成功！"}):e.$XModal.message({status:"error",message:"校验不通过！"})}))},fullValidEvent:function(){var e=this,t=this.$createElement;this.$refs.xTable.fullValidate((function(n,a){if(n)e.$XModal.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.$XModal.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.$XModal.message({status:"success",message:"校验成功！"}):e.$XModal.message({status:"error",message:"校验不通过！"})})):this.$XModal.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){}))}))},getSelectEvent:function(){var e=this.$refs.xTable.getSelectRecords();this.$XModal.alert(e.length)},getInsertEvent:function(){var e=this.$refs.xTable.getInsertRecords();this.$XModal.alert(e.length)},getRemoveEvent:function(){var e=this.$refs.xTable.getRemoveRecords();this.$XModal.alert(e.length)},getUpdateEvent:function(){var e=this.$refs.xTable.getUpdateRecords();this.$XModal.alert(e.length)}}},r=s,d=n("2877"),c=Object(d["a"])(r,a,l,!1,null,null,null);t["default"]=c.exports},"76a0":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",[e._m(0),n("vxe-table",{attrs:{border:"",resizable:"","show-overflow":"",data:e.tableData}},[n("vxe-table-column",{attrs:{type:"index",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name","cell-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex","cell-render":{name:"select",options:e.sexList}}}),n("vxe-table-column",{attrs:{field:"age",title:"Age","cell-render":{name:"input",attrs:{type:"number"}}}}),n("vxe-table-column",{attrs:{field:"role",title:"Role"},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[n("input",{directives:[{name:"model",rawName:"v-model",value:a.role,expression:"row.role"}],attrs:{type:"text"},domProps:{value:a.role},on:{input:function(t){t.target.composing||e.$set(a,"role",t.target.value)}}})]}}])}),n("vxe-table-column",{attrs:{field:"date3",title:"Date"},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[n("input",{directives:[{name:"model",rawName:"v-model",value:a.date3,expression:"row.date3"}],attrs:{type:"date"},domProps:{value:a.date3},on:{input:function(t){t.target.composing||e.$set(a,"date3",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[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),e._m(1),n("vxe-table",{attrs:{border:"",resizable:"","show-overflow":"",data:e.tableData,"edit-config":{trigger:"click",mode:"row"}}},[n("vxe-table-column",{attrs:{type:"index",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name","edit-render":{name:"input",type:"visible"}}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex","edit-render":{name:"select",type:"visible",options:e.sexList}}}),n("vxe-table-column",{attrs:{field:"age",title:"Age","edit-render":{name:"input",type:"visible",attrs:{type:"number"}}}}),n("vxe-table-column",{attrs:{field:"role",title:"Role","edit-render":{name:"input",type:"visible"}}}),n("vxe-table-column",{attrs:{field:"date3",title:"Date","edit-render":{name:"input",type:"visible",attrs:{type:"date"}}}})],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=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",{staticClass:"tip"},[e._v("\n    将单元格渲染成可编辑"),n("br"),n("span",{staticClass:"red"},[e._v("由于不符合 vxe-table 单行编辑的设计原则，使用这个方式的所有逻辑都应该自行处理")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",{staticClass:"tip"},[e._v("\n    将可编辑全部设为可视类型"),n("br"),n("span",{staticClass:"red"},[e._v("由于不符合 vxe-table 单行编辑的设计原则，使用这个方式的所有逻辑都应该自行处理")])])}],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),s={data:function(){return{tableData:[],sexList:[{value:"",label:"请选择"},{value:"0",label:"女"},{value:"1",label:"男"}],demoCodes:['\n        <vxe-table\n          border\n          resizable\n          show-overflow\n          :data="tableData">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" :cell-render="{name: \'input\'}"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex" :cell-render="{name: \'select\', options: sexList}"></vxe-table-column>\n          <vxe-table-column field="age" title="Age" :cell-render="{name: \'input\', attrs: {type: \'number\'}}"></vxe-table-column>\n          <vxe-table-column field="role" title="Role">\n            <template v-slot="{ row }">\n              <input type="text" v-model="row.role">\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="date3" title="Date">\n            <template v-slot="{ row }">\n              <input type="date" v-model="row.date3">\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, 5)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          resizable\n          show-overflow\n          :data="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\', type: \'visible\'}"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex" :edit-render="{name: \'select\', type: \'visible\', options: sexList}"></vxe-table-column>\n          <vxe-table-column field="age" title="Age" :edit-render="{name: \'input\', type: \'visible\', attrs: {type: \'number\'}}"></vxe-table-column>\n          <vxe-table-column field="role" title="Role" :edit-render="{name: \'input\', type: \'visible\'}"></vxe-table-column>\n          <vxe-table-column field="date3" title="Date" :edit-render="{name: \'input\', type: \'visible\', attrs: {type: \'date\'}}"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 5)\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,5)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},methods:{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," 列编辑"))}}},r=s,d=n("2877"),c=Object(d["a"])(r,a,l,!1,null,null,null);t["default"]=c.exports},"76f9":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",{staticClass:"tip"},[e._v("通过快捷菜单增删改查")]),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:"",resizable:"","show-overflow":"",height:"400",loading:e.loading,data:e.tableData,"context-menu":{header:{options:e.headerMenus},body:{options:e.bodyMenus},visibleMethod:e.visibleMethod},"edit-config":{trigger:"click",mode:"row",showStatus:!0}},on:{"context-menu-click":e.contextMenuClickEvent}},[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),s=n("f11d"),r={data:function(){return{loading:!1,tableData:[],headerMenus:[[{code:"hideColumn",name:"隐藏列",disabled:!1},{code:"showAllColumn",name:"取消所有隐藏列",disabled:!1}]],bodyMenus:[[{code:"copy",name:"复制",prefixIcon:"fa fa-copy",disabled:!1},{code:"reload",name:"刷新",disabled:!1},{code:"insertAt",name:"插入",disabled:!1},{code:"remove",name:"删除",disabled:!1},{code:"save",name:"保存",prefixIcon:"fa fa-save",disabled:!1}]],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          border\n          resizable\n          show-overflow\n          ref="xTable"\n          height="400"\n          :loading="loading"\n          :data="tableData"\n          :context-menu="{header: {options: headerMenus}, body: {options: bodyMenus}, visibleMethod}"\n          :edit-config="{trigger: \'click\', mode: \'row\', showStatus: true}"\n          @context-menu-click="contextMenuClickEvent">\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              loading: false,\n              tableData: [],\n              headerMenus: [\n                [\n                  {\n                    code: 'hideColumn',\n                    name: '隐藏列'\n                  },\n                  {\n                    code: 'showAllColumn',\n                    name: '取消所有隐藏列'\n                  }\n                ]\n              ],\n              bodyMenus: [\n                [\n                  {\n                    code: 'copy',\n                    name: '复制',\n                    prefixIcon: 'fa fa-copy'\n                  },\n                  {\n                    code: 'reload',\n                    name: '刷新'\n                  },\n                  {\n                    code: 'insertAt',\n                    name: '插入'\n                  },\n                  {\n                    code: 'remove',\n                    name: '删除'\n                  },\n                  {\n                    code: 'save',\n                    name: '保存',\n                    prefixIcon: 'fa fa-save'\n                  }\n                ]\n              ]\n            }\n          },\n          created () {\n            this.findList()\n          },\n          methods: {\n            findList () {\n              this.loading = true\n              this.tableData = []\n              setTimeout(() => {\n                this.tableData = window.MOCK_DATA_LIST.slice(0, 5)\n                this.loading = false\n              }, 500)\n            },\n            insertEvent (row, column) {\n              let xTable = this.$refs.xTable\n              xTable.insertAt(null, row)\n                .then(({ row }) => xTable.setActiveCell(row, column.property))\n            },\n            visibleMethod ({ options, column }) {\n              let isDisabled = !column\n              options.forEach(list => {\n                list.forEach(item => {\n                  item.disabled = isDisabled\n                })\n              })\n              return true\n            },\n            contextMenuClickEvent ({ menu, row, column }) {\n              let xTable = this.$refs.xTable\n              switch (menu.code) {\n                case 'hideColumn':\n                  xTable.hideColumn(column)\n                  break\n                case 'showAllColumn':\n                  xTable.resetCustoms()\n                  break\n                case 'copy':\n                  if (XEClipboard.copy(row[column.property])) {\n                    this.$XModal.message({ message: '已复制到剪贴板！', status: 'success' })\n                  }\n                  break\n                case 'reload':\n                  this.findList()\n                  break\n                case 'insertAt':\n                  this.insertEvent(row, column)\n                  break\n                case 'remove':\n                  xTable.remove(row)\n                  break\n                case 'save':\n                  this.$XModal.message({ message: '保存成功', status: 'success' })\n                  this.findList()\n                  break\n              }\n            },\n            getInsertEvent () {\n              let insertRecords = this.$refs.xTable.getInsertRecords()\n              this.$XModal.alert(insertRecords.length)\n            },\n            getRemoveEvent () {\n              let removeRecords = this.$refs.xTable.getRemoveRecords()\n              this.$XModal.alert(removeRecords.length)\n            },\n            getUpdateEvent () {\n              let updateRecords = this.$refs.xTable.getUpdateRecords()\n              this.$XModal.alert(updateRecords.length)\n            }\n          }\n        }\n        "]}},created:function(){this.findList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},methods:{findList:function(){var e=this;this.loading=!0,this.tableData=[],setTimeout((function(){e.tableData=window.MOCK_DATA_LIST.slice(0,5),e.loading=!1}),500)},insertEvent:function(e,t){var n=this.$refs.xTable;n.insertAt(null,e||-1).then((function(e){var a=e.row;return n.setActiveCell(a,t?t.property:"name")}))},visibleMethod:function(e){var t=e.options,n=e.column,a=!n;return t.forEach((function(e){e.forEach((function(e){e.disabled=a}))})),!0},contextMenuClickEvent:function(e){var t=e.menu,n=e.row,a=e.column,l=this.$refs.xTable;switch(t.code){case"hideColumn":l.hideColumn(a);break;case"showAllColumn":l.resetCustoms();break;case"copy":s["a"].copy(n[a.property])&&this.$XModal.message({message:"已复制到剪贴板！",status:"success"});break;case"reload":this.findList();break;case"insertAt":this.insertEvent(n,a);break;case"remove":l.remove(n);break;case"save":this.$XModal.message({message:"保存成功",status:"success"}),this.findList();break}},getInsertEvent:function(){var e=this.$refs.xTable.getInsertRecords();this.$XModal.alert(e.length)},getRemoveEvent:function(){var e=this.$refs.xTable.getRemoveRecords();this.$XModal.alert(e.length)},getUpdateEvent:function(){var e=this.$refs.xTable.getUpdateRecords();this.$XModal.alert(e.length)}}},d=r,c=n("2877"),u=Object(c["a"])(d,a,l,!1,null,null,null);t["default"]=u.exports},8391: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",{staticClass:"tip"},[e._v("实现简单的级联下拉选项列表")]),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.insertEvent()}}},[e._v("新增")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable",attrs:{border:"",resizable:"","max-height":"400",data:e.tableData,"edit-config":{trigger:"click",mode:"row"}},on:{"edit-actived":e.editActivedEvent}},[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:"attr3",title:"Project type","edit-render":{name:"select",options:e.ptypeList,events:{change:e.ptypeChangeEvent}}}}),n("vxe-table-column",{attrs:{field:"attr4",title:"Project name",formatter:e.formatPanmeLabel,"edit-render":{}},scopedSlots:e._u([{key:"edit",fn:function(t){var a=t.row;return[n("select",{directives:[{name:"model",rawName:"v-model",value:a.attr4,expression:"row.attr4"}],staticClass:"vxe-default-select",on:{change:function(t){var n=Array.prototype.filter.call(t.target.options,(function(e){return e.selected})).map((function(e){var t="_value"in e?e._value:e.value;return t}));e.$set(a,"attr4",t.target.multiple?n:n[0])}}},e._l(e.pnameList,(function(t){return n("option",{key:t.value,domProps:{value:t.value}},[e._v(e._s(t.label))])})),0)]}}])}),n("vxe-table-column",{attrs:{field:"date12",title:"Date","edit-render":{name:"input",attrs:{type:"date"}}}})],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("7514"),n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),s={data:function(){return{tableData:[],ptypeList:[{label:"",value:""},{label:"项目1",value:"1"},{label:"项目2",value:"2"},{label:"项目3",value:"3"}],pnameList:[],cachePnameList:[],demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="insertEvent()">新增</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          border\n          resizable\n          ref="xTable"\n          max-height="400"\n          :data="tableData"\n          :edit-config="{trigger: \'click\', mode: \'row\'}"\n          @edit-actived="editActivedEvent">\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="attr3" title="Project type" :edit-render="{name: \'select\', options: ptypeList, events: {change: ptypeChangeEvent}}"></vxe-table-column>\n          <vxe-table-column field="attr4" title="Project name" :formatter="formatPanmeLabel" :edit-render="{}">\n            <template v-slot:edit="{ row }">\n              <select class="vxe-default-select" v-model="row.attr4">\n                <option v-for="item in pnameList" :key="item.value" :value="item.value">{{ item.label }}</option>\n              </select>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="date12" title="Date" :edit-render="{name: \'input\', attrs: {type: \'date\'}}"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [],\n              ptypeList: [\n                {\n                  label: '',\n                  value: ''\n                },\n                {\n                  label: '项目1',\n                  value: '1'\n                },\n                {\n                  label: '项目2',\n                  value: '2'\n                },\n                {\n                  label: '项目3',\n                  value: '3'\n                }\n              ],\n              pnameList: [],\n              cachePnameList: []\n            }\n          },\n          created () {\n            this.$nextTick(() => {\n              this.tableData = window.MOCK_DATA_LIST.slice(0, 4)\n              this.updateRoleList()\n            })\n          },\n          methods: {\n            insertEvent () {\n              let record = {\n\n              }\n              this.$refs.xTable.insert(record)\n            },\n            // 格式化显示名称\n            formatPanmeLabel ({ cellValue, row }) {\n              let ptype = row.attr3\n              let ptypeItem = this.cachePnameList.find(item => item.ptype === ptype)\n              if (ptypeItem && ptypeItem.pnameList) {\n                let pnameItem = ptypeItem.pnameList.find(item => item.value === cellValue)\n                if (pnameItem) {\n                  return pnameItem.label\n                }\n              }\n              return ''\n            },\n            // 更新级联选项列表\n            updatePnameList (row) {\n              let ptype = row.attr3\n              let pnameList = [\n                {\n                  label: '',\n                  value: ''\n                }\n              ]\n              if (ptype) {\n                let item = this.cachePnameList.find(item => item.ptype === ptype)\n                if (item) {\n                  pnameList = item.pnameList\n                } else {\n                  // 模拟后台数据\n                  Array.from(new Array(this.$utils.random(3, 8))).forEach((item, index) => {\n                    pnameList.push({\n                      label: `${ptype}-名称${index}`,\n                      value: `${ptype}_${index}`\n                    })\n                  })\n                  this.cachePnameList.push({ ptype, pnameList })\n                }\n              }\n              this.pnameList = pnameList\n            },\n            ptypeChangeEvent ({ row }, evnt) {\n              // 由于重写了内部的 model 事件，所以需要自行处理赋值相关的逻辑\n              row.attr3 = evnt.target.value\n              // 类型切换时更新级联的下拉数据\n              row.attr4 = ''\n              this.updatePnameList(row)\n            },\n            editActivedEvent ({ row }) {\n              this.updatePnameList(row)\n            }\n          }\n        }\n        "]}},created:function(){var e=this;this.$nextTick((function(){e.tableData=window.MOCK_DATA_LIST.slice(0,4)}))},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},methods:{insertEvent:function(){var e={};this.$refs.xTable.insert(e)},formatPanmeLabel:function(e){var t=e.cellValue,n=e.row,a=n.attr3,l=this.cachePnameList.find((function(e){return e.ptype===a}));if(l&&l.pnameList){var o=l.pnameList.find((function(e){return e.value===t}));if(o)return o.label}return""},updatePnameList:function(e){var t=e.attr3,n=[{label:"",value:""}];if(t){var a=this.cachePnameList.find((function(e){return e.ptype===t}));a?n=a.pnameList:(Array.from(new Array(this.$utils.random(3,8))).forEach((function(e,a){n.push({label:"".concat(t,"-名称").concat(a),value:"".concat(t,"_").concat(a)})})),this.cachePnameList.push({ptype:t,pnameList:n}))}this.pnameList=n},ptypeChangeEvent:function(e,t){var n=e.row;n.attr3=t.target.value,n.attr4="",this.updatePnameList(n)},editActivedEvent:function(e){var t=e.row;this.updatePnameList(t)}}},r=s,d=n("2877"),c=Object(d["a"])(r,a,l,!1,null,null,null);t["default"]=c.exports},"909a":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",{staticClass:"tip"},[e._v("实现简单的唯一下拉选项列表")]),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.insertEvent()}}},[e._v("新增")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable",attrs:{border:"",resizable:"","max-height":"400",data:e.tableData,"edit-config":{trigger:"click",mode:"row"}},on:{"edit-actived":e.editActivedEvent}},[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:"role1",title:"Role","edit-render":{name:"select",options:e.roleList,events:{change:e.roleChangeEvent}}}}),n("vxe-table-column",{attrs:{field:"date12",title:"Date","edit-render":{name:"input",attrs:{type:"date"}}}})],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),s={data:function(){return{tableData:[],roleList:[{label:"",value:"",disabled:!1},{label:"前端",value:"1",disabled:!1},{label:"后端",value:"2",disabled:!1},{label:"项目经理",value:"3",disabled:!1},{label:"设计师",value:"4",disabled:!1},{label:"运维",value:"5",disabled:!1}],demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="insertEvent()">新增</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          border\n          resizable\n          ref="xTable"\n          max-height="400"\n          :data="tableData"\n          :edit-config="{trigger: \'click\', mode: \'row\'}"\n          @edit-actived="editActivedEvent">\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="role1" title="Role" :edit-render="{name: \'select\', options: roleList, events: {change: roleChangeEvent}}"></vxe-table-column>\n          <vxe-table-column field="date12" title="Date" :edit-render="{name: \'input\', attrs: {type: \'date\'}}"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [],\n              roleList: [\n                {\n                  label: '',\n                  value: '',\n                  disabled: false\n                },\n                {\n                  label: '前端',\n                  value: '1',\n                  disabled: false\n                },\n                {\n                  label: '后端',\n                  value: '2',\n                  disabled: false\n                },\n                {\n                  label: '项目经理',\n                  value: '3',\n                  disabled: false\n                },\n                {\n                  label: '设计师',\n                  value: '4',\n                  disabled: false\n                },\n                {\n                  label: '运维',\n                  value: '5',\n                  disabled: false\n                }\n              ]\n            }\n          },\n          created () {\n            this.$nextTick(() => {\n              this.tableData = window.MOCK_DATA_LIST.slice(0, 2)\n              this.updateRoleList()\n            })\n          },\n          methods: {\n            insertEvent () {\n              let record = {\n\n              }\n              this.$refs.xTable.insert(record)\n            },\n            updateRoleList () {\n              // 获取表格中的全量数据\n              let { fullData } = this.$refs.xTable.getTableData()\n              this.roleList.forEach(item => {\n                if (item.value) {\n                  // 如果当前选项已经被选过，则禁用\n                  item.disabled = fullData.some(row => row.role1 === item.value)\n                }\n              })\n            },\n            roleChangeEvent ({ row }, evnt) {\n              // 由于重写了内部的 model 事件，所以需要自行处理赋值相关的逻辑\n              row.role1 = evnt.target.value\n              this.updateRoleList()\n            },\n            editActivedEvent ({ row }) {\n              // 激活编辑时检查剩余选项是否可选择\n              this.updateRoleList()\n            }\n          }\n        }\n        "]}},created:function(){var e=this;this.$nextTick((function(){e.tableData=window.MOCK_DATA_LIST.slice(0,2),e.updateRoleList()}))},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},methods:{insertEvent:function(){var e={};this.$refs.xTable.insert(e)},updateRoleList:function(){var e=this.$refs.xTable.getTableData(),t=e.fullData;this.roleList.forEach((function(e){e.value&&(e.disabled=t.some((function(t){return t.role1===e.value})))}))},roleChangeEvent:function(e,t){var n=e.row;n.role1=t.target.value,this.updateRoleList()},editActivedEvent:function(e){e.row;this.updateRoleList()}}},r=s,d=n("2877"),c=Object(d["a"])(r,a,l,!1,null,null,null);t["default"]=c.exports},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",{staticClass:"tip"},[e._v("调用 "),n("table-api-link",{attrs:{prop:"insert"}}),e._v("、"),n("table-api-link",{attrs:{prop:"insertAt"}}),e._v(" 函数插入数据")],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.insertEvent()}}},[e._v("在第1行插入")]),n("vxe-button",{on:{click:function(t){return e.insertEvent(e.tableData[2])}}},[e._v("在第3行插入并激活 Sex 单元格")]),n("vxe-button",{on:{click:function(t){return e.insertEvent(-1)}}},[e._v("在最后行插入")]),n("vxe-button",{on:{click:e.getInsertEvent}},[e._v("获取新增")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable",attrs:{border:"","show-overflow":"","max-height":"400",data:e.tableData,"edit-config":{trigger:"click",mode:"cell"}}},[n("vxe-table-column",{attrs:{type:"index",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:"","edit-render":{name:"input",defaultValue:"默认的名字"}}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex","edit-render":{name:"select",options:e.sexList}}}),n("vxe-table-column",{attrs:{field:"age",title:"Age",sortable:"","edit-render":{name:"input",defaultValue:18}}})],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),s={data:function(){return{tableData:[],sexList:[],demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="insertEvent()">在第1行插入</vxe-button>\n            <vxe-button @click="insertEvent(tableData[2])">在第3行插入并激活 Sex 单元格</vxe-button>\n            <vxe-button @click="insertEvent(-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          max-height="400"\n          :data="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" sortable :edit-render="{name: \'input\', defaultValue: \'默认的名字\'}"></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" sortable :edit-render="{name: \'input\', defaultValue: 18}"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [],\n              sexList: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 4)\n            this.findSexList()\n          },\n          methods: {\n            findSexList () {\n              return this.$ajax.getJSON('/api/conf/sex/list').then(data => {\n                this.sexList = data\n              })\n            },\n            insertEvent (row) {\n              let record = {\n                sex: '1'\n              }\n              this.$refs.xTable.insertAt(record, row)\n                .then(({ row }) => this.$refs.xTable.setActiveCell(row, 'sex'))\n            },\n            getInsertEvent () {\n              let insertRecords = this.$refs.xTable.getInsertRecords()\n              this.$XModal.alert(insertRecords.length)\n            }\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,4),this.findSexList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},methods:{findSexList:function(){var e=this;return this.$ajax.getJSON("/api/conf/sex/list").then((function(t){e.sexList=t}))},insertEvent:function(e){var t=this,n={sex:"1"};this.$refs.xTable.insertAt(n,e).then((function(e){var n=e.row;return t.$refs.xTable.setActiveCell(n,"sex")}))},getInsertEvent:function(){var e=this.$refs.xTable.getInsertRecords();this.$XModal.alert(e.length)}}},r=s,d=n("2877"),c=Object(d["a"])(r,a,l,!1,null,null,null);t["default"]=c.exports},"946e4":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",{staticClass:"tip"},[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.getSelectEvent}},[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":"",data:e.tableData,"edit-rules":e.validRules,"edit-config":{trigger:"click",mode:"row",showStatus:!0}}},[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),s={data:function(){return{tableData:[],validRules:{name:[{required:!0,message:"app.body.valid.rName"},{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="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          :data="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: 'app.body.valid.rName' },\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.$XModal.message({ status: 'success', message: '校验成功！' })\n                } else {\n                  this.$XModal.message({ status: 'error', message: '校验不通过！' })\n                }\n              })\n            },\n            fullValidEvent () {\n              this.$refs.xTable.fullValidate((valid, errMap) => {\n                if (valid) {\n                  this.$XModal.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.$XModal.message({\n                    status: 'error',\n                    message: () => {\n                      return [\n                        <div class=\"red\" style=\"max-height: 400px;overflow: auto;\">\n                          {\n                            msgList.map(msg => <div>{ msg }</div>)\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.$XModal.message({ status: 'success', message: '校验成功！' })\n                  } else {\n                    this.$XModal.message({ status: 'error', message: '校验不通过！' })\n                  }\n                })\n              } else {\n                this.$XModal.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            getSelectEvent () {\n              let selectRecords = this.$refs.xTable.getSelectRecords()\n              this.$XModal.alert(selectRecords.length)\n            },\n            getInsertEvent () {\n              let insertRecords = this.$refs.xTable.getInsertRecords()\n              this.$XModal.alert(insertRecords.length)\n            },\n            getRemoveEvent () {\n              let removeRecords = this.$refs.xTable.getRemoveRecords()\n              this.$XModal.alert(removeRecords.length)\n            },\n            getUpdateEvent () {\n              let updateRecords = this.$refs.xTable.getUpdateRecords()\n              this.$XModal.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.$XModal.message({status:"success",message:"校验成功！"}):e.$XModal.message({status:"error",message:"校验不通过！"})}))},fullValidEvent:function(){var e=this,t=this.$createElement;this.$refs.xTable.fullValidate((function(n,a){if(n)e.$XModal.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.$XModal.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.$XModal.message({status:"success",message:"校验成功！"}):e.$XModal.message({status:"error",message:"校验不通过！"})})):this.$XModal.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){}))}))},getSelectEvent:function(){var e=this.$refs.xTable.getSelectRecords();this.$XModal.alert(e.length)},getInsertEvent:function(){var e=this.$refs.xTable.getInsertRecords();this.$XModal.alert(e.length)},getRemoveEvent:function(){var e=this.$refs.xTable.getRemoveRecords();this.$XModal.alert(e.length)},getUpdateEvent:function(){var e=this.$refs.xTable.getUpdateRecords();this.$XModal.alert(e.length)}}},r=s,d=n("2877"),c=Object(d["a"])(r,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",{staticClass:"tip"},[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":"",data:e.tableData,"edit-config":{trigger:"click",mode:"cell",activeMethod:e.activeCellMethod}},on:{"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",{staticClass:"tip"},[e._v("禁用第二行编辑")]),n("vxe-table",{ref:"xTable",attrs:{border:"","show-overflow":"",data:e.tableData,"edit-config":{trigger:"click",mode:"cell",activeMethod:e.activeRowMethod}},on:{"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),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          ref="xTable"\n          border\n          show-overflow\n          :data="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          :data="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.$XModal.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.$XModal.alert("禁止编辑")}}},r=s,d=n("2877"),c=Object(d["a"])(r,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",{staticClass:"tip"},[e._v("调用 "),n("table-api-link",{attrs:{prop:"revertData"}}),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.revertData()}}},[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":"",data:e.tableData,"edit-config":{trigger:"click",mode:"cell",showStatus:!0}}},[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.revertData(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),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="$refs.xTable.revertData()">还原全部</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          :data="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.revertData(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)}))}},r=s,d=n("2877"),c=Object(d["a"])(r,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={},s=Object(o["a"])(i,a,l,!1,null,null,null);t["default"]=s.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",{staticClass:"tip"},[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":"",data:e.tableData,"edit-config":{trigger:"click",mode:"row",activeMethod:e.activeRowMethod}},on:{"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",{staticClass:"tip"},[e._v("配合自定义渲染，第三行name禁止编辑禁 age 小于 26")]),n("vxe-table",{ref:"xTable",attrs:{border:"","show-overflow":"",data:e.tableData,"edit-config":{trigger:"click",mode:"row"}}},[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.age,expression:"scope.row.age"}],attrs:{type:"text",disabled:e.disableMethod(t)},domProps:{value:t.row.age},on:{input:function(n){n.target.composing||e.$set(t.row,"age",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.date,expression:"row.date"}],attrs:{type:"date"},domProps:{value:a.date},on:{input:function(t){t.target.composing||e.$set(a,"date",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),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          ref="xTable"\n          border\n          show-overflow\n          :data="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.$XModal.alert('禁止编辑')\n            }\n          }\n        }\n        ",'\n        <vxe-table\n          ref="xTable"\n          border\n          show-overflow\n          :data="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.sex" :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.date">\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.$XModal.alert("禁止编辑")}}},r=s,d=n("2877"),c=Object(d["a"])(r,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",{staticClass:"tip"},[e._v("\n    设置 "),n("table-api-link",{attrs:{prop:"edit-config"}}),e._v("={trigger: 'click', mode: 'cell', showStatus: true} 开启编辑状态显示功能"),n("br"),e._v("\n    对于某些需要局部保存的场景，可以在数据保存完成后调用 "),n("table-api-link",{attrs:{prop:"reloadRow"}}),e._v(" 方法加载行数据并恢复到初始状态\n  ")],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.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":"",data:e.tableData,"edit-config":{trigger:"click",mode:"cell",showStatus:!0}}},[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:"date3",title:"Date",formatter:"toDateString"}}),n("vxe-table-column",{attrs:{title:"操作",width:"200"},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row,l=t.rowIndex;return[a.date3?l%2===0?[n("vxe-button",{attrs:{loading:a.loading},on:{click:function(t){return e.saveEvent(a)}}},[e._v("更新行数据")])]:[n("vxe-button",{attrs:{type:"primary",loading:a.loading},on:{click:function(t){return e.saveEvent(a,"name")}}},[e._v("更新 Name 列")])]:[n("vxe-button",{attrs:{loading:a.loading},on:{click:function(t){return e.saveEvent2(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("7f7f"),n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="insertEvent">新增</vxe-button>\n            <vxe-button @click="$refs.xTable.removeSelecteds()">删除选中</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          ref="xTable"\n          :data="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="date3" title="Date" formatter="toDateString"></vxe-table-column>\n          <vxe-table-column title="操作" width="200">\n            <template v-slot="{ row, rowIndex }">\n              <template v-if="!row.date3">\n                <vxe-button @click="saveEvent2(row)" :loading="row.loading">更新并替换新数据</vxe-button>\n              </template>\n              <template v-else-if="rowIndex % 2 === 0">\n                <vxe-button @click="saveEvent(row)" :loading="row.loading">更新行数据</vxe-button>\n              </template>\n              <template v-else>\n                <vxe-button type="primary" @click="saveEvent(row, \'name\')" :loading="row.loading">更新 Name 列</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            insertEvent () {\n              this.$refs.xTable.insert()\n                .then(({ row }) => this.$refs.xTable.setActiveCell(row, 'name'))\n            },\n            saveEvent (row, field) {\n              let xTable = this.$refs.xTable\n              if (xTable.hasRowChange(row)) {\n                row.loading = true\n                this.submitSave(row).then(data => {\n                  // 局部保存，并将行数据恢复到初始状态（如果 record 为空则不改动行数据，只恢复状态）\n                  xTable.reloadRow(row, null, field)\n                  this.$XModal.message({ message: '保存成功！', status: 'success' })\n                  row.loading = false\n                })\n              } else {\n                this.$XModal.message({ message: '数据未改动！', status: 'info' })\n              }\n            },\n            saveEvent2 (row, field) {\n              let xTable = this.$refs.xTable\n              if (xTable.hasRowChange(row)) {\n                row.loading = true\n                this.submitSave(row).then(data => {\n                  // 局部保存，并更新本地数据\n                  xTable.reloadRow(row, data, field)\n                  this.$XModal.message({ message: '保存成功！', status: 'success' })\n                  row.loading = false\n                })\n              } else {\n                this.$XModal.message({ message: '数据未改动！', status: 'info' })\n              }\n            },\n            submitSave (row) {\n              return new Promise(resolve => {\n                let rest = {\n                  date3: this.$utils.toDateString(new Date())\n                }\n                if (row.name) {\n                  rest.name = row.name\n                }\n                if (row.sex) {\n                  rest.sex = row.sex\n                }\n                setTimeout(() => resolve(rest), 500)\n              })\n            },\n            getInsertEvent () {\n              let insertRecords = this.$refs.xTable.getInsertRecords()\n              this.$XModal.alert(insertRecords.length)\n            },\n            getRemoveEvent () {\n              let removeRecords = this.$refs.xTable.getRemoveRecords()\n              this.$XModal.alert(removeRecords.length)\n            },\n            getUpdateEvent () {\n              let updateRecords = this.$refs.xTable.getUpdateRecords()\n              this.$XModal.alert(updateRecords.length)\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:{insertEvent:function(){var e=this;this.$refs.xTable.insert().then((function(t){var n=t.row;return e.$refs.xTable.setActiveCell(n,"name")}))},saveEvent:function(e,t){var n=this,a=this.$refs.xTable;a.hasRowChange(e)?(e.loading=!0,this.submitSave(e).then((function(l){a.reloadRow(e,null,t),n.$XModal.message({message:"保存成功！",status:"success"}),e.loading=!1}))):this.$XModal.message({message:"数据未改动！",status:"info"})},saveEvent2:function(e,t){var n=this,a=this.$refs.xTable;a.hasRowChange(e)?(e.loading=!0,this.submitSave(e).then((function(l){a.reloadRow(e,l,t),n.$XModal.message({message:"保存成功！",status:"success"}),e.loading=!1}))):this.$XModal.message({message:"数据未改动！",status:"info"})},submitSave:function(e){var t=this;return new Promise((function(n){var a={date3:t.$utils.toDateString(new Date)};e.name&&(a.name=e.name),e.sex&&(a.sex=e.sex),setTimeout((function(){return n(a)}),500)}))},getInsertEvent:function(){var e=this.$refs.xTable.getInsertRecords();this.$XModal.alert(e.length)},getRemoveEvent:function(){var e=this.$refs.xTable.getRemoveRecords();this.$XModal.alert(e.length)},getUpdateEvent:function(){var e=this.$refs.xTable.getUpdateRecords();this.$XModal.alert(e.length)}}},r=s,d=n("2877"),c=Object(d["a"])(r,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",{staticClass:"tip"},[e._v("使用 edit "),n("table-column-api-link",{attrs:{prop:"slot"}}),e._v(" 自定义渲染任意 Vue 组件")],1),n("vxe-table",{attrs:{border:"","show-overflow":"",data:e.tableData,"edit-config":{trigger:"click",mode:"cell"}}},[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),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          show-overflow\n          :data="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)}))}},r=s,d=n("2877"),c=Object(d["a"])(r,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",{staticClass:"tip"},[e._v("设置 "),n("table-api-link",{attrs:{prop:"mouse-config"}}),e._v("={selected: true} 启用单元格选中功能，设置 "),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":"",height:"500",data:e.tableData,"mouse-config":{selected:!0},"keyboard-config":{isArrow:!0,isDel:!0,isTab:!0,isEdit:!0},"edit-config":{trigger:"dblclick",mode:"cell"}}},[n("vxe-table-column",{attrs:{type:"index",width:"60"}}),n("vxe-table-column",{attrs:{type:"selection",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      | Tab + Shift | 移动到当前选中或活动单元格的左侧单元格，如果到第一列且存在上一行，则从上一行开始移动 |\n      | Spacebar | 如果单元格是复选框或单选框则切换勾选状态 |\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),s={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          show-overflow\n          height="500"\n          :data="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 type="selection" 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" :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        }\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)}))}},r=s,d=n("2877"),c=Object(d["a"])(r,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",{staticClass:"tip"},[e._v("单元格点击编辑，还可以通过 "),n("table-column-api-link",{attrs:{prop:"autoselect"}}),e._v(" 开启默认选中")],1),n("vxe-table",{attrs:{border:"",resizable:"","show-overflow":"",data:e.tableData,"edit-config":{trigger:"click",mode:"cell"}}},[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:"sex5",title:"Sex","edit-render":{name:"select",optionGroups:e.sexGriupList}}}),n("vxe-table-column",{attrs:{field:"date13",title:"Date","edit-render":{name:"input",attrs:{type:"date"},autoselect:!0}}})],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),s={data:function(){return{tableData:[],sexGriupList:[{label:"第一分组",options:[{value:"1",label:"男"}]},{label:"第二分组",options:[{value:"0",label:"女"}]},{label:"其他",options:[{value:"",label:"无"}]}],demoCodes:['\n        <vxe-table\n          border\n          resizable\n          show-overflow\n          :data="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="sex5" title="Sex" :edit-render="{name: \'select\', optionGroups: sexGriupList}"></vxe-table-column>\n          <vxe-table-column field="date13" title="Date" :edit-render="{name: \'input\', attrs: {type: \'date\'}, autoselect: true}"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [],\n              sexGriupList: [\n                {\n                  label: '第一分组',\n                  options: [\n                    {\n                      value: '1',\n                      label: '男'\n                    }\n                  ]\n                },\n                {\n                  label: '第二分组',\n                  options: [\n                    {\n                      value: '0',\n                      label: '女'\n                    }\n                  ]\n                },\n                {\n                  label: '其他',\n                  options: [\n                    {\n                      value: '',\n                      label: '无'\n                    }\n                  ]\n                }\n              ]\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,6)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))}},r=s,d=n("2877"),c=Object(d["a"])(r,a,l,!1,null,null,null);t["default"]=c.exports},ec09: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",{staticClass:"tip"},[e._v("可编辑的合并行")]),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.saveEvent}},[e._v("保存")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable",attrs:{border:"",height:"500",loading:e.loading,"span-method":e.rowspanMethod,data:e.tableData,"edit-rules":e.validRules,"mouse-config":{selected:!0},"keyboard-config":{isArrow:!0,isDel:!0,isTab:!0,isEdit:!0},"edit-config":{trigger:"click",mode:"cell"}}},[n("vxe-table-column",{attrs:{type:"selection",width:"60"}}),n("vxe-table-column",{attrs:{field:"key",title:"Key","edit-render":{name:"input",props:{placeholder:"请输入键值"}}}}),n("vxe-table-column",{attrs:{field:"name",title:"Translate","edit-render":{name:"input",props:{placeholder:"请输入翻译的内容"}}}}),n("vxe-table-column",{attrs:{field:"language",title:"Language","edit-render":{name:"select",options:e.optionList}}})],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("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),s=n("628a"),r=n.n(s),d={data:function(){return{loading:!1,tableData:[],optionList:[{label:"--请选择--",value:null},{label:"中文",value:"zh_CN"},{label:"English",value:"en_US"},{label:"Español",value:"es"},{label:"Français",value:"fr_FR"}],validRules:{key:[{required:!0,message:"键值必须填写"}],name:[{required:!0,message:"翻译内容必须填写"}],language:[{required:!0,message:"语言类型必须填写"}]},demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="insertEvent">新增</vxe-button>\n            <vxe-button @click="$refs.xTable.removeSelecteds()">删除选中</vxe-button>\n            <vxe-button @click="saveEvent">保存</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          border\n          ref="xTable"\n          height="500"\n          :loading="loading"\n          :span-method="rowspanMethod"\n          :data="tableData"\n          :edit-rules="validRules"\n          :mouse-config="{selected: true}"\n          :keyboard-config="{isArrow: true, isDel: true, isTab: true, isEdit: true}"\n          :edit-config="{trigger: \'click\', mode: \'cell\'}">\n          <vxe-table-column type="selection" width="60"></vxe-table-column>\n          <vxe-table-column field="key" title="Key" :edit-render="{name: \'input\', props: {placeholder: \'请输入键值\'}}"></vxe-table-column>\n          <vxe-table-column field="name" title="Translate" :edit-render="{name: \'input\', props: {placeholder: \'请输入翻译的内容\'}}"></vxe-table-column>\n          <vxe-table-column field="language" title="Language" :edit-render="{name: \'select\', options: optionList}"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              loading: false,\n              tableData: [],\n              optionList: [\n                { label: '--请选择--', value: null },\n                { label: '中文', value: 'zh_CN' },\n                { label: 'English', value: 'en_US' },\n                { label: 'Español', value: 'es' },\n                { label: 'Français', value: 'fr_FR' }\n              ],\n              validRules: {\n                key: [\n                  { required: true, message: '键值必须填写' }\n                ],\n                name: [\n                  { required: true, message: '翻译内容必须填写' }\n                ],\n                language: [\n                  { required: true, message: '语言类型必须填写' }\n                ]\n              }\n            }\n          },\n          created () {\n            this.findList()\n          },\n          methods: {\n            findList () {\n              this.loading = true\n              XEAjax.getJSON('/api/i18n/list', { sort: 'key', order: 'asc' }).then(data => {\n                this.tableData = data\n                this.loading = false\n              })\n            },\n            insertEvent () {\n              let record = {}\n              this.$refs.xTable.insert(record)\n                .then(({ row }) => this.$refs.xTable.setActiveCell(row, 'key'))\n            },\n            saveEvent () {\n              let body = this.$refs.xTable.getRecordset()\n              let { insertRecords, removeRecords, updateRecords } = body\n              if (insertRecords.length || removeRecords.length || updateRecords.length) {\n                this.$refs.xTable.validate(valid => {\n                  if (valid) {\n                    XEAjax.doPost('/api/i18n/save', body).then(() => {\n                      this.$XModal.message({ message: '保存成功！', status: 'success' })\n                      this.findList()\n                    }).catch(() => {\n                      this.$XModal.message({ message: '保存失败！', status: 'error' })\n                    })\n                  }\n                })\n              } else {\n                this.$Message.info('数据未改动！')\n              }\n            },\n            // 通用行合并函数（将相同多列数据合并为一行）\n            rowspanMethod ({ row, $rowIndex, column, data }) {\n              let fields = ['key']\n              let cellValue = row[column.property]\n              if (cellValue && fields.includes(column.property)) {\n                let prevRow = data[$rowIndex - 1]\n                let nextRow = data[$rowIndex + 1]\n                if (prevRow && prevRow[column.property] === cellValue) {\n                  return { rowspan: 0, colspan: 0 }\n                } else {\n                  let countRowspan = 1\n                  while (nextRow && nextRow[column.property] === cellValue) {\n                    nextRow = data[++countRowspan + $rowIndex]\n                  }\n                  if (countRowspan > 1) {\n                    return { rowspan: countRowspan, colspan: 1 }\n                  }\n                }\n              }\n            }\n          }\n        }\n        "]}},created:function(){this.findList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},methods:{findList:function(){var e=this;this.loading=!0,r.a.getJSON("/api/i18n/list",{sort:"key",order:"asc"}).then((function(t){e.tableData=t,e.loading=!1}))},insertEvent:function(){var e=this,t={};this.$refs.xTable.insert(t).then((function(t){var n=t.row;return e.$refs.xTable.setActiveCell(n,"key")}))},saveEvent:function(){var e=this,t=this.$refs.xTable.getRecordset(),n=t.insertRecords,a=t.removeRecords,l=t.updateRecords;n.length||a.length||l.length?this.$refs.xTable.validate((function(n){n&&r.a.doPost("/api/i18n/save",t).then((function(){e.$XModal.message({message:"保存成功！",status:"success"}),e.findList()})).catch((function(){e.$XModal.message({message:"保存失败！",status:"error"})}))})):this.$Message.info("数据未改动！")},rowspanMethod:function(e){var t=e.row,n=e.$rowIndex,a=e.column,l=e.data,o=["key"],i=t[a.property];if(i&&o.includes(a.property)){var s=l[n-1],r=l[n+1];if(s&&s[a.property]===i)return{rowspan:0,colspan:0};var d=1;while(r&&r[a.property]===i)r=l[++d+n];if(d>1)return{rowspan:d,colspan:1}}}}},c=d,u=n("2877"),v=Object(u["a"])(c,a,l,!1,null,null,null);t["default"]=v.exports},f11d:function(e,t,n){"use strict";var a=window.document,l=a.createElement("textarea");function o(e){var t=l.style;l.id="$XECopy",t.width="48px",t.height="24px",t.position="fixed",t.zIndex="0",t.left="-500px",t.top="-500px",l.value=null===e||void 0===e?"":""+e,l.parentNode||a.body.appendChild(l)}function i(e){return l.focus(),l.select(),l.setSelectionRange(0,l.value.length),a.execCommand("copy",!!e)}function s(e){var t=!1;try{o(e),t=i(),t||(t=i(1))}catch(n){}return t}s.copy=s,t["a"]=s},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",{staticClass:"tip"},[e._v("设置 "),n("table-api-link",{attrs:{prop:"edit-config"}}),e._v("={trigger: 'dblclick', mode: 'cell'} 启用单元格双击编辑的功能")],1),n("vxe-table",{attrs:{border:"",resizable:"",data:e.tableData,"edit-config":{trigger:"dblclick",mode:"cell"}},on:{"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:"role",title:"Role","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex","edit-render":{name:"select",options:e.sexList}}}),n("vxe-table-column",{attrs:{field:"date12",title:"Date","edit-render":{name:"input",attrs:{type:"date"}}}})],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",{staticClass:"tip"},[e._v("设置 "),n("table-api-link",{attrs:{prop:"edit-config"}}),e._v("={trigger: 'dblclick', mode: 'row'} 启用行双击编辑的功能")],1),n("vxe-table",{attrs:{border:"",resizable:"","show-overflow":"",data:e.tableData,"edit-config":{trigger:"dblclick",mode:"row"}}},[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:"role",title:"Role","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"sex4",title:"Sex","edit-render":{name:"select",options:e.sexList,optionProps:{value:"value2",label:"spell"}}}}),n("vxe-table-column",{attrs:{field:"date13",title:"Date","edit-render":{name:"input",attrs:{type:"date"}}}}),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),s={data:function(){return{tableData:[],sexList:[],demoCodes:['\n        <vxe-table\n          border\n          resizable\n          :data="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="role" title="Role" :edit-render="{name: \'input\'}"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex" :edit-render="{name: \'select\', options: sexList}"></vxe-table-column>\n          <vxe-table-column field="date12" title="Date" :edit-render="{name: \'input\', attrs: {type: \'date\'}}"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [],\n              sexList: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n            this.findSexList()\n          },\n          methods: {\n            findSexList () {\n              return this.$ajax.getJSON('/api/conf/sex/list').then(data => {\n                this.sexList = data\n              })\n            },\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          :data="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="role" title="Role" :edit-render="{name: \'input\'}"></vxe-table-column>\n          <vxe-table-column field="sex4" title="Sex" :edit-render="{name: \'select\', options: sexList, optionProps: {value: \'value2\', label: \'spell\'}}"></vxe-table-column>\n          <vxe-table-column field="date13" title="Date" :edit-render="{name: \'input\', attrs: {type: \'date\'}}"></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              sexList: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n            this.findSexList()\n          },\n          methods: {\n            findSexList () {\n              return this.$ajax.getJSON('/api/conf/sex/list').then(data => {\n                this.sexList = data\n              })\n            }\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,6),this.findSexList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},methods:{findSexList:function(){var e=this;return this.$ajax.getJSON("/api/conf/sex/list").then((function(t){e.sexList=t}))},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," 列编辑"))}}},r=s,d=n("2877"),c=Object(d["a"])(r,a,l,!1,null,null,null);t["default"]=c.exports}}]);