iview 2.x table 设置固定列后 中间留白的问题

iview table 设置固定列后 部分列不设置宽度怎么保持一致

使用的是iview 2的版本 已经不维护的ui ,看网上写的可以设置minWidth,我这边使用就是不生效;或者可以动态计算宽度 ,感觉成本略大;因此我解决需要牺牲一些ui的展示,每一列还是给固定的宽度,在某一个区域给一个自适应的宽度,给已有的colums都不合适,因此设置一个空的

解决方案,设置一个空的

     {
          title: ' ',
          key: 'null'
        },

一个完整的colums

import { API } from '@/constant'

export const getTableColumns = (that) => {
  const columns = [
    {
      title: '系统名称',
      key: 'code',
      align: 'center',
      width: 150,
      fixed: 'left',
    },
    {
      title: '数据权限类型',
      key: 'name',
      align: 'center',
      width: 100,
    },
    {
      title: '数据权限字段1',
      key: 'groupName',
      align: 'center',
      width: 100,
    },
    {
      title: '数据权限字段2',
      key: 'unitBase',
      align: 'center',
      width: 100,
      render: (h, params) => {
        return h('span', params.row.unitBase === 1 ? '是' : '否')
      }
    },
    {
      title: '权限来源',
      key: 'pointNum',
      width: 100,
      align: 'center'
    },
    {
      title: '申请单号',
      key: 'state',
      align: 'center',
      width: 100,
      render: (h, params) => {
        return h('span', params.row.state === 1 ? '已启用' : '未启用')
      }
    },
    {
      title: '提交人',
      key: 'pointNum',
      width: 100,
      align: 'center'
    },
    {
      title: '权限开通时间',
      key: 'pointNum',
      width: 100,
      align: 'center'
    },
    {
      title: '权限失效时间',
      key: 'pointNum',
      width: 100,
      align: 'center'
    },
    {
      title: ' ',
      key: 'null'
    },
    {
      title: '操作',
      key: 'action',
      width: 150,
      fixed: 'right',
      align: 'center',
      render: (h, params) => {
        let viewBtn = h('Icon', {
          props: {
            type: 'clipboard'
          },
          style: {
            fontSize: '24px',
            color: '#fc9153',
            cursor: 'pointer',
            marginRight: '10px'
          },
          attrs: {
            'title': '查看 detail'
          },
          nativeOn: {
            click: () => {
              that.$router.push({
                path: '/measure-unit/detail',
                query: {
                  id: params.row.id
                }
              })
            }
          }
        })
        let editBtn = h('Icon', {
          props: {
            type: 'compose'
          },
          style: {
            fontSize: '24px',
            color: '#44c644',
            cursor: 'pointer'
          },
          attrs: {
            'title': '编辑 Edit'
          },
          nativeOn: {
            click: () => {
              that.$router.push({
                path: '/measure-unit/edit',
                query: {
                  id: params.row.id
                }
              })
            }
          }
        })
        return h('div', [viewBtn, editBtn])
      }
    }
  ]

  return columns
}
相关推荐
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄6 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨7 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL7 小时前
npm入门教程1:npm简介
前端·npm·node.js