婚庆设备租赁网站源码,蜀icp备 网站建设中企动力成都,有哪些游戏可以做网站,wordpress首页文章设置使用elemenui树形删除数据的时候刷新页面#xff0c;我在网上找了好多方法#xff0c;要么没用#xff0c;要么都是部分代码#xff0c;自己又看不懂#xff0c;不得不硬着头皮看源码#xff0c;发现了有个方法可以刷新。 使用elemenui树形删除数据的时候刷新页面。源码里…使用elemenui树形删除数据的时候刷新页面我在网上找了好多方法要么没用要么都是部分代码自己又看不懂不得不硬着头皮看源码发现了有个方法可以刷新。 使用elemenui树形删除数据的时候刷新页面。源码里有一个判断如果刷新的数据等于空那么不执行刷新方法。所以我们直接使用resolve()来刷新是行不通的。
我在网上找了好多方法要么没用要么都是部分代码自己又看不懂不得不硬着头皮看源码发现了有个方法可以刷新。可以从res中获取数据再把数据清空掉即可
主要代码
return {//不知道为什么lazyTreeNodeMap要写在states里边有时间再研究states: {lazyTreeNodeMap: {},},
}//如果是空数组进入这个单独处理删除的方法
if (!dataArray1.length){
//把当前lazyTreeNodeMap节点的tree替换成 空数组清空
this.$set(this.$refs.multipleTable.store.states.lazyTreeNodeMap,tree,{})
//也可以写成dataArray1因为dataArray1就是空的
//this.$set(this.$refs.multipleTable.store.states.lazyTreeNodeMap,tree,dataArray1)
}完整代码
templatediv classapp-containerdiv classselfSearch refselfSearchdiv classsearch_leftquery :params.syncqueryParams keywordParamspr_name,is_entity finishCommitgetListel-form slotform classseniorQuery :modelqueryParams refqueryForm sizesmall :inlinetruev-showshowSearch label-width110pxel-form-item label编目清单名称 propprNameel-inputv-modelqueryParams.prNameplaceholder请输入编目清单名称clearablekeyup.enter.nativehandleQuery//el-form-item/el-form/query/divdiv classsearch_right!-- el-checkbox v-modelqueryParams.queryChecked label显示全部 border changecheckedChange/el-checkbox--el-buttontypeprimaryiconel-icon-plussizesmallclickhandleAddv-hasPermi[ba:baConserveBoq:add]新增/el-buttonright-toolbar :showSearch.syncshowSearch queryTablegetList/right-toolbar/div/div!-- el-table v-ifrefreshTable:databaConserveBoqListrow-keyid:default-expand-allisExpandAllstylewidth: 100%; margin-bottom: 20px;borderlazy:select-on-indeterminatetrue:loadloadsort-changesortChangeselectselectselect-allselectAllselection-changeselectionChange refmultipleTable:tree-props{ children: children, hasChildren: hasChildren }:heightselfHeight stripe/el-table--el-table:datatableData1row-keyid:default-expand-allisExpandAllstylewidth: 100%; margin-bottom: 20px;borderlazy:loadload1:select-on-indeterminatetruesort-changesortChangeselectselectselect-allselectAllselection-changeselectionChange refmultipleTable:heightselfHeight:tree-props{ children: children, hasChildren: hasChildren }el-table-column typeselection width55 aligncenter/el-table-column sortable label编目清单编码 alignleft propprCode/el-table-column sortable label编目清单名称 aligncenter propprName/el-table-column sortable label单价 aligncenter propprice/el-table-column sortable label计量单位 aligncenter propmeasuringUnit/el-table-column sortable label显示顺序 aligncenter propnum/el-table-column sortable label层级 aligncenter propprLeveltemplate slot-scopescopedict-tag :optionsdict.type.ba_boq_pr_level :valuescope.row.prLevel//template/el-table-columnel-table-column sortable label创建时间 aligncenter propcreateTime width200template slot-scopescopespan{{ parseTime(scope.row.createTime) }}/span/template/el-table-columnel-table-column sortable label状态 alignleft propstatus width150template slot-scopescopetemplate v-ifscope.row.status 0el-tag typesuccess正常/el-tag/templatetemplate v-else-ifscope.row.status 1el-tag typedanger禁用/el-tag/template/template/el-table-column!-- width240 aligncenterclass-namesmall-padding fixed-width fixedright --el-table-column width240 label操作 aligncenter class-namesmall-padding fixed-widthtemplate slot-scopescopeel-buttonsizesmalltypetexticonel-icon-editclickhandleUpdate(scope.row)v-hasPermi[ba:baConserveBoq:edit]修改/el-buttonel-buttonsizesmalltypetexticonel-icon-plusclickhandleAdd(scope.row)v-hasPermi[ba:baConserveBoq:add]添加下级/el-buttonel-buttonv-ifscope.row.parentId ! 0sizesmalltypetexticonel-icon-deleteclickhandleDelete(scope.row)v-hasPermi[ba:baConserveBoq:remove]删除/el-button/template/el-table-column/el-table!-- 懒加载 lazy --!-- 添加或修改养护工程量清单对话框 --el-dialog classspec-dialog :titletitle :visible.syncopen width70% append-to-bodyel-form refform :modelform :rulesrules label-width150pxel-row :gutter24el-col :span12el-form-item label编目编码 propprCodeel-input v-ifform.id null || form.id v-modelform.prCode placeholder请输入编目编码/el-input v-ifform.id !null form.id ! v-modelform.prCodeplaceholder请输入编目编码//el-form-item/el-colel-col :span12el-form-item label编目名称 propprNameel-input v-modelform.prName placeholder请输入编目名称//el-form-item/el-col/el-rowel-row :gutter24el-col :span12el-form-item label单价 proppriceel-input v-modelform.price placeholder请输入单价//el-form-item/el-colel-col :span12el-form-item label计量单位 propmeasuringUnitel-input v-modelform.measuringUnit placeholder请输入计量单位//el-form-item/el-col/el-rowel-row :gutter24el-col :span12el-form-item label层级 propprLevelel-select v-modelform.prLevel placeholder层级 clearableel-optionv-fordict in dict.type.ba_boq_pr_level:keydict.value:labeldict.label:valuedict.value//el-select/el-form-item/el-colel-col :span12el-form-item label备注 propremarksel-input v-modelform.remarks placeholder请输入备注//el-form-item/el-col/el-rowel-row :gutter24el-col :span12el-form-item label状态el-radio-group v-modelform.statusel-radiov-fordict in dict.type.sys_normal_disable:keydict.value:labeldict.value{{ dict.label }}/el-radio/el-radio-group/el-form-item/el-colel-col :span12el-form-item label显示排序 propnumel-input-number v-modelform.num controls-positionright :min0//el-form-item/el-col/el-row/el-formdiv classsusp-btnel-button typeprimary clicksubmitForm保 存/el-buttonel-button clickcancel关 闭/el-button/div/el-dialog!-- el-col :span1 styledisplay: flex;align-items: center;justify-content: center;cursor: pointer;div classfolding clicktoggleCollapsei v-ifshowArrow classel-icon-caret-right/ii v-else classel-icon-caret-left/i/div/el-colel-col :spanisCollapsed ? 0 : 6div classdiseaseProcess/div/el-col--/div
/templatescriptimport {listBaConserveBoq,getBaConserveBoq,delBaConserveBoq,addBaConserveBoq,updateBaConserveBoq, selectParentIdById
} from /api/maintain/ba/baConserveBoq;import Treeselect from riophae/vue-treeselect;
import riophae/vue-treeselect/dist/vue-treeselect.css;
import log from /views/monitor/job/log.vue;export default {name: BaConserveBoq,dicts: [sys_normal_disable, ba_boq_pr_level, ba_boq_entity],components: {Treeselect},data() {return {states: {// defaultExpandAll 存在于 expand.js 中这里不重复添加// 在展开行中expandRowKeys 会被转化成 expandRowsexpandRowKeys 这个属性只是记录了 TreeTable 行的展开// TODO: 拆分为独立的 TreeTable统一用法expandRowKeys: [],treeData: {},indent: 16,lazy: false,lazyTreeNodeMap: {},lazyColumnIdentifier: hasChildren,childrenColumnName: children},idCounter: 1,stagingArea: null,dataMap: new Map(),dataParentIdArr: [],tableData1: [],//折叠箭头showArrow: true,// 自定义折叠isCollapsed: false,// 自定义高度selfHeight: null,// 工程量编目清单树选项baboqOptions: [],// 重新渲染表格状态refreshTable: true,// 是否展开默认全部展开isExpandAll: false,// 遮罩层loading: true,// 显示搜索条件showSearch: true,// 养护工程量清单表格数据baConserveBoqList: [],// 养护工程量清单树选项baConserveBoqOptions: [],// 弹出层标题title: ,// 是否显示弹出层open: false,// 查询参数queryParams: {measuringUnit: null,//单价price: null,//单位parentId: null,prName: null,num: null,status: null,prCode: null,prLevel: null,remarks: null,isEntity: null},// 保存 id 对应的chilren指针childMapById:new Map(),// 表单参数form: {},// 表单校验rules: {prCode: [{required: true, message: 编目编码不能为空, trigger: blur}],prName: [{required: true, message: 编目名称不能为空, trigger: blur}],isEntity: [{required: true, message: 不能为空, trigger: blur}],}};},created() {this.getList();},mounted() {this.getMyHeight()},methods: {filteredData() {// 过滤隐藏的数据let dataArray [];for (let i 0; i this.tableData1.length; i) {}//this.tableData1 dataArray},load1(tree, treeNode, resolve) {console.log(第一个展开 , tree)setTimeout(() {this.dataMap.set(tree.id, {tree,treeNode, resolve});let dataArray1 [];for (let i 0; i this.baConserveBoqList.length; i) {const item this.baConserveBoqList[i];item.deleted false;//通过id找父集idif (tree.id item.parentId) {let num 0;// 查找当前id在父集id中能匹配到数据 当前的hasChildren truefor (let j 0; j this.dataParentIdArr.length; j) {const getParentId this.dataParentIdArr[j];if (item.id getParentId) {num 1;}}if (num 1) {item.hasChildren true} else {item.hasChildren false}dataArray1.push(item);}}resolve(dataArray1)}, 100)},async load2(tree, treeNode, resolve) {console.log(刷新)setTimeout(async () {let dataArray1 [];for (let i 0; i this.baConserveBoqList.length; i) {const item this.baConserveBoqList[i];item.hide false//通过id找父集idif (tree item.parentId) {let num 0;for (let j 0; j this.dataParentIdArr.length; j) {const getParentId this.dataParentIdArr[j];if (item.id getParentId) {num 1;}}if (num 1) {item.hasChildren true} else {item.hasChildren false}dataArray1.push(item);}}resolve(dataArray1)if (!dataArray1.length){this.$set(this.$refs.multipleTable.store.states.lazyTreeNodeMap,tree,dataArray1)}}, 500)},toggleCollapse() {this.isCollapsed !this.isCollapsed;this.showArrow !this.showArrow;},getMyHeight() {this.$nextTick(() {let myHeight this.$getHeight.getMyHeight(window.getComputedStyle(this.$refs.selfSearch).height)this.selfHeight myHeight 20})},/** 提示全部*/checkedChange(val) {this.queryParams.queryChecked val;this.getList()},/** 查询养护工程量清单列表 */async getList() {this.$modal.loading(加载中...)await listBaConserveBoq(this.queryParams).then(response {this.baConserveBoqList response.data//console.log(数组长度 查询 this.baConserveBoqList.length)//let dataParentId [];//保存父类idthis.dataParentIdArr response.data.map(itemitem.parentId)//保存第一层let dataArray [];for (let i 0; i response.data.length; i) {const item response.data[i];if (item.parentId 0) {const isHasChildren this.dataParentIdArr.indexOf(item.id)-1item.hide falseitem.hasChildren isHasChildren;dataArray.push(item);}}this.tableData1 dataArray;this.$modal.closeLoading()}).catch(err {this.$modal.closeLoading()});},/** 转换养护工程量清单数据结构 */normalizer(node) {if (node.children !node.children.length) {delete node.children;}return {id: node.id,label: node.prName,children: node.children};},/** 展开/折叠操作 */toggleExpandAll() {this.refreshTable false;this.isExpandAll !this.isExpandAll;this.$nextTick(() {this.refreshTable true;});},//排序sortChange(column) {// 可以打印一下该函数的参数就明白了// 下面的if判断根据自己的需要些我后台设置的只能识别desc与ascif (column.order descending) {this.queryParams.isAsc desc} else {this.queryParams.isAsc asc}// 排序的字段传给后台this.queryParams.orderByColumn column.prop// 传入查询参数重新查询一次this.getList()},/** 查询部门下拉树结构 */getTreeselect() {listBaConserveBoq().then(response {this.baConserveBoqOptions [];const data {id: 0, prName: 顶级节点, children: []};data.children this.handleTree(response.data, id, parentId);this.baConserveBoqOptions.push(data);});},// 选中父节点时子节点一起选中取消select(selection, row) {const hasSelect selection.some(el {return row.id el.id})if (hasSelect) {if (row.children) {// 解决子组件没有被勾选到this.setChildren(row.children, true)}} else {if (row.children) {this.setChildren(row.children, false)}}},// 取消按钮cancel() {this.open false;this.reset();},// 表单重置reset() {this.form {id: null,parentId: null,ancestors: null,prName: null,num: null,status: 0,delFlag: null,createBy: null,createTime: null,updateBy: null,updateTime: null,prCode: null,prLevel: null,remarks: null,isEntity: null,};this.resetForm(form);},/** 搜索按钮操作 */handleQuery() {this.getList();},/** 重置按钮操作 */resetQuery() {this.resetForm(queryForm);this.handleQuery();},/** 新增按钮操作 */handleAdd(row) {this.reset();this.getTreeselect();if (row ! null row.id) {this.form.parentId row.id;}// listBaboq().then(response {// this.baboqOptions [];// this.baboqOptions this.handleTree(response.data, id, parentId, children, 0)// });this.form.status 0;this.form.isEntity 2;this.open true;this.title 添加养护工程量清单;},// 选择全部selectAll(selection) {// tabledata第一层只要有在selection里面就是全选const isSelect selection.some(el {const tableDataIds this.tableData.map(j j.id)return tableDataIds.includes(el.id)})// tableDate第一层只要有不在selection里面就是全不选const isCancel !this.tableData.every(el {const selectIds selection.map(j j.id)return selectIds.includes(el.id)})if (isSelect) {selection.map(el {if (el.children) {// 解决子组件没有被勾选到this.setChildren(el.children, true)}})}if (isCancel) {this.tableData.map(el {if (el.children) {// 解决子组件没有被勾选到this.setChildren(el.children, false)}})}},// 获取到选中的selectionChange(selection) {this.ids selection.map(item item.id)this.single selection.length ! 1this.multiple !selection.length},/** 修改按钮操作 */handleUpdate(row) {this.reset();this.getTreeselect();getBaConserveBoq(row.id).then(response {this.form response.data;this.open true;this.title 修改养护工程量清单;});},/** 提交按钮 */async submitForm() {this.$refs[form].validate(async valid {if (valid) {if (this.form.price ! this.form.price ! null this.form.price ! undefined) {if (isNaN(this.form.price) || parseFloat(this.form.price) 0) {this.$message.error(单价数值不合法!);return; // 值不是数字、小数或正数停止执行}}if (this.form.id ! null) {console.log(修改的id—— this.form.id)await updateBaConserveBoq(this.form).then(async response {this.msgSuccess(修改成功);this.open false;await this.getList();//根据上级数据//如果上级是顶层不校验if (this.form.parentId ! 0) {const storedData this.dataMap.get(this.form.parentId);await this.load2(this.form.parentId, storedData.treeNode, storedData.resolve)}});} else {addBaConserveBoq(this.form).then(async response {this.msgSuccess(新增成功);this.open false;await this.getList();//console.log(我是本级ID this.form.parentId) //上级id//新增不用 下面的if (this.form.parentId 0 || this.form.parentId null || this.form.parentId 0) return//刷新外部数据同级//刷新本节点直接把新数据的父类id 当作id然后使用let newId;//应该用 newId 的 父类id去数据库查询父类idawait selectParentIdById(this.form.parentId).then(async response { //父类id就是我的id用我的id去寻找 我的 父类id//console.log(返回的是JSON.stringify(response))newId response.data //这是我的父类id 也就是上级的})//console.log(调用上级刷新本级 的 id newId)//上级id不可能等于0//如果 是第一层新增不用刷新本层if (newId ! 0) {//根据上级id刷新 上级 id 影响本级const storedData3 this.dataMap.get(newId);//刷新本级await this.load2(newId, storedData3.treeNode, storedData3.resolve)}//刷新内部的数据//判断是否已经展开const storedData4 this.dataMap.get(this.form.parentId); // 判断自己是否展开if (storedData4 ! storedData4 ! null storedData4 ! undefined) { //如果没有数据则证明自己没有展开//console.log(刷新内部数据)//如果有数据展开了刷新下级数据await this.load2(this.form.parentId, storedData4.treeNode, storedData4.resolve)}// console.log(this.tableData1,data1)});}}});},/** 删除按钮操作 */async handleDelete(row) {await this.$confirm(是否确认删除?, 警告, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(async () {await delBaConserveBoq(row.id);}).then(async () {await this.getList();const storedData4 this.dataMap.get(row.parentId);storedData4.tree.hasChildren !!storedData4.treeNode.children.length// console.log(storedData4,storedData4)// this.await this.load2(row.parentId, storedData4.treeNode, storedData4.resolve);await this.msgSuccess(删除成功);});},}
};
/scriptstyle scoped
.spec-dialog /deep/ .el-dialog {height: 55% !important;
}.deleted {display: none;
}
/style
