theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨(component): 新增 transfer 组件选项禁用

Browse Source
This commit is contained in:
就眠儀式 2022-08-10 22:15:56 +08:00
parent 5f4f601a1c
commit 78559592e9
4 changed files with 55 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package/component/src/component/input/index.vue
View File

@ -114,12 +114,12 @@ const onBlur = (event: Event) => {
const onCompositionstart = () => { const onCompositionstart = () => {
composing.value = true; composing.value = true;
} };
const onCompositionend = (event: Event) => { const onCompositionend = (event: Event) => {
composing.value = false; composing.value = false;
onInput(event) onInput(event);
} };
const classes = computed(() => { const classes = computed(() => {
return { "layui-disabled": props.disabled }; return { "layui-disabled": props.disabled };

12
package/component/src/component/transfer/index.vue
View File

@ -46,10 +46,12 @@ const allRightChecked = ref(false);
const hasLeftChecked = ref(false); const hasLeftChecked = ref(false);
const hasRightChecked = ref(false); const hasRightChecked = ref(false);
const allLeftChange = (checked: any) => { const allLeftChange = (isChecked: boolean) => {
if (checked) { if (isChecked) {
const ids = leftDataSource.value.map((item: any) => { const ids = leftDataSource.value.map((item: any) => {
if(!item.disabled) {
return item[props.id]; return item[props.id];
}
}); });
leftSelectedKeys.value = ids; leftSelectedKeys.value = ids;
} else { } else {
@ -80,7 +82,9 @@ watch(
const allRightChange = (checked: any) => { const allRightChange = (checked: any) => {
if (checked) { if (checked) {
const ids = rightDataSource.value.map((item: any) => { const ids = rightDataSource.value.map((item: any) => {
if(!item.disabled) {
return item[props.id]; return item[props.id];
}
}); });
rightSelectedKeys.value = ids; rightSelectedKeys.value = ids;
} else { } else {
@ -214,6 +218,7 @@ const boxStyle = computed(() => {
<LayCheckbox <LayCheckbox
v-model="leftSelectedKeys" v-model="leftSelectedKeys"
skin="primary" skin="primary"
:disabled="dataSource.disabled"
:value="dataSource[id]" :value="dataSource[id]"
> >
<slot v-if="slots.item" name="item" :data="dataSource"></slot> <slot v-if="slots.item" name="item" :data="dataSource"></slot>
@ -263,8 +268,9 @@ const boxStyle = computed(() => {
<ul class="layui-transfer-data"> <ul class="layui-transfer-data">
<li v-for="dataSource in rightDataSource" :key="dataSource"> <li v-for="dataSource in rightDataSource" :key="dataSource">
<LayCheckbox <LayCheckbox
v-model="rightSelectedKeys"
skin="primary" skin="primary"
v-model="rightSelectedKeys"
:disabled="dataSource.disabled"
:value="dataSource[id]" :value="dataSource[id]"
> >
<slot v-if="slots.item" name="item" :data="dataSource"></slot> <slot v-if="slots.item" name="item" :data="dataSource"></slot>

79
package/document-component/src/document/zh-CN/components/table.md
View File

@ -1416,32 +1416,32 @@ export default {
::: table ::: table
| 属性 | 描述 | 类型 | 默认值 | 可选值 | | 属性 | 描述 | 类型 | 默认值 | 可选值 | 版本 |
| -------------------- | ----------------------------------------------------- | ------------------- | ---------- | ------------------ | | -------------------- | ----------------------------------------------------- | ------------------- | ---------- | ------------------ | ------------------ |
| columns | 列配置 - [更多](#tableColumn) | -- | -- | -- | | columns | 列配置 - [更多](#tableColumn) | -- | -- | -- |-- |
| dataSource | 数据源 | -- | -- | -- | | dataSource | 数据源 | -- | -- | -- |-- |
| checkbox | 开启复选框 | `boolean` | `false` | `true` `false` | | checkbox | 开启复选框 | `boolean` | `false` | `true` `false` |-- |
| id | 主键 | `string` | -- | -- | | id | 主键 | `string` | -- | -- |-- |
| v-model:selectedKeys | 选中项 (多选) | -- | -- | -- | | v-model:selectedKeys | 选中项 (多选) | -- | -- | -- |-- |
| v-model:selectedKey | 选中项 (单选) | -- | -- | -- | | v-model:selectedKey | 选中项 (单选) | -- | -- | -- |-- |
| default-toolbar | 工具栏 | `boolean` | `false` | `true` `false` | | default-toolbar | 工具栏 | `boolean` | `false` | `true` `false` |-- |
| size | 尺寸 | `string` | `md` | `lg` `md` `sm` | | size | 尺寸 | `string` | `md` | `lg` `md` `sm` |-- |
| children-column-name | 树节点字段 | `string` | `children` | -- | | children-column-name | 树节点字段 | `string` | `children` | -- |-- |
| indent-size | 树表行级缩进 | `number` | `30` | -- | | indent-size | 树表行级缩进 | `number` | `30` | -- |-- |
| height | 表格高度 | `number` | -- | -- | | height | 表格高度 | `number` | -- | -- |-- |
| maxHeight | 表格最大高度 | `number` | -- | -- | | maxHeight | 表格最大高度 | `number` | -- | -- |-- |
| even | 斑马条纹 | `boolean` | `false` | `true` `false` | | even | 斑马条纹 | `boolean` | `false` | `true` `false` |-- |
| cellStyle | 列样式 function(row, column, rowIndex, columnIndex) | `string` `function` | -- | -- | | cellStyle | 列样式 function(row, column, rowIndex, columnIndex) | `string` `function` | -- | -- |-- |
| rowStyle | 行样式 function(row, rowIndex) | `string` `function` | -- | -- | | rowStyle | 行样式 function(row, rowIndex) | `string` `function` | -- | -- |-- |
| cellClassName | 列类名称 function(row, column, rowIndex, columnIndex) | `string` `function` | -- | -- | | cellClassName | 列类名称 function(row, column, rowIndex, columnIndex) | `string` `function` | -- | -- |-- |
| rowClassName | 行类名称 function(row, rowIndex) | `string` `function` | -- | -- | | rowClassName | 行类名称 function(row, rowIndex) | `string` `function` | -- | -- |-- |
| skin | 风格 | `string` | -- | `line` `row` `nob` | | skin | 风格 | `string` | -- | `line` `row` `nob` |-- |
| expand-index | 展开所在列 | `number` | -- | -- | | expand-index | 展开所在列 | `number` | -- | -- |-- |
| default-expand-all | 默认展开所有列 | `boolean` | `false` | `true` `false` | | default-expand-all | 默认展开所有列 | `boolean` | `false` | `true` `false` |-- |
| expand-keys | 展开的列 | `array` | `[]` | -- | | expand-keys | 展开的列 | `array` | `[]` | -- |-- |
| span-method | 合并算法 | `function` | -- | -- | | span-method | 合并算法 | `function` | -- | -- |`1.4.0` |
| getCheckboxProps | 多选行属性 | `function` | -- | -- | | getCheckboxProps | 多选行属性 | `function` | -- | -- |`1.4.0` |
| getRadioProps | 单选行属性 | `function` | -- | -- | | getRadioProps | 单选行属性 | `function` | -- | -- |`1.4.0` |
::: :::
@ -1476,19 +1476,20 @@ export default {
::: table ::: table
| 插槽 | 描述 | 类型 | 默认值 | 可选值 | | 插槽 | 描述 | 类型 | 默认值 | 可选值 | 可选值 |
| --------------- | ------------------------------ | --------- | ------- | --------------------------- | | --------------- | ------------------------------ | --------- | ------- | --------------------------- | --------------------------- |
| title | 列标题 | -- | -- | -- | | title | 列标题 | -- | -- | -- | -- |
| key | 数据字段 | -- | -- | -- | | key | 数据字段 | -- | -- | -- | -- |
| customSlot | 自定义插槽 | -- | -- | -- | | customSlot | 自定义插槽 | -- | -- | -- | -- |
| width | 宽度 | -- | -- | -- | | width | 宽度 | -- | -- | -- | -- |
| minWidth | 最小宽度 | -- | `100px` | -- | | minWidth | 最小宽度 | -- | `100px` | -- | -- |
| sort | 排序 | -- | -- | -- | | sort | 排序 | -- | -- | -- | -- |
| titleSlot | 标题插槽 | -- | -- | -- | | titleSlot | 标题插槽 | -- | -- | -- | -- |
| align | 对齐方式 | `string` | `left` | `left` `right` `center` | | align | 对齐方式 | `string` | `left` | `left` `right` `center` | -- |
| ellipsisTooltip | 当内容过长被隐藏时显示 tooltip | `boolean` | `false` | `true` `false` | | ellipsisTooltip | 当内容过长被隐藏时显示 tooltip | `boolean` | `false` | `true` `false` | -- |
| fixed | 列固定 | `string` | -- | `left` `right` | | fixed | 列固定 | `string` | -- | `left` `right` | -- |
| type | 列类型 | `string` | -- | `number` `checkbox` `radio` | | type | 列类型 | `string` | -- | `number` `checkbox` `radio` | -- |
| children | 表头分组 | `string` | -- | `number` `checkbox` `radio` | `1.4.0` |
::: :::

2
package/document-component/src/document/zh-CN/components/transfer.md
View File

@ -22,7 +22,7 @@ import { ref } from 'vue'
export default { export default {
setup() { setup() {
const dataSource1 = [{id:'1', title:'易大师'},{id:'2', title:'战争之王'}] const dataSource1 = [{id:'1', title:'易大师', disabled: true},{id:'2', title:'战争之王'}]
return { return {
dataSource1 dataSource1