✨(component): 新增 transfer 组件选项禁用
This commit is contained in:
就眠儀式
parent
5f4f601a1c
commit
78559592e9
@ -114,12 +114,12 @@ const onBlur = (event: Event) => {
|
||||
|
||||
const onCompositionstart = () => {
|
||||
composing.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
const onCompositionend = (event: Event) => {
|
||||
composing.value = false;
|
||||
onInput(event)
|
||||
}
|
||||
onInput(event);
|
||||
};
|
||||
|
||||
const classes = computed(() => {
|
||||
return { "layui-disabled": props.disabled };
|
||||
|
||||
@ -46,10 +46,12 @@ const allRightChecked = ref(false);
|
||||
const hasLeftChecked = ref(false);
|
||||
const hasRightChecked = ref(false);
|
||||
|
||||
const allLeftChange = (checked: any) => {
|
||||
if (checked) {
|
||||
const allLeftChange = (isChecked: boolean) => {
|
||||
if (isChecked) {
|
||||
const ids = leftDataSource.value.map((item: any) => {
|
||||
return item[props.id];
|
||||
if(!item.disabled) {
|
||||
return item[props.id];
|
||||
}
|
||||
});
|
||||
leftSelectedKeys.value = ids;
|
||||
} else {
|
||||
@ -80,7 +82,9 @@ watch(
|
||||
const allRightChange = (checked: any) => {
|
||||
if (checked) {
|
||||
const ids = rightDataSource.value.map((item: any) => {
|
||||
return item[props.id];
|
||||
if(!item.disabled) {
|
||||
return item[props.id];
|
||||
}
|
||||
});
|
||||
rightSelectedKeys.value = ids;
|
||||
} else {
|
||||
@ -214,6 +218,7 @@ const boxStyle = computed(() => {
|
||||
<LayCheckbox
|
||||
v-model="leftSelectedKeys"
|
||||
skin="primary"
|
||||
:disabled="dataSource.disabled"
|
||||
:value="dataSource[id]"
|
||||
>
|
||||
<slot v-if="slots.item" name="item" :data="dataSource"></slot>
|
||||
@ -263,8 +268,9 @@ const boxStyle = computed(() => {
|
||||
<ul class="layui-transfer-data">
|
||||
<li v-for="dataSource in rightDataSource" :key="dataSource">
|
||||
<LayCheckbox
|
||||
v-model="rightSelectedKeys"
|
||||
skin="primary"
|
||||
v-model="rightSelectedKeys"
|
||||
:disabled="dataSource.disabled"
|
||||
:value="dataSource[id]"
|
||||
>
|
||||
<slot v-if="slots.item" name="item" :data="dataSource"></slot>
|
||||
|
||||
@ -1416,32 +1416,32 @@ export default {
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| -------------------- | ----------------------------------------------------- | ------------------- | ---------- | ------------------ |
|
||||
| columns | 列配置 - [更多](#tableColumn) | -- | -- | -- |
|
||||
| dataSource | 数据源 | -- | -- | -- |
|
||||
| checkbox | 开启复选框 | `boolean` | `false` | `true` `false` |
|
||||
| id | 主键 | `string` | -- | -- |
|
||||
| v-model:selectedKeys | 选中项 (多选) | -- | -- | -- |
|
||||
| v-model:selectedKey | 选中项 (单选) | -- | -- | -- |
|
||||
| default-toolbar | 工具栏 | `boolean` | `false` | `true` `false` |
|
||||
| size | 尺寸 | `string` | `md` | `lg` `md` `sm` |
|
||||
| children-column-name | 树节点字段 | `string` | `children` | -- |
|
||||
| indent-size | 树表行级缩进 | `number` | `30` | -- |
|
||||
| height | 表格高度 | `number` | -- | -- |
|
||||
| maxHeight | 表格最大高度 | `number` | -- | -- |
|
||||
| even | 斑马条纹 | `boolean` | `false` | `true` `false` |
|
||||
| cellStyle | 列样式 function(row, column, rowIndex, columnIndex) | `string` `function` | -- | -- |
|
||||
| rowStyle | 行样式 function(row, rowIndex) | `string` `function` | -- | -- |
|
||||
| cellClassName | 列类名称 function(row, column, rowIndex, columnIndex) | `string` `function` | -- | -- |
|
||||
| rowClassName | 行类名称 function(row, rowIndex) | `string` `function` | -- | -- |
|
||||
| skin | 风格 | `string` | -- | `line` `row` `nob` |
|
||||
| expand-index | 展开所在列 | `number` | -- | -- |
|
||||
| default-expand-all | 默认展开所有列 | `boolean` | `false` | `true` `false` |
|
||||
| expand-keys | 展开的列 | `array` | `[]` | -- |
|
||||
| span-method | 合并算法 | `function` | -- | -- |
|
||||
| getCheckboxProps | 多选行属性 | `function` | -- | -- |
|
||||
| getRadioProps | 单选行属性 | `function` | -- | -- |
|
||||
| 属性 | 描述 | 类型 | 默认值 | 可选值 | 版本 |
|
||||
| -------------------- | ----------------------------------------------------- | ------------------- | ---------- | ------------------ | ------------------ |
|
||||
| columns | 列配置 - [更多](#tableColumn) | -- | -- | -- |-- |
|
||||
| dataSource | 数据源 | -- | -- | -- |-- |
|
||||
| checkbox | 开启复选框 | `boolean` | `false` | `true` `false` |-- |
|
||||
| id | 主键 | `string` | -- | -- |-- |
|
||||
| v-model:selectedKeys | 选中项 (多选) | -- | -- | -- |-- |
|
||||
| v-model:selectedKey | 选中项 (单选) | -- | -- | -- |-- |
|
||||
| default-toolbar | 工具栏 | `boolean` | `false` | `true` `false` |-- |
|
||||
| size | 尺寸 | `string` | `md` | `lg` `md` `sm` |-- |
|
||||
| children-column-name | 树节点字段 | `string` | `children` | -- |-- |
|
||||
| indent-size | 树表行级缩进 | `number` | `30` | -- |-- |
|
||||
| height | 表格高度 | `number` | -- | -- |-- |
|
||||
| maxHeight | 表格最大高度 | `number` | -- | -- |-- |
|
||||
| even | 斑马条纹 | `boolean` | `false` | `true` `false` |-- |
|
||||
| cellStyle | 列样式 function(row, column, rowIndex, columnIndex) | `string` `function` | -- | -- |-- |
|
||||
| rowStyle | 行样式 function(row, rowIndex) | `string` `function` | -- | -- |-- |
|
||||
| cellClassName | 列类名称 function(row, column, rowIndex, columnIndex) | `string` `function` | -- | -- |-- |
|
||||
| rowClassName | 行类名称 function(row, rowIndex) | `string` `function` | -- | -- |-- |
|
||||
| skin | 风格 | `string` | -- | `line` `row` `nob` |-- |
|
||||
| expand-index | 展开所在列 | `number` | -- | -- |-- |
|
||||
| default-expand-all | 默认展开所有列 | `boolean` | `false` | `true` `false` |-- |
|
||||
| expand-keys | 展开的列 | `array` | `[]` | -- |-- |
|
||||
| span-method | 合并算法 | `function` | -- | -- |`1.4.0` |
|
||||
| getCheckboxProps | 多选行属性 | `function` | -- | -- |`1.4.0` |
|
||||
| getRadioProps | 单选行属性 | `function` | -- | -- |`1.4.0` |
|
||||
|
||||
:::
|
||||
|
||||
@ -1476,19 +1476,20 @@ export default {
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| --------------- | ------------------------------ | --------- | ------- | --------------------------- |
|
||||
| title | 列标题 | -- | -- | -- |
|
||||
| key | 数据字段 | -- | -- | -- |
|
||||
| customSlot | 自定义插槽 | -- | -- | -- |
|
||||
| width | 宽度 | -- | -- | -- |
|
||||
| minWidth | 最小宽度 | -- | `100px` | -- |
|
||||
| sort | 排序 | -- | -- | -- |
|
||||
| titleSlot | 标题插槽 | -- | -- | -- |
|
||||
| align | 对齐方式 | `string` | `left` | `left` `right` `center` |
|
||||
| ellipsisTooltip | 当内容过长被隐藏时显示 tooltip | `boolean` | `false` | `true` `false` |
|
||||
| fixed | 列固定 | `string` | -- | `left` `right` |
|
||||
| type | 列类型 | `string` | -- | `number` `checkbox` `radio` |
|
||||
| 插槽 | 描述 | 类型 | 默认值 | 可选值 | 可选值 |
|
||||
| --------------- | ------------------------------ | --------- | ------- | --------------------------- | --------------------------- |
|
||||
| title | 列标题 | -- | -- | -- | -- |
|
||||
| key | 数据字段 | -- | -- | -- | -- |
|
||||
| customSlot | 自定义插槽 | -- | -- | -- | -- |
|
||||
| width | 宽度 | -- | -- | -- | -- |
|
||||
| minWidth | 最小宽度 | -- | `100px` | -- | -- |
|
||||
| sort | 排序 | -- | -- | -- | -- |
|
||||
| titleSlot | 标题插槽 | -- | -- | -- | -- |
|
||||
| align | 对齐方式 | `string` | `left` | `left` `right` `center` | -- |
|
||||
| ellipsisTooltip | 当内容过长被隐藏时显示 tooltip | `boolean` | `false` | `true` `false` | -- |
|
||||
| fixed | 列固定 | `string` | -- | `left` `right` | -- |
|
||||
| type | 列类型 | `string` | -- | `number` `checkbox` `radio` | -- |
|
||||
| children | 表头分组 | `string` | -- | `number` `checkbox` `radio` | `1.4.0` |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@ import { ref } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const dataSource1 = [{id:'1', title:'易大师'},{id:'2', title:'战争之王'}]
|
||||
const dataSource1 = [{id:'1', title:'易大师', disabled: true},{id:'2', title:'战争之王'}]
|
||||
|
||||
return {
|
||||
dataSource1
|
||||
|
||||
Loading…
Reference in New Issue
Block a user