element-ui 表格数据不显示,network返回数据了,但是前端table就是没有加载到。

干货: 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中可以看到是有返回数据的有图为证


死活渲染不上。

最后追查两天  :发现是因为两个列的切换判断条件与数据加载刚好写反了

以此记录自己的傻X行为。




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值