干货: network返回数据了,但是前端table就是没有加载到。
此文章讲述的不是技术原因,而是业务或者是思路问题:两张表的切换时,数据加载和判断条件刚好交叉了
即 :加载了table1 的数据,却开启了table2的显示
加载了table2的数据,却开启了table1的显示,
导致的展示就是有问题,而且技术上感觉没有问题
以此记录自己的傻X行为
项目需要
左边有个tree,根据点击的节点是不是子节点,邮编切换显示不同的内容;
<!-- * @Authoer: liuhua * @Description: 通用参数集 * @Date 2018年4月18日10:12:16 * @Modified By: --> <div id="generalDataSet"> <el-row :gutter="10"> <el-col :span="5"> <el-row type="flex" class="row-bg" justify="end"> <el-col :span="6"><el-button icon="plus" @click="treeDialogVisible=true">新增</el-button></el-col> <el-col :span="6"> <el-button icon="search" @click="treeFilter=!treeFilter">查找</el-button></el-col> </el-row> <el-row :gutter="10"> <el-input placeholder="模糊搜索" v-model="filterText" v-show="treeFilter"></el-input> </el-row> <yufp-ext-tree ref="parameterSetTree" @node-click="nodeClickFn" :show-checkbox="false" :height="height" :data-url="treeUrl" data-id="nodeId" data-label="nodeName" :render-content="renderContent" data-pid="upTreeId" style="margin-top: 10px;" :highlight-current="true" :filter-node-method="filterNode"></yufp-ext-tree> </el-col> <el-col :span="19" v-show="level=='2'"> <el-form-q :field-data="pointQueryFields" :buttons="pointQueryButtons"></el-form-q> <div class="yu-toolBar"> <el-button-group> <el-button icon="plus" @click="pointAddFn" >新增</el-button> <el-button icon="edit" @click="modifyFn" >修改</el-button> <el-button icon="yx-bin" @click="pointDeleteFn" >删除</el-button> </el-button-group> </div> <el-table-x ref="pointTable" :checkbox="true" :data-url="contrDataUrl" :table-columns="pointTableColumns" @custom-row-click="rowClick"> </el-table-x> </el-col> <el-col :span="19" v-show="level=='1'"> <el-form-q :field-data="pointQueryFields" :buttons="pointQueryButtons"></el-form-q> <div class="yu-toolBar"> <el-button-group> <el-button icon="plus" @click="pointAddFn" >新增</el-button> <el-button icon="edit" @click="modifyFn" >修改</el-button> <el-button icon="yx-bin" @click="pointDeleteFn" >删除</el-button> </el-button-group> </div> <el-table-x ref="Table2" :checkbox="true" :data-url="contrDataUrl" :table-columns="pointTableColumns2" @custom-row-click="rowClick"> </el-table-x> </el-col> </el-row> <el-dialog-x :title="viewTitle[viewType]" :visible.sync="treeDialogVisible"> <el-form-x ref="treeForm" :group-fields="treeFields" :buttons="treeFormButtons" :disabled="treeFormDisabled" label-width="120px"></el-form-x> </el-dialog-x> <el-dialog-x :title="viewTitle[viewType]" :visible.sync="dialogVisible"> <el-form-x ref="pointForm" :group-fields="pointFields" :buttons="pointFormButtons" :disabled="formDisabled" label-width="120px"></el-form-x> </el-dialog-x> <el-dialog-x :title="viewTitle[viewType]" :visible.sync="dialogVisible"> <el-form-x ref="pointForm" :group-fields="pointFields" :buttons="pointFormButtons" :disabled="formDisabled" label-width="120px"></el-form-x> </el-dialog-x> </div>
/** * @Description: 通用数据集 * @Date 2018-4-18 10:12:51 * @Authoer: liuhua * @Modified By: */ define(function (require, exports) { exports.ready = function (hashCode, data, cite) { yufp.lookup.reg("HTTP_METHOD_TYPE"); var vm = yufp.custom.vue({ el: "#generalDataSet", data: function () { var me = this; return { filterText: '', treeFilter: false, height: yufp.custom.viewSize().height - 20, viewType: 'DETAIL', isChildNode: false, treeDialogVisible: false, treeFormDisabled:false, funcId: '', level: '', liu: true, viewTitle: yufp.lookup.find('CRUD_TYPE', false), formDisabled: false, dialogVisible: false, createCheck: !yufp.session.checkCtrl('add'), //新增按钮控制 modifyCheck: !yufp.session.checkCtrl('modify'), //修改按钮控制 deleteCheck: !yufp.session.checkCtrl('delete'), //删除按钮控制 treeUrl: backend.adminService + "/api/adminsmrescontr/treequery", contrDataUrl: backend.adminService + "/api/adminsmrescontr/getcontrinfo", treeDataUrl:"/api/test/gettree", pointQueryFields: [ {placeholder: '控制操作名称', field: 'contrName', type: 'input'}, {placeholder: '控制操作代码', field: 'contrCode', type: 'input'}, {placeholder: '控制操作URL', field: 'contrUrl', type: 'input'} ], pointQueryButtons: [ { label: '查询', op: 'submit', type: 'primary', icon: "search", click: function (model, valid) { if (valid) { var param = {condition: JSON.stringify(model)}; me.$refs.pointTable.remoteData(param); } } }, {label: '重置', op: 'reset', type: 'primary', icon: 'yx-loop2'} ], pointTableColumns: [ {label: '序号', prop: 'contrCode', sortable: true, resizable: true}, {label: '变量名', prop: 'contrName', sortable: true, resizable: true, showOverflowTooltip: true}, { label: '变量值', prop: 'methodType', sortable: true, resizable: true, dataCode: 'HTTP_METHOD_TYPE' }, {label: '描述', prop: 'lastChgName', sortable: true, resizable: true} ], pointTableColumns2: [ {label: '变量名', prop: 'contrName', sortable: true}, {label: '描述', prop: 'lastChgName', sortable: true} ], pointFields: [{ columnCount: 2, fields: [ { field: 'contrName', label: '变量名', rules: [ {required: true, message: '必填项', trigger: 'blur'}, {max: 90, message: '输入值过长', trigger: 'blur'}, {validator: yufp.validator.trim, message: '输入项首尾有空格', trigger: 'blur'}, {validator: yufp.validator.speChar, message: '输入信息包含特殊字符', trigger: 'blur'} ] }, { field: 'contrCode', label: '变量值', rules: [ {required: true, message: '必填项', trigger: 'blur'}, {max: 45, message: '输入值过长', trigger: 'blur'}, {validator: yufp.validator.trim, message: '输入项首尾有空格', trigger: 'blur'}, {validator: yufp.validator.speChar, message: '输入信息包含特殊字符', trigger: 'blur'} ] }, { field: 'contrCode', label: '描述', type: "textarea", rules: [ {required: true, message: '必填项', trigger: 'blur'}, {max: 45, message: '输入值过长', trigger: 'blur'}, {validator: yufp.validator.trim, message: '输入项首尾有空格', trigger: 'blur'}, {validator: yufp.validator.speChar, message: '输入信息包含特殊字符', trigger: 'blur'} ] } ] }], // tree变量集的新增弹出框 treeFields: [{ columnCount: 1, fields: [ { field: 'contrName', label: '变量集名称', rules: [ {required: true, message: '必填项', trigger: 'blur'}, {max: 90, message: '输入值过长', trigger: 'blur'}, {validator: yufp.validator.trim, message: '输入项首尾有空格', trigger: 'blur'}, {validator: yufp.validator.speChar, message: '输入信息包含特殊字符', trigger: 'blur'} ] }, {field: 'contrCode', label: '描述', type: "textarea"} ] }], // tree变量集的新增弹出框的按钮 treeFormButtons: [ { label: '取消', type: 'primary', icon: "yx-undo2", hidden: false, click: function (model) { me.dialogVisible = false; } }, { label: '保存', type: 'primary', icon: "check", hidden: false, op: 'submit', click: function (model) { me.saveTreeCreateFn(); } }, ], pointFormButtons: [ { label: '取消', type: 'primary', icon: "yx-undo2", hidden: false, click: function (model) { me.dialogVisible = false; } }, { label: '保存', type: 'primary', icon: "check", hidden: false, op: 'submit', click: function (model) { me.saveCreateFn(); } }, { label: '保存', type: 'primary', icon: "check", hidden: false, op: 'submit', click: function (model) { me.saveEditFn(); } } ] } }, methods: { //左侧树节点点击事件,点击业务功能节点查询关联控制点 nodeClickFn: function (nodeData, node, self) { var _this = this; _this.isChildNode = false; _this.funcId = nodeData.id; var param = { condition: JSON.stringify({ funcId: _this.funcId ? _this.funcId : null }) }; if (node.level == "1") { _this.$refs.Table2.remoteData(param); _this.level = '1'; } else { _this.isChildNode = true; _this.$refs.pointTable.remoteData(param); _this.level = '2'; } }, //树的过滤事件 filterNode(value, data) { if (!value) return true; return data.label.indexOf(value) !== -1; }, //树节点的新增保存 saveTreeCreateFn: function () { var _this = this; delete _this.$refs.treeForm.formModel.contrId; _this.$refs.treeForm.validate(function (valid) { if (valid) { _this.$refs.treeForm.formModel.lastChgUsr = yufp.session.userId; _this.$refs.treeForm.formModel.funcId = _this.funcId; yufp.service.request({ method: 'GET', url: backend.adminService + "/api/adminsmrescontr/ifcoderepeat", data: { funcId: _this.$refs.treeForm.formModel.funcId ? _this.$refs.treeForm.formModel.funcId : null, contrCode: _this.$refs.treeForm.formModel.contrCode ? _this.$refs.treeForm.formModel.contrCode : null }, callback: function (code, message, response) { if (response.data.length > 0) { _this.$message({ message: '此业务功能已包含该控制操作代码', type: 'warning'
于是建立了两列,用v-show 切换
切记 不可以用v-if 因为v-if是惰性的,也就是相当于切换的时候是没有的dom节点中根本就没有,所以切换时报undefined异常。
我遇到的问题是很奇妙的,切换的时候,数据显示不正确,而且样式也变得很奇怪,(因为表格的列数不一样所致)
network中可以看到是有返回数据的有图为证
死活渲染不上。
最后追查两天 :发现是因为两个列的切换判断条件与数据加载刚好写反了