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

📝(table): 完善 行内编辑 案例

Browse Source
This commit is contained in:
就眠儀式 2022-08-04 18:41:09 +08:00
parent 42020ec132
commit 51adbcbd2d
1 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1073,7 +1073,7 @@ export default {
<template> <template>
<lay-table :columns="columns28" :data-source="dataSource28"> <lay-table :columns="columns28" :data-source="dataSource28">
<template #username="{ data }"> <template #username="{ data }">
<lay-input v-if="edingKeys[data.id]" v-model="data.username" > <lay-input v-if="edingKeys[data.id]" :model-value="data.username" @input="changeUsername($event, data)">
<template #suffix> <template #suffix>
<lay-icon type="layui-icon-close" style="right:10px;" v-if="edingKeys[data.id]" @click="deleteEdit(data.id)"></lay-icon> <lay-icon type="layui-icon-close" style="right:10px;" v-if="edingKeys[data.id]" @click="deleteEdit(data.id)"></lay-icon>
</template> </template>
@ -1094,14 +1094,6 @@ export default {
const edingKeys = ref([]) const edingKeys = ref([])
const editHandle = (key) => {
edingKeys.value.push(key);
}
const deleteEdit = (key) => {
edingKeys.value.splice(edingKeys.value.indexOf(key),1);
}
const columns28 = [ const columns28 = [
{ {
title:"账户", title:"账户",
@ -1127,13 +1119,29 @@ export default {
} }
] ]
const dataSource28 = [ const dataSource28 = ref([
{id:"1",username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '}, {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:"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:"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:"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) '} {id:"5",username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '}
] ])
const editHandle = (key) => {
edingKeys.value.push(key);
}
const deleteEdit = (key) => {
edingKeys.value.splice(edingKeys.value.indexOf(key),1);
}
const changeUsername = (val, data) => {
dataSource28.value.forEach(element => {
if(element.id == data.id) {
element.username = val;
}
});
}
return { return {
edingKeys, edingKeys,
@ -1141,6 +1149,7 @@ export default {
columns28, columns28,
editHandle, editHandle,
dataSource28, dataSource28,
changeUsername,
} }
} }
} }
@ -1151,7 +1160,7 @@ export default {
::: title 完整表格 ::: title 完整表格
::: :::
::: demo ::: demo 使用了绝大部分属性的 table 案例
<template> <template>
<lay-table :columns="columns5" id="id" :expand-index="1" :data-source="dataSource5" v-model:selected-keys="selectedKeys5" :checkbox="checkbox5" :default-toolbar="defaultToolbar5" @row="rowClick5" max-height="200px"> <lay-table :columns="columns5" id="id" :expand-index="1" :data-source="dataSource5" v-model:selected-keys="selectedKeys5" :checkbox="checkbox5" :default-toolbar="defaultToolbar5" @row="rowClick5" max-height="200px">