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
}