vue el-table 自适应表格内容宽度

摘要:
由于表头和列是分开渲染的,通过el-table设置fit属性,只能撑开表头,但是没有办法根据列的内容去适应宽度。网上找了一些使用根据表格内容计算表头宽度的文章,记个笔记。代码逻辑是通过vue的watch监控表格的数据data,计算每列的内容和表头的最大宽度,计算的时候把表格内容使用span标签包裹,然后计算span标签的宽度width:px,然后再加上表格的内边距,就得到了列的最大宽度.前端˂el-table-columnv-for="fruitinformThead":key="fruit.prop":label="fruit.label":width="fruit.width"˂!

由于表头和列是分开渲染的,通过el-table 设置fit属性,只能撑开表头,但是没有办法根据列的内容去适应宽度。网上找了一些使用根据表格内容计算表头宽度的文章,记个笔记。

代码逻辑是通过vue 的watch 监控表格的数据data,计算每列的内容和表头的最大宽度,计算的时候把表格内容使用span标签包裹,然后计算span标签的宽度width:px,然后再加上表格的内边距,

就得到了列的最大宽度.

前端

<el-table :key="key" :data="data"  v-loading="loading"   >
      <el-table-column v-for="fruit in formThead":key="fruit.prop":label="fruit.label":width="fruit.width"  <!-- 设置宽度 -->show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row[fruit.prop] }}
        </template>
    </el-table-column>
</el-table>

<script>const fields =[
    {label:"ID", prop:"id"},
    {label:"资产名称", prop:"asset_name"},
    {label:"OA工单号", prop:"oa_jon_num"},
    {label:"IP", prop:"ipaddress"},
    {label:"SN号", prop:"sn"},
    {label:"CPU(核)", prop:"cpu"},
    {label:"内存(G)", prop:"memory"},
    {label:"存储(G)", prop:"disk"},
    {label:"资产类型", prop:"device_type_name"},
    {label:"资产状态", prop:"device_status_name"},
    {label:"所属环境", prop:"device_env_type_name"},
    {label:"房间", prop:"root"},
    {label:"设备用途", prop:"purpose"},
    {label:"机架位", prop:"rack_position"},
    {label:"U位", prop:"u_position"},
    {label:"所属IDC机房", prop:"idc_name"},
    {label:"设备型号", prop:"equipment_type"},
    {label:"采购日期", prop:"purchase_date"},
    {label:"所属系统类别", prop:"sys_name"},
    {label:"所属二级产品线", prop:"second_name"},
    {label:"所属物理机", prop:"parent_asset_name"},
    {label:"创建时间", prop:"create_at"}
]


export default{
    data() {
        return{
            url: "asset",
            key: 1, //table key
            formThead: fields, //默认表头 Default header
data: []
        };
    },

    methods: {
        /**
        * 遍历列的所有内容,获取最宽一列的宽度
        * @param arr
        */getMaxLength (arr) {
          return arr.reduce((acc, item) =>{
            if(item) {
              let calcLen = this.getTextWidth(item)
              if (acc <calcLen) {
                acc =calcLen
              }
            }
            returnacc
          }, 0)
        },
        /**
         * 使用span标签包裹内容,然后计算span的宽度 width: px
         * @param valArr
         */getTextWidth(str) {
          let width = 0;
          let html = document.createElement('span');
          html.innerText =str;
          html.className = 'getTextWidth';
          document.querySelector('body').appendChild(html);
          width = document.querySelector('.getTextWidth').offsetWidth;
          document.querySelector('.getTextWidth').remove();
          returnwidth;
        }
    },

    watch: {
        /**
         * 监控表格的数据data,自动设置表格宽度
         * @param valArr
         */data(valArr) {
            const _this = this
            this.formThead = fields.map(function(value) {
                const arr = valArr.map(x => x[value.prop])  //获取每一列的所有数据
                arr.push(value.label)  //把每列的表头也加进去算
                value.width = _this.getMaxLength(arr) + 20 //每列内容最大的宽度 + 表格的内间距(依据实际情况而定)
                returnvalue
            })
        }
    }
}
</script>

后端返回的表格数据结构

[
    {
        asset_name: "交换机"cpu: null
        create_at: "2019-12-03"device_env_type_id: 1device_env_type_name: "准生产环境"device_status_id: 1device_status_name: "上架"device_type_id: 1device_type_name: "物理服务器"disk: null
        equipment_type: null
        id: 10idc: null
        ipaddress: null
        latest_date: null
        memory: null
        oa_jon_num: null
        parent_asset: null
        purchase_date: null
        purpose: null
        rack_position: null
        root: null
        second_business: null
        sn: null
        switch: null
        sys_type: null
    },
    ...
    ...
]

免责声明:文章转载自《vue el-table 自适应表格内容宽度》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇websocket之四:WebSocket 的鉴权授权方案数据结构与算法80道下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

学习vue之windows下安装live-server 超级详细篇

最近项目要求用vue2.0所以开始着手学习。 前期准备: 下载Node.js 地址:http://nodejs.cn/download/ 选择自己对应的版本,我下载的是.msi 64位的 然后就双击下一步吧。完成之后,记得配置环境变量(不知道环境变量在哪里的 先拉到最下面) 因为我把Node.js安装到了D盘nodeJs目录下。 呼出cmd,命令走起 ,...

Nodejs介绍、安装及简单使用

打开Nodejs英文网:https://nodejs.org/en/ 中文网:http://nodejs.cn/ 我们会发现这样一句话: 翻译成中文如下: Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。 Node.js 的包管理器...

jsTree通过AJAX从后台获取数据

页面代码: <div id="MenuTree"></div> javascript代码: $(document).ready(function($) { InitMenuTree(); }); functionInitMenuTree() { $('#MenuTree').data('jstree', false);...

Element UI Tree 树形控件(可选择),如果子级有值,父级禁用的两种操作

总结了两种方法: 一、父级的复选框禁用   <el-tree :data="deptOptions" node-key="id" :props="defaultProps" :expand-on-click-node="true" :filter-node-method="filterNode" :c...

15、高可用 PXC(percona xtradb cluster) 搭建

安装环境: 集群名 pxc_lk 节点1: 192.168.1.20 节点2: 192.168.1.21 节点3: 192.168.1.22 所有节点安装 wgethttp://www.percona.com/redir/downloads/XtraBackup/LATEST/binary/redhat/6/x86_64/percona...

【nodejs】 文件系统(fs) 之读写文件

//写入文件 var data = "hello world"; fs.writeFile('c:\a.txt', data, 'ascii', function(err) { if(err) { console.log('写入文件失败'); } else{ console.log('保存成功, 赶紧去看看...