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
}
相关推荐
Cho1yon28 分钟前
【AI Agent 第十五期: AI Agent 从 0 到 1 系统学习大纲】
javascript·人工智能·学习
计算机魔术师31 分钟前
Beren Millidge、John Schulman、Charlie O'Neill 对谈递归自我改进离我们还有多远
前端
MetaLite36 分钟前
Java 时间处理的两个坑:单位误判,半秒算成一秒
java·开发语言·前端
hiahiahia12341 分钟前
SSE 到底是什么?
前端·人工智能
Bigger1 小时前
我把苹果发布会里的折叠屏,真的用网页做出来了
前端·ai编程·交互设计
钱栈up1 小时前
qoder CLI 1.0.45 本地小说生成工作流搭建:Feature Gate 配置与长文本断连排查从死锁到全流程跑通:Python德州扑克项目的优化
java·前端·数据库
hiahiahia1232 小时前
为什么 Structured Output 会变成 Agent 的基础设施?
前端·人工智能
qiuziqiqi2 小时前
cf前端直接上传
前端
杨运交2 小时前
[070][Web模块]Spring MVC TOTP 二次认证拦截器:设计与源码深度解析
前端·spring·mvc
学逆向的2 小时前
inilne HOOK
前端·网络安全·hook