账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue数据更新了,视图没有更新,但是在不刷新页面的情况下子组件中调用created,视图就更新了,但是一刷新就又不更新了
    36
    0

    功能是点击多选框,切换表格的表头数据,在页面中的data已经定义好了,三个不同的表头,
    数据是更新了,就是试图更新的是不完整的,比如有10列数据,展示出来就只有5列,诡异的是,不刷新页面的时候,我只要在子组件的created中随便打印个什么,试图就更新正常,但是一刷新就又缺失了。
    我已经试过了this.$set,不行。

    <template>
    <!--页面中的选择器-->
             <el-select v-model="sectionValue" placeholder="查看计划" @change="changeData" >
                  <el-option
                    v-for="item in dateSection"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
    <!--表格-->
            <table :columns="columnsData"
                       :columnsTable="columnsTier"
                       :table="dataSource">
            </table>
    </template>
    <script>
    data(){
        return {
            columns:[
                {
                    name:1,
                    age:2,
                },
                {
                    tierData:{
                       text:'多级表头',
                       content:[
                           { 
                               name:1,
                               age:2,
                           }
                       ] 
                    }
                    
                    
                },
            ],
            mColumns:['结构和columns相同,就是少一个多级表头的对象'],
            yColumns:['结构和columns相同,就是少一个多级表头的对象'],
            sColumns:['结构和columns相同,就是少一个多级表头的对象'],
        }
    },
     computed:{
          columnsData(){
            return this.columns.filter(function(v){
              if(v.text !== undefined){
                return v
              }
            })
          },
          columnsTier(){
            return this.columns.filter(function(v){
              if(v.tierData !== undefined){
                return v
              }
            })
          },
    }
    methods:{
          changeData(value){
            console.log(value);
            if(!value){
              alert(0);
              return;
            }
            else if(value === '当月计划'){
              alert(1)
              this.columns=this.mColumns
            }else if(value === '当季计划'){
              alert(2)
               this.columns=this.sColumns
            }else if(value === '当年计划'){
              alert(3)
              this.columns=this.yColumns
          },
    }
    </script>

    子组件

    子组件:
    <template>
    //部分视图代码不全,使用遍历的方式,将数据循环出来
    <el-table-column v-for="(list,index) in columns"
                  :key="list.text"
                  :label="list.text"
                  :prop="list.dataIndex">
              <template scope="scope">
                  {{scope.row[list.dataIndex]}}
              </template>
     </el-table-column>
    </template>
    <script>
    Props:{
        // 接收父组件数据
          columns: {
            type: Array,
            default: function () {
              return []
            }
          },
          columnsTable: {
            type: Array,
            default: function () {
              return []
            }
          },
    }
    created(){
          console.log(this.columns); //打印出来是新数据,单数不更新
          console.log(this.columnsTable);//打印出来是新数据,单数不更新
    },
    </script>
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 若相守︽请相惜 普通会员 1楼

      这种情况可能是由于以下原因:

      1. 模板更新与组件通信问题:你可能需要在Vue组件中监听模板的更新,然后在数据更新后更新视图。但是,这可能会导致在页面刷新后视图的更新没有生效。

      解决方法:在Vue组件中监听模板的更新,然后在数据更新后更新视图。可以使用Vue的watch方法来监听模板的更新。

      1. 父组件的更新操作影响子组件:如果你的父组件有更新操作,可能会导致子组件的更新不生效。你需要确保你的父组件的更新操作不会影响子组件的更新。

      解决方法:确保你的父组件的更新操作不会影响子组件的更新。可以使用Vue的beforeDestroyafterDestroy方法来管理子组件的生命周期。

      1. 模板数据与子组件数据的依赖问题:你可能需要确保模板数据与子组件数据的依赖关系正确。例如,你可能需要在子组件中获取模板数据,然后使用这些数据来更新视图。

      解决方法:确保模板数据与子组件数据的依赖关系正确。可以使用Vue的propsv-model属性来管理数据的依赖关系。

    更多回答
    网站公告
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部