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
}
相关推荐
迷雾漫步者1 小时前
Flutter组件————FloatingActionButton
前端·flutter·dart
向前看-1 小时前
验证码机制
前端·后端
燃先生._.2 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
高山我梦口香糖3 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
m0_748235243 小时前
前端实现获取后端返回的文件流并下载
前端·状态模式
m0_748240254 小时前
前端如何检测用户登录状态是否过期
前端
black^sugar4 小时前
纯前端实现更新检测
开发语言·前端·javascript
寻找沙漠的人5 小时前
前端知识补充—CSS
前端·css
GISer_Jing5 小时前
2025前端面试热门题目——计算机网络篇
前端·计算机网络·面试