快捷導(dǎo)航

ElementUI實(shí)現(xiàn)el-table列寬自適應(yīng)的代碼詳解

更新時(shí)間：2024年01月25日 10:01:35 作者：香菜啵子欸

這篇文章給大家介紹了ElementUI實(shí)現(xiàn)el-table列寬自適應(yīng)的詳細(xì)步驟,文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

一、安裝插件

npm install v-fit-columns --save

二、入口文件引入插件

import Vue from 'vue';
import Plugin from 'v-fit-columns';
Vue.use(Plugin);

三、示例

添加v-fit-columns；
添加class-name="leave-alone"表示這一列不受v-fit-columns影響（即不進(jìn)行自適應(yīng)）；

 <template>
    <el-table
     v-fit-columns
      ref='table'
      :data="tableData"
      style="width: 100%">
      <el-table-column
      class-name="leave-alone"
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
      class-name="leave-alone"
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1517 弄'
          }]
        }
      }
    }
  </script>

四、注意點(diǎn)

使用v-fit-columns后可能導(dǎo)致表頭錯(cuò)位
解決辦法：

// 使用
this.$nextTick(() => {
   this.$refs.table.doLayout(); // 解決表格錯(cuò)位
});
// 或者
this.$forceUpdate();
// 自行實(shí)驗(yàn)下是否能解決表頭錯(cuò)位問題

使用v-fit-columns后使用fixed可能導(dǎo)致表頭錯(cuò)位；
解決辦法：
不使用fixed，其他辦法自行查閱資料；

到此這篇關(guān)于ElementUI實(shí)現(xiàn)el-table列寬自適應(yīng)的代碼詳解的文章就介紹到這了,更多相關(guān)ElementUI el-table列寬自適應(yīng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue中添加mp3音頻文件的方法
本篇文章主要介紹了vue中添加mp3音頻文件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-03-03
vue、uniapp中動(dòng)態(tài)添加綁定style、class?9種實(shí)現(xiàn)方法
這篇文章主要介紹了vue、uniapp中動(dòng)態(tài)添加綁定style、class?9種方法實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-09-09
Vue3學(xué)習(xí)筆記之依賴注入Provide/Inject
provide和inject可以實(shí)現(xiàn)嵌套組件之間進(jìn)行傳遞數(shù)據(jù),這兩個(gè)函數(shù)都是在setup函數(shù)中使用的,下面這篇文章主要給大家介紹了關(guān)于Vue3學(xué)習(xí)筆記之依賴注入Provide?/?Inject的相關(guān)資料,需要的朋友可以參考下
2023-05-05
解決前后端分離 vue+springboot 跨域 session+cookie失效問題
這篇文章主要介紹了前后端分離 vue+springboot 跨域 session+cookie失效問題的解決方法，解決過程也很簡單 ,需要的朋友可以參考下
2019-05-05
vue 之 .sync 修飾符示例詳解
這篇文章主要介紹了vue 之 .sync 修飾符的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值 ,需要的朋友可以參考下
2018-04-04
Vue中mixins混入的介紹和使用詳解
mixins（混入）是一種分發(fā)?Vue?組件中可復(fù)用功能的非常靈活的方式，這篇文章主要為大家介紹了mixins混入的介紹和使用，需要的可以參考下
2023-08-08
vue-cli3+echarts實(shí)現(xiàn)漸變色儀表盤組件封裝
這篇文章主要為大家詳細(xì)介紹了vue-cli3+echarts實(shí)現(xiàn)漸變色儀表盤組件封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
Vue中@keyup.enter?@v-model.trim的用法小結(jié)
這篇文章主要介紹了Vue中@keyup.enter?@v-model.trim的用法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-12-12
VUE3學(xué)習(xí)教程之全局組件和局部組件
組件（Component）是Vue.js最強(qiáng)大的功能之一,組件可以擴(kuò)展?HTML?元素,封裝可重用的代碼,這篇文章主要給大家介紹了關(guān)于VUE3學(xué)習(xí)教程之全局組件和局部組件的相關(guān)資料,需要的朋友可以參考下
2022-01-01
django中使用vue.js的要點(diǎn)總結(jié)
在本篇文章里小編給各位整理了關(guān)于django中使用vue.js需要注意的地方以及相關(guān)知識(shí)點(diǎn)，需要的朋友們跟著學(xué)習(xí)參考下。
2019-07-07