乾貨： 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中可以看到是有返回數據的有圖爲證
死活渲染不上。
最後追查兩天 ：發現是因爲兩個列的切換判斷條件與數據加載剛好寫反了