干货： 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中可以看到是有返回数据的有图为证
死活渲染不上。
最后追查两天 ：发现是因为两个列的切换判断条件与数据加载刚好写反了