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

📝(component): 编写 table 行内编辑案例

Browse Source
This commit is contained in:
就眠儀式 2022-08-04 17:45:00 +08:00
parent a61c6d0bef
commit 42020ec132
4 changed files with 182 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
package/component/src/component/checkbox/index.vue
View File

@ -127,7 +127,13 @@ const isDisabled = computed(() => {
><slot>{{ label }}</slot></span
>
<lay-icon
:type="props.isIndeterminate && isChecked ? 'layui-icon-subtraction' : isChecked ? 'layui-icon-ok' : ''"
:type="
props.isIndeterminate && isChecked
? 'layui-icon-subtraction'
: isChecked
? 'layui-icon-ok'
: ''
"
></lay-icon>
</div>
</span>

23
package/component/src/component/table/TableRow.vue
View File

@ -84,17 +84,22 @@ const tableSelectedKey: WritableComputedRef<Recordable[]> = computed({
const isExpand: WritableComputedRef<any> = computed({
get() {
return tableExpandAll.value ? true : tableExpandKeys.value.includes(props.data[props.id]);
return tableExpandAll.value
? true
: tableExpandKeys.value.includes(props.data[props.id]);
},
set(val) {
let newTableExpandKeys = [...tableExpandKeys.value]
if (!val) {
newTableExpandKeys.splice(newTableExpandKeys.indexOf(props.data[props.id]), 1);
} else {
newTableExpandKeys.push(props.data[props.id]);
}
tableExpandAll.value = false;
tableExpandKeys.value = newTableExpandKeys;
let newTableExpandKeys = [...tableExpandKeys.value];
if (!val) {
newTableExpandKeys.splice(
newTableExpandKeys.indexOf(props.data[props.id]),
1
);
} else {
newTableExpandKeys.push(props.data[props.id]);
}
tableExpandAll.value = false;
tableExpandKeys.value = newTableExpandKeys;
},
});

7
package/component/src/component/table/index.vue
View File

@ -66,7 +66,7 @@ const props = withDefaults(defineProps<LayTableProps>(), {
cellStyle: "",
spanMethod: () => {},
defaultExpandAll: false,
expandKeys: () => []
expandKeys: () => [],
});
const tableId = uuidv4();
@ -305,7 +305,10 @@ const getFixedColumn = () => {
hasr.value = true;
} else {
// @ts-ignore
if (tableBody.value?.scrollLeft + tableBody.value?.offsetWidth + 2 > tableBody.value?.scrollWidth) {
if (
tableBody.value?.scrollLeft + tableBody.value?.offsetWidth + 2 >
tableBody.value?.scrollWidth
) {
hasl.value = true;
hasr.value = false;
} else {

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

@ -817,79 +817,6 @@ export default {
:::
::: title 合并行列
:::
::: demo 通过 `columns` 配置 `type:'radio'` 开启单选列。
<template>
<lay-table :columns="columns24" :data-source="dataSource24" v-model:selected-key="selectedKey24"></lay-table>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const columns24 = [
{
title:"账户",
width:"200px",
key:"username"
},{
title:"密码",
width: "300px",
key:"password"
},{
title:"性别",
key:"sex"
},{
title:"年龄",
width: "300px",
key:"age"
},{
title:"备注",
width: "180px",
key:"remark",
ellipsisTooltip: true
}
]
const dataSource24 = [
{id:"1",username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
{id:"2",username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
{id:"3",username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
{id:"4",username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
{id:"5",username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '}
]
const spanMethod24 = (
row,
column,
rowIndex,
columnIndex,
) => {
if (rowIndex % 2 === 0) {
if (columnIndex === 0) {
return [1, 2]
} else if (columnIndex === 1) {
return [0, 0]
}
}
}
return {
columns24,
dataSource24,
spanMethod24,
}
}
}
</script>
:::
::: title 暂无数据
:::
@ -1065,6 +992,162 @@ export default {
:::
::: title 合并行列
:::
::: demo 通过 `span-method` 属性, 自定义行列合并的逻辑。
<template>
<lay-table :columns="columns27" :data-source="dataSource27" :span-method="spanMethod27"></lay-table>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const columns27 = [
{
title:"账户",
width:"200px",
key:"username"
},{
title:"密码",
width: "300px",
key:"password"
},{
title:"性别",
key:"sex"
},{
title:"年龄",
width: "300px",
key:"age"
},{
title:"备注",
width: "180px",
key:"remark",
ellipsisTooltip: true
}
]
const dataSource27 = [
{id:"1",username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
{id:"2",username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
{id:"3",username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
{id:"4",username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
{id:"5",username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '}
]
const spanMethod27 = (
row,
column,
rowIndex,
columnIndex,
) => {
if (rowIndex % 2 === 0) {
if (columnIndex === 0) {
return [1, 2]
} else if (columnIndex === 1) {
return [0, 0]
}
}
}
return {
columns27,
dataSource27,
spanMethod27,
}
}
}
</script>
:::
::: title 行内编辑
:::
::: demo 通过 `span-method` 属性, 自定义行列合并的逻辑。
<template>
<lay-table :columns="columns28" :data-source="dataSource28">
<template #username="{ data }">
<lay-input v-if="edingKeys[data.id]" v-model="data.username" >
<template #suffix>
<lay-icon type="layui-icon-close" style="right:10px;" v-if="edingKeys[data.id]" @click="deleteEdit(data.id)"></lay-icon>
</template>
</lay-input>
<span v-else>
{{ data.username }}
<lay-icon type="layui-icon-edit" style="position: absolute;right: 10px;" v-if="!edingKeys[data.id]" @click="editHandle(data.id)"></lay-icon>
</span>
</template>
</lay-table>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const edingKeys = ref([])
const editHandle = (key) => {
edingKeys.value.push(key);
}
const deleteEdit = (key) => {
edingKeys.value.splice(edingKeys.value.indexOf(key),1);
}
const columns28 = [
{
title:"账户",
width:"200px",
key:"username",
customSlot: "username"
},{
title:"密码",
width: "300px",
key:"password"
},{
title:"性别",
key:"sex"
},{
title:"年龄",
width: "300px",
key:"age"
},{
title:"备注",
width: "180px",
key:"remark",
ellipsisTooltip: true
}
]
const dataSource28 = [
{id:"1",username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
{id:"2",username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
{id:"3",username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
{id:"4",username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
{id:"5",username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '}
]
return {
edingKeys,
deleteEdit,
columns28,
editHandle,
dataSource28,
}
}
}
</script>
:::
::: title 完整表格
:::