mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-09 04:31:35 +08:00
feat(data-table): column width support string
This commit is contained in:
07akioni
parent
1ce3d26c23
commit
9312c92c29
@ -24,13 +24,13 @@
|
||||
</div>
|
||||
</n-back-top>
|
||||
<div ref="scrollContainer" style="overflow: auto; height: 72px; line-height: 1.5;">
|
||||
A funny joke is need to be wrote here.<br/>
|
||||
A funny joke is need to be wrote here.<br/>
|
||||
A funny joke is need to be wrote here.<br/>
|
||||
A funny joke is need to be wrote here.<br/>
|
||||
A funny joke is need to be wrote here.<br/>
|
||||
A funny joke is need to be wrote here.<br/>
|
||||
A funny joke is need to be wrote here.<br/>
|
||||
这块应该写一个有意思的笑话。<br/>
|
||||
这块应该写一个有意思的笑话。<br/>
|
||||
这块应该写一个有意思的笑话。<br/>
|
||||
这块应该写一个有意思的笑话。<br/>
|
||||
这块应该写一个有意思的笑话。<br/>
|
||||
这块应该写一个有意思的笑话。<br/>
|
||||
这块应该写一个有意思的笑话。<br/>
|
||||
</div>
|
||||
```
|
||||
```js
|
||||
|
||||
@ -14,19 +14,23 @@ const createColumns = instance => {
|
||||
return [
|
||||
{
|
||||
title: 'Name',
|
||||
key: 'name'
|
||||
key: 'name',
|
||||
width: '15%'
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
key: 'age'
|
||||
key: 'age',
|
||||
width: '10%'
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
key: 'address'
|
||||
key: 'address',
|
||||
width: '20%'
|
||||
},
|
||||
{
|
||||
title: 'Tags',
|
||||
key: 'tags',
|
||||
width: '20%',
|
||||
render (h, row) {
|
||||
const tags = row.tags.map(tagKey => {
|
||||
return (
|
||||
@ -46,6 +50,7 @@ const createColumns = instance => {
|
||||
{
|
||||
title: 'Action',
|
||||
key: 'actions',
|
||||
width: '20%',
|
||||
render (h, row) {
|
||||
return h('n-button', {
|
||||
props: {
|
||||
|
||||
@ -86,4 +86,4 @@ These methods can help you control table in an uncontrolled manner. However, it'
|
||||
|defaultFilterOptionValues|`Array<string \| number>`|`[]`|The default active filter option values in uncontrolled manner|
|
||||
|filterMultiple|`boolean`|`true`||
|
||||
|fixed|`'left \| 'right' \| false`|`false`||
|
||||
|width|`number`|`null`|Width of the column, **required** when fixed|
|
||||
|width|`number \| string`|`null`|Width of the column, **required** when fixed|
|
||||
@ -14,19 +14,23 @@ const createColumns = instance => {
|
||||
return [
|
||||
{
|
||||
title: 'Name',
|
||||
key: 'name'
|
||||
key: 'name',
|
||||
width: '15%'
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
key: 'age'
|
||||
key: 'age',
|
||||
width: '10%'
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
key: 'address'
|
||||
key: 'address',
|
||||
width: '20%'
|
||||
},
|
||||
{
|
||||
title: 'Tags',
|
||||
key: 'tags',
|
||||
width: '20%',
|
||||
render (h, row) {
|
||||
const tags = row.tags.map(tagKey => {
|
||||
return (
|
||||
@ -46,6 +50,7 @@ const createColumns = instance => {
|
||||
{
|
||||
title: 'Action',
|
||||
key: 'actions',
|
||||
width: '20%',
|
||||
render (h, row) {
|
||||
return h('n-button', {
|
||||
props: {
|
||||
|
||||
@ -86,4 +86,4 @@ ajaxUsage
|
||||
|defaultFilterOptionValues|`Array<string \| number>`|`[]`|非受控状态下默认的过滤器选项值|
|
||||
|filterMultiple|`boolean`|`true`||
|
||||
|fixed|`'left \| 'right' \| false`|`false`||
|
||||
|width|`number`|`null`|列的宽度，在列固定时是**必需**的|
|
||||
|width|`number \| string`|`null`|列的宽度，在列固定时是**必需**的|
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-card>
|
||||
<n-card title="Import on Demand Code Generator">
|
||||
<n-form>
|
||||
<n-row :gutter="12">
|
||||
<n-form-item-col label="Components to Use" :span="12">
|
||||
|
||||
@ -20,7 +20,7 @@ Vue.use(naive)
|
||||
```
|
||||
|
||||
## 按需引入
|
||||
如果你需要按需引入组件，可以下面的工具生成按需引入的代码。
|
||||
如果你需要按需引入组件，可以使用下面的工具生成按需引入的代码。
|
||||
|
||||
> 需要注意的是，以 Base 开头的 CSS 文件并不会确保随着版本的更新保持稳定（我会尽力的保持）。因为它是内部实现的一部分。如果你维持按需引入时升级后样式出现了错误，可以来这里检查一下。虽然把这些公共样式各自打包进每个用到他们的组件是可行的，但是相比于升级的繁琐，我更不喜欢重复的代码。（这不意味着这种解决方案是“更好的”，它只是种选择而已）
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-card>
|
||||
<n-card title="生成按需引入代码">
|
||||
<n-form>
|
||||
<n-row :gutter="12">
|
||||
<n-form-item-col label="导入组件" :span="12">
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import formatLength from '../../_utils/css/formatLength'
|
||||
|
||||
export function createClassObject (classString) {
|
||||
if (!classString) return {}
|
||||
if (typeof classString === 'string') {
|
||||
@ -13,12 +15,11 @@ export function createCustomWidthStyle (column, index, placement) {
|
||||
if (column.width) {
|
||||
const width = column.width
|
||||
return {
|
||||
width: width + 'px'
|
||||
width: formatLength(width)
|
||||
}
|
||||
} else if (column.type === 'selection') {
|
||||
const width = 48
|
||||
return {
|
||||
width: width + 'px'
|
||||
width: '48px'
|
||||
}
|
||||
}
|
||||
return null
|
||||
|
||||
@ -391,10 +391,10 @@ export default {
|
||||
const secondHandle = this.$refs.secondHandle
|
||||
if (firstHandle && secondHandle) {
|
||||
if (this.firstHandleActive && document.activeElement === secondHandle) {
|
||||
this.blockTransitionOneTick()
|
||||
this.disableTransitionOneTick()
|
||||
firstHandle.focus()
|
||||
} else if (this.secondHandleActive && document.activeElement === firstHandle) {
|
||||
this.blockTransitionOneTick()
|
||||
this.disableTransitionOneTick()
|
||||
secondHandle.focus()
|
||||
}
|
||||
}
|
||||
@ -546,7 +546,7 @@ export default {
|
||||
this.showTooltip = false
|
||||
}
|
||||
},
|
||||
blockTransitionOneTick () {
|
||||
disableTransitionOneTick () {
|
||||
const firstHandle = this.$refs.firstHandle
|
||||
if (firstHandle) {
|
||||
firstHandle.style.transition = 'none'
|
||||
|
||||
4
src/_utils/css/formatLength.js
Normal file
4
src/_utils/css/formatLength.js
Normal file
@ -0,0 +1,4 @@
|
||||
export default function formatLength (length) {
|
||||
if (typeof length === 'number') return '' + (length && length + 'px')
|
||||
return length
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user