小編主要做的都是后臺管理系統，采用布局多為頭部、左側菜單欄，右側內容，頭部和菜單欄固定位置，內容部分如果很長就會出現滾動條(iview和element都提供了布局容器)，后臺管理系統多為表格的增刪改查，so，要需要表格自動高度，提供兩種方式(純代碼分享)：

1)施加在表格自身

1.普通vue項目：

根目錄新建directive里面三個文件(都有所刪減)：

directive里面三個文件

autoHeightParams.js

/**

* @functionName: js

*@param: allScreen--全屏

*@param: table --右側全屏表

*@param: table_S_OneLine --右側表上有單獨一行搜索

*@param: table_S_TwoLine --右側表上有單獨兩行行搜索

*@param: table_S_OneLine_B_OneLine --右側表上有一行行搜索+一行按鈕

*@param: table_S_TwoLine_B_OneLine --右側表上有兩行行搜索+一行按鈕

*@description:

*@author: 王建鋒

*@date:

*@version: V1.0.0

*/

export default {

//全屏

allScreen: {

allHeight: 0,

precent: 100,

diffHeight: 126,

overflowX: 'hidden'

},

//右側全屏表

table: {

allHeight: 0,

precent: 100,

diffHeight: 380

},

//右側表上有單獨一行搜索

table_S_OneLine: {

allHeight: 0,

precent: 100,

diffHeight: 295

},

//右側表上有單獨兩行行搜索

table_S_TwoLine: {

allHeight: 0,

precent: 100,

diffHeight: 345

},

//右側表上有一行行搜索+一行按鈕

table_S_OneLine_B_OneLine: {

allHeight: 0,

precent: 100,

diffHeight: 360

},

//右側表上有兩行行搜索+一行按鈕

table_S_TwoLine_B_OneLine: {

allHeight: 0,

precent: 100,

diffHeight: 410

},

table_Home_Small: {

allHeight: 0,

precent: 100,

diffHeight: 810

},

table_Model: {

allHeight: 0,

precent: 100,

diffHeight: 700

}

}

directives.js

const directives = {

autoHeight: {

inserted: (el, binding) => {

el.opt = {

...{

allHeight: 0,

precent: 100,

diffHeight: 100

},

dataName: binding.arg,

...binding.value,

...binding.modifiers

}

el.autoHeightHandle = function (el, binding) {

let allH = el.opt.allHeight === 0 ? window.innerHeight : el.opt.allHeight

let elH = (allH * el.opt.precent / 100) - el.opt.diffHeight

if (!el.opt.vm && el.opt.dataName) {

console.error('autoHeight:定義了dataName則必須同時定義vm參數')

return

}

if (el.opt.vm && el.opt.dataName) el.opt.vm[el.opt.dataName] = elH

if (el.opt.style === true) el.style = `height:${elH}px;overflow-y:auto;`

}.bind(null, el, binding)

window.addEventListener('resize', el.autoHeightHandle)

el.autoHeightHandle()

},

update: (el, binding) => {

el.opt = {

...{

allHeight: 0,

precent: 100,

diffHeight: 100

},

dataName: binding.arg,

...binding.value,

...binding.modifiers

}

el.autoHeightHandle()

},

unbind: (el) => {

if (el && el.autoHeightHandle) window.removeEventListener('resize', el.autoHeightHandle)

}

}

}

export default directives

index.js

import directive from './directives'

const importDirective = Vue => {

* 自動高度 v-auto-height="options"

*/

Vue.directive('auto-height', directive.autoHeight)

}

export default importDirective

在main.js中

import importDirective from '@/directive'

/**

* 注冊指令

*/

importDirective(Vue)

2.使用nuxt的

把index.js改為

import directive from './directives'

export default directive

在plugins文件夾下新建auto-height.js

import Vue from 'vue'

import directives from '@/components/public/parts/directives'

Vue.directive('auto-height', directives.autoHeight)

然后就是使用在你寫的表格里標簽里(不管element、iview或者自己在他倆基礎上封裝的也好)直接加

v-auto-height:tableHeight="{vm:this, diffHeight:ahTable.diffHeight}"

:height="tableHeight"

試例為element表格再次封裝的表格插件

試例為iview表格再次封裝的表格插件

然后引入

import autoHeightParams from '@/components/public/parts/directives/autoHeightParams'

在data中寫入

tableHeight: null,

ahTable: autoHeightParams.table_S_OneLine_B_OneLine//這里寫autoHeightParams.js里面預設好的高度變量

就OK了

2)

總結

以上是生活随笔為你收集整理的vue vue的table表格自适应_vue table autoHeight(vue 表格自动高度)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。