feat(CuteTransfer): 优化数据穿梭组件功能
- 将组件内按钮尺寸从 mini 调整为 small - 添加表格选择控制方法 onTableSelectionRender - 实现禁用状态数据项的选择限制 - 在演示页面更新组件标题文案 - 移除段落标题中的 mini 按钮尺寸设置 - 为演示数据添加禁用状态测试样例
This commit is contained in:
@@ -10,7 +10,7 @@
|
|||||||
<el-col :span="11">
|
<el-col :span="11">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="searchValue"
|
v-model="searchValue"
|
||||||
size="mini"
|
size="small"
|
||||||
placeholder="输入关键字搜索"
|
placeholder="输入关键字搜索"
|
||||||
style="width: 100%;"
|
style="width: 100%;"
|
||||||
@input="onSearchValueChange"
|
@input="onSearchValueChange"
|
||||||
@@ -31,7 +31,7 @@
|
|||||||
highlight-selection-row
|
highlight-selection-row
|
||||||
@selection-change="onLeftTableSelectionChange"
|
@selection-change="onLeftTableSelectionChange"
|
||||||
>
|
>
|
||||||
<el-table-column type="selection" width="55" />
|
<el-table-column type="selection" width="55" :selectable="onTableSelectionRender" />
|
||||||
<slot />
|
<slot />
|
||||||
</el-table>
|
</el-table>
|
||||||
<el-col :span="24" class="selection-box">
|
<el-col :span="24" class="selection-box">
|
||||||
@@ -43,7 +43,7 @@
|
|||||||
<el-button
|
<el-button
|
||||||
type="primary"
|
type="primary"
|
||||||
icon="el-icon-d-arrow-right"
|
icon="el-icon-d-arrow-right"
|
||||||
size="mini"
|
size="small"
|
||||||
:disabled="leftSelection.length === 0"
|
:disabled="leftSelection.length === 0"
|
||||||
@click="onTransferRight"
|
@click="onTransferRight"
|
||||||
/>
|
/>
|
||||||
@@ -52,7 +52,7 @@
|
|||||||
<el-button
|
<el-button
|
||||||
type="primary"
|
type="primary"
|
||||||
icon="el-icon-d-arrow-left"
|
icon="el-icon-d-arrow-left"
|
||||||
size="mini"
|
size="small"
|
||||||
:disabled="rightSelection.length === 0"
|
:disabled="rightSelection.length === 0"
|
||||||
@click="onTransferLeft"
|
@click="onTransferLeft"
|
||||||
/>
|
/>
|
||||||
@@ -74,7 +74,7 @@
|
|||||||
highlight-selection-row
|
highlight-selection-row
|
||||||
@selection-change="onRightTableSelectionChange"
|
@selection-change="onRightTableSelectionChange"
|
||||||
>
|
>
|
||||||
<el-table-column type="selection" width="55" />
|
<el-table-column type="selection" width="55" :selectable="onTableSelectionRender" />
|
||||||
<slot />
|
<slot />
|
||||||
</el-table>
|
</el-table>
|
||||||
<el-col :span="24" class="selection-box">
|
<el-col :span="24" class="selection-box">
|
||||||
@@ -176,6 +176,9 @@ export default {
|
|||||||
this.searchCacheDS = []
|
this.searchCacheDS = []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
onTableSelectionRender(row, index) {
|
||||||
|
return !(row.disabled && row.disabled === true)
|
||||||
|
},
|
||||||
onLeftTableSelectionChange(selection) {
|
onLeftTableSelectionChange(selection) {
|
||||||
this.leftSelection = selection
|
this.leftSelection = selection
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<cute-section-title title="高级搜索组件 CuteSearchForm" />
|
<cute-section-title title="高级搜索 CuteSearchForm" />
|
||||||
<cute-search-form :model="searchFormModel" @submit="handleSearchFormSubmit">
|
<cute-search-form :model="searchFormModel" @submit="handleSearchFormSubmit">
|
||||||
<template v-slot:suffix>
|
<template v-slot:suffix>
|
||||||
<el-form-item label="模糊查询" prop="blurry">
|
<el-form-item label="模糊查询" prop="blurry">
|
||||||
@@ -11,20 +11,20 @@
|
|||||||
<el-button type="primary">查询后置按钮</el-button>
|
<el-button type="primary">查询后置按钮</el-button>
|
||||||
</template>
|
</template>
|
||||||
</cute-search-form>
|
</cute-search-form>
|
||||||
<cute-section-title title="横向滚动组件 CuteHorizontalScrollBar" />
|
<cute-section-title title="横向滚动 CuteHorizontalScrollBar" />
|
||||||
<cute-horizontal-scroll-bar>
|
<cute-horizontal-scroll-bar>
|
||||||
<div style="width: 3000px;min-width: 3000px">模拟超长内容</div>
|
<div style="width: 3000px;min-width: 3000px">模拟超长内容</div>
|
||||||
</cute-horizontal-scroll-bar>
|
</cute-horizontal-scroll-bar>
|
||||||
<cute-section-title title="纵向滚动组件 CuteVerticalScrollBar" />
|
<cute-section-title title="纵向滚动 CuteVerticalScrollBar" />
|
||||||
<cute-vertical-scroll-bar>
|
<cute-vertical-scroll-bar>
|
||||||
<div style="height: 3000px;min-height: 3000px">模拟超高内容</div>
|
<div style="height: 3000px;min-height: 3000px">模拟超高内容</div>
|
||||||
</cute-vertical-scroll-bar>
|
</cute-vertical-scroll-bar>
|
||||||
<cute-section-title title="数据穿梭组件 CuteTransfer" />
|
<cute-section-title title="数据穿梭 CuteTransfer" />
|
||||||
<cute-transfer :data-source="leftDataSource" primary-key="id">
|
<cute-transfer :data-source="leftDataSource" primary-key="id">
|
||||||
<el-table-column prop="name" label="姓名" />
|
<el-table-column prop="name" label="姓名" />
|
||||||
<el-table-column prop="description" label="备注" />
|
<el-table-column prop="description" label="备注" />
|
||||||
</cute-transfer>
|
</cute-transfer>
|
||||||
<cute-section-title title="链接组件 CuteLink" />
|
<cute-section-title title="链接 CuteLink" />
|
||||||
<cute-link title="百度一下" href="https://www.baidu.com" />
|
<cute-link title="百度一下" href="https://www.baidu.com" />
|
||||||
<cute-section-title title="空状态 CuteNoData" />
|
<cute-section-title title="空状态 CuteNoData" />
|
||||||
<cute-no-data desc="自定义提示语" />
|
<cute-no-data desc="自定义提示语" />
|
||||||
@@ -36,7 +36,7 @@
|
|||||||
<cute-preview-drawer ref="cpd" title="预览抽屉">
|
<cute-preview-drawer ref="cpd" title="预览抽屉">
|
||||||
<p>预览抽屉预览抽屉预览抽屉预览抽屉预览抽屉预览抽屉预览抽屉预览抽屉</p>
|
<p>预览抽屉预览抽屉预览抽屉预览抽屉预览抽屉预览抽屉预览抽屉预览抽屉</p>
|
||||||
</cute-preview-drawer>
|
</cute-preview-drawer>
|
||||||
<cute-section-title title="截屏组件 CuteScreenShot:包裹要截屏的组件" />
|
<cute-section-title title="截屏 CuteScreenShot:包裹要截屏的组件" />
|
||||||
<cute-screen-shot>
|
<cute-screen-shot>
|
||||||
<cute-search-form :model="searchFormModel" @submit="handleSearchFormSubmit" @reset="handleSearchFormReset">
|
<cute-search-form :model="searchFormModel" @submit="handleSearchFormSubmit" @reset="handleSearchFormReset">
|
||||||
<template v-slot:suffix>
|
<template v-slot:suffix>
|
||||||
@@ -51,9 +51,9 @@
|
|||||||
</cute-screen-shot>
|
</cute-screen-shot>
|
||||||
<cute-section-title title="段落标题 CuteSectionTitle" />
|
<cute-section-title title="段落标题 CuteSectionTitle" />
|
||||||
<cute-section-title title="主标题" sub-title="副标题" third-title="三级标题">
|
<cute-section-title title="主标题" sub-title="副标题" third-title="三级标题">
|
||||||
<cute-button type="danger" size="mini">操作按钮1</cute-button>
|
<cute-button type="danger">操作按钮1</cute-button>
|
||||||
<cute-button type="danger" size="mini">操作按钮2</cute-button>
|
<cute-button type="danger">操作按钮2</cute-button>
|
||||||
<cute-button type="danger" size="mini">操作按钮3</cute-button>
|
<cute-button type="danger">操作按钮3</cute-button>
|
||||||
</cute-section-title>
|
</cute-section-title>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -90,20 +90,20 @@ export default {
|
|||||||
searchFormModel: {},
|
searchFormModel: {},
|
||||||
leftDataSource: [
|
leftDataSource: [
|
||||||
{ id: 1, name: '小明', description: '小明牛P' },
|
{ id: 1, name: '小明', description: '小明牛P' },
|
||||||
{ id: 2, name: '小红', description: '小红牛P' },
|
{ id: 2, name: '小红', description: '小红牛P', disabled: true },
|
||||||
{ id: 3, name: '小蓝', description: '小蓝牛P' },
|
{ id: 3, name: '小蓝', description: '小蓝牛P', disabled: true },
|
||||||
{ id: 4, name: '小绿', description: '小绿牛P' },
|
{ id: 4, name: '小绿', description: '小绿牛P' },
|
||||||
{ id: 5, name: '小黄', description: '小黄牛P' },
|
{ id: 5, name: '小黄', description: '小黄牛P' },
|
||||||
{ id: 6, name: '小紫', description: '小紫牛P' },
|
{ id: 6, name: '小紫', description: '小紫牛P' },
|
||||||
{ id: 7, name: '小青', description: '小青牛P' },
|
{ id: 7, name: '小青', description: '小青牛P', disabled: true },
|
||||||
{ id: 8, name: '小橙', description: '小橙牛P' },
|
{ id: 8, name: '小橙', description: '小橙牛P' },
|
||||||
{ id: 9, name: '小贵', description: '小贵牛P' },
|
{ id: 9, name: '小贵', description: '小贵牛P' },
|
||||||
{ id: 10, name: '小陈', description: '小陈牛P' },
|
{ id: 10, name: '小陈', description: '小陈牛P' },
|
||||||
{ id: 11, name: '小勇', description: '小勇牛P' },
|
{ id: 11, name: '小勇', description: '小勇牛P' },
|
||||||
{ id: 12, name: '小田', description: '小田牛P' },
|
{ id: 12, name: '小田', description: '小田牛P' },
|
||||||
{ id: 13, name: '小天', description: '小天牛P' },
|
{ id: 13, name: '小天', description: '小天牛P', disabled: true },
|
||||||
{ id: 14, name: '小邓', description: '小邓牛P' },
|
{ id: 14, name: '小邓', description: '小邓牛P', disabled: true },
|
||||||
{ id: 15, name: '小周', description: '小周牛P' },
|
{ id: 15, name: '小周', description: '小周牛P', disabled: true },
|
||||||
{ id: 16, name: '小吴', description: '小吴牛P' },
|
{ id: 16, name: '小吴', description: '小吴牛P' },
|
||||||
{ id: 17, name: '小郑', description: '小郑牛P' },
|
{ id: 17, name: '小郑', description: '小郑牛P' },
|
||||||
{ id: 18, name: '小王', description: '小王牛P' }
|
{ id: 18, name: '小王', description: '小王牛P' }
|
||||||
|
|||||||
Reference in New Issue
Block a user