在vue中使用elementUI餓了麼框架使用el-tabs，切換Tab如何實現實時加載，以及el-table表格使用總結

當咱們在開發中遇到tab切換，這時候用el的el-tabs感受很方便

但當我在把代碼都寫完後，發現一個問題就是頁面打開時

雖然咱們只能看見當前一個tab頁，可是vue會幫你把你寫的全部tab頁的內容都渲染出來了，只是其餘的隱藏了，同時其餘tab的js也都走了一邊，當你點擊tab時js就不會再去請求後臺

這種機制會形成一個問題，就是若是每一個tab頁的數據都過大的時候，可能就會致使首次打開頁面卡頓現象，同時若是數據庫數據在實時發生變化的話，好比你一分鐘前打開的這個頁面，看的是tab1的內容，看了1分鐘後我想看tab2的內容，但此時tab2的內容後臺數據庫已經發生變化了，你能看到的只是1分鐘前的數據，那該怎麼解決這個問題呢？

首先一開始一次加載全部tab的代碼是這樣的↓

<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
      <el-tab-pane label="待處理" name="first">
        <processed/>  <!--這裏是自定義的子模塊，也就是自定義組件-->
      </el-tab-pane>
      <el-tab-pane label="已處理" name="second">
        <un-processed/>
      </el-tab-pane>
</el-tabs>

 

這時候v-if的做用就能夠發揮出來了，當v-if的值爲false時vue是不會去渲染該標籤下的內容的

那咱們就把tabs下的子模塊標籤上加v-if，一開始只設置其中一個爲true其餘都爲false，當點擊tab切換時去改變v-if的值，代碼以下↓

<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
      <el-tab-pane label="待處理" name="first" :key="'first'">
        <processed v-if="isFirst"/>
      </el-tab-pane>
      <el-tab-pane label="已處理" name="second" :key="'second'">
        <un-processed v-if="isSecond"/>
      </el-tab-pane>
    </el-tabs>

js的代碼↓

<script>
import Breadcrumb from '@/components/Breadcrumb'
import Processed from './processed'
import UnProcessed from './unprocessed'
export default {
  components: {
    Breadcrumb,
    Processed,
    UnProcessed
  },
  data() {
    return {
      // 默認第一個Tab
      activeName: 'first',
      isFirst: true,
      isSecond: false
    }
  },
  methods: {
    handleClick(tab) {
      if (tab.name === 'first') {
        this.isFirst = true
        this.isSecond = false
      } else if (tab.name === 'second') {
        this.isFirst = false
        this.isSecond = true
      }
    }
  }
}
</script>

這樣就能夠完美解決上面的問題，首次加載頁面只會渲染其中一個tab的內容，同時點擊tab切換時頁面從新渲染頁面，good！

 

---------------------------------------------------------------------------------------

el-table中動態表頭的寫法

其實就是一個v-for循環，根據後臺返回數據生成對應表頭

<el-table-column v-for="item in 
            tableHeader"
              :key="item.key"
              :prop="item.key"
              :label="item.name"
              :formatter="item.formatter"
              align="center"
              show-overflow-tooltip></el-table-column>

js裏的數據綁定：

tableHeader: [
        {
          name: '手機號碼',
          key: 'partnerPhone'
        },
        {
          name: '姓名',
          key: 'partnerName'
        },
        {
          name: '職位',
          key: 'position',
          formatter: this.posFormatter
        },
        {
          name: '團隊',
          key: 'teamName'
        },
        {
          name: '代理商',
          key: 'agentName'
        },
        {
          name: '狀態',
          key: 'state',
          formatter: this.stFormatter
        }
      ]