[フロントエンド学習メモ 3 - ボタンが選択されていない、グローバル変数、テーブルが表示されていない、変数値を表示]

フロントエンド学習メモ3、カバレッジ

ボタンが選択されていない場合は、他のコンポーネントで覆われている可能性があります。開発者ツールを使用してコンポーネントを選択し、スタイルに Z インデックスを追加するか、position を使用して相対位置を絶対位置に変更することができます。

 .back {
    
    
    z-index: 99999999;
    position: absolute;
    right: 40px;
    top: 95px;
  }

el-option フィルター ボックスにはラベルは表示されませんが、値は表示されます。また、一部の列フィルター ボックスにはラベルと値があります。
フィルターボックスの表示に問題があります

グローバル変数を書き込むには、まず、ストアフォルダー内のindex.jsファイルに保存する必要があるグローバル変数を書きます。

import Vue from 'vue'
import Vuex from 'vuex'


Vue.use(Vuex)

const  store =new Vuex.Store(
    {
    
    
        state:{
    
    
            name:"",
            index:0,
            schoolOption:[],
            studentId:'',
            classId:'',
            className:'',
            schoolId:'',
            teacherOP:[],
            adminCourseRowData:{
    
    },
            questionDetail:{
    
    },
            isComplete:false,
            tabName:'first',
        }
    }
)
export default store

プログラムのメインファイルmain.jsにストアを書き込みます

import store from './store'
Vue.component('downloadExcel', JsonExcel)
new Vue({
    
    
    router,
    store,
    render: function (h) {
    
    
        return h(App)
    }
}).$mount('#app')

App.vue で更新を書き込むときにグローバル変数を保存する

    // 在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem('store')) {
    
    
      this.$store.replaceState(
          Object.assign(
              {
    
    },
              this.$store.state,
              JSON.parse(sessionStorage.getItem('store'))
          )
      )
    }
    window.addEventListener('beforeunload', () => {
    
    
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    })
  }
}
</script>

最後に、変数をログイン ページまたは開始ページに保存することを忘れないでください。

this.$store.state.schoolId = this.ruleForm.schoolId;

これの使い方。

@click では、これを変数の前に追加する必要はありません。

el-table フォームが表示されない

合計が正しく書かれていないと表示されないなど、エルページネーションの要素に注意してください。
したがって、コピーおよび変更する場合は、検索と置換を使用して漏れを防ぐことができます。

変数値を表示する

ブラウザコンソールでは、 this.variable は直接未定義になります。
コンソールに変数値を表示するには、デバッガーを停止する必要があります。

おすすめ

転載: blog.csdn.net/weixin_47227105/article/details/128536135