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
}
相关推荐
骑着蜗牛撵大象3279 分钟前
LangChain 工具调用从声明到闭环:给智能体接上真实的手脚
前端
数据掘金20 分钟前
百度统计后台页面数据异常?从手动调用时机开始排查
前端
hunteritself21 分钟前
10 层 4K 实时剪辑,国产工作站进入广电制作核心
大数据·前端·人工智能·深度学习·transformer
踩着两条虫22 分钟前
我在浏览器里“盖”了一个村:Vue + Three.js 大屏开发踩坑记
前端·vue.js·three.js
默_笙26 分钟前
🧀 让大模型的答案"流"出来:NestJS AI 模块 + SSE + RxJS 实战
javascript·人工智能
mbshqqb27 分钟前
TypeScript基础教程之同步生成器
前端·javascript·typescript
嘟嘟同学和妮妮同学1 小时前
【升级】一个中国历史可视化站:皇帝时间线梳理、古代思想流派、诗词鉴赏 (2)
前端·html
暗夜行者之光1 小时前
LangGraph + MCP 实战:构建"自然语言查数据"的 ChatBI Agent
前端·后端
一tiao咸鱼1 小时前
还在手动海投?我做了个 AI 求职助手,自动筛选 BOSS 职位再精准投递
前端·后端·面试
尤水就下1 小时前
🔥预热:在线文档的 block 架构是如何实现的(未完待续...)
前端·javascript·架构