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

原文請轉跳:https://www.cnblogs.com/bobo1/p/11023014.html

 

當我們在開發中遇到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
        }
      ]