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
}
相关推荐
打小就很皮...29 分钟前
HBuilder 发行Android(apk包)全流程指南
前端·javascript·微信小程序
集成显卡1 小时前
PlayWright | 初识微软出品的 WEB 应用自动化测试框架
前端·chrome·测试工具·microsoft·自动化·edge浏览器
前端小趴菜052 小时前
React - 组件通信
前端·react.js·前端框架
Amy_cx3 小时前
在表单输入框按回车页面刷新的问题
前端·elementui
dancing9993 小时前
cocos3.X的oops框架oops-plugin-excel-to-json改进兼容多表单导出功能
前端·javascript·typescript·游戏程序
后海 0_o3 小时前
2025前端微服务 - 无界 的实战应用
前端·微服务·架构
Scabbards_3 小时前
CPT304-2425-S2-Software Engineering II
前端
小满zs3 小时前
Zustand 第二章(状态处理)
前端·react.js
程序猿小D3 小时前
第16节 Node.js 文件系统
linux·服务器·前端·node.js·编辑器·vim
萌萌哒草头将军3 小时前
🚀🚀🚀Prisma 发布无 Rust 引擎预览版,安装和使用更轻量;支持任何 ORM 连接引擎;支持自动备份...
前端·javascript·vue.js