vue vue的table表格自适应_vue table autoHeight(vue 表格自动高度)

小编主要做的都是后台管理系统，采用布局多为头部、左侧菜单栏，右侧内容，头部和菜单栏固定位置，内容部分如果很长就会出现滚动条(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)