Appearance
单元格编辑 表格
单元格编辑
基本用法
- 点击单元格进行编辑
<template>
<dn-page>
<dn-form ref="formRef" v-bind="formOptions"></dn-form>
</dn-page>
</template>
<script lang="jsx">
import {ref,defineComponent, onMounted} from "vue";
import { useForm,dn } from "@sdevnet/devnet-form";
const formRef = ref();
const formOptions = ref();
let data=[];
for(var i=0;i<8;i++){
let row = {
fid:(i+1),
name:'User Name'+i,
regcap:i + 35.67893,
regdate:new Date(),
isadmin: i % 2==0 ?1:0,
remark:'备注'+i,
state: i % 2==0 ?'0':"1",
};
data.push(row)
}
let selectData=[];
for(var i=0;i<10;i++){
selectData.push({
value:(i+1),
text:'Name'+i
})
}
let dictData=[
{id:"1",text:'打开',type:'primary'},
{id:"0",text:'关闭',type:'danger'}
];
function createFormOptions() {
const { buildFormOptions } = useForm();
return buildFormOptions({
columns: {
childHandleTable: {
title: "",
type: "table",
form: {
col:{span:24},
props:{
table:{
component:{
rowKey:'fid',
height:'auto'
},
props:{
headerAlign:'center',
showNumber:true,
enabledFilter:true,
enabledSort:true,
enabledEdit:true,
editMode:'cell'
},
columns:{
name: {
title: "姓名",
type: "text",
props:{
filterData:selectData,
filterType:'multiple'
}
},
state:{
title:'状态',
type:'select',
props:{
valueMember:'id',
textMember:'text',
filterData:dictData,
request:{
getDataRequest:(query)=>{
return {data:dictData}
}
},
align:'center'
},
form:{
}
}
},
tableToolbar:{
show:true,
title:'表格编辑' ,
position:'top',
buttons:{
add:{
show:true,
},
delete:{
show:true,
},
save:{
show:true,
}
}
},
data:[]
},
request:{
getDataRequest:(query)=>{
let sort= query.sort;
let sortName='fid';
let order='asc';
if(sort && sort.length>0){
sortName=sort[0]['sortname'] ?? 'fid';
order = sort[0]['sortorder'] ?? 'asc';
}
data.sort((a,b)=>{
if(a[sortName]<b[sortName]){
return order==='asc'? -1 : 1;
}
if(a[sortName]>b[sortName]){
return order==='asc'? 1 : -1;
}
return 0;
});
var ret={data:[]};
for(var i=((query.pageIndex-1) * query.pageSize);
i<((query.pageIndex) * query.pageSize);
i++){
if(i<data.length){
ret.data.push(data[i]);
}
}
var pcount= parseInt(data.length / query.pageSize);
if((data.length % query.pageSize) !== 0){
pcount++;
}
ret.pageindex=query.pageIndex;
ret.pagesize=query.pageSize;
ret.rowcount=data.length;
ret.pagecount=pcount;
dn.message.success('模拟数据哦');
return ret;
},
saveRequest:({row,rows,key})=>{
console.log(rows);
//返回主键json
return {fid:999};
},
deleteRequest:({rows,rowIds})=>{
//rowIds: 逗号连接的主键
//rows:删的行数据
},
}
}
}
}
}
});
}
function initFormOptions() {
formOptions.value = createFormOptions();
formOptions.value.initData = { fid:1,childHandleTable:[]};
return {
formOptions,
formRef
};
}
export default defineComponent({
setup(props,ctx) {
onMounted(()=>{
formRef.value.children.childHandleTable.refresh();
});
return {
...initFormOptions()
}
}
});
</script>- 所有单元格进入编辑状态
<template>
<dn-page>
<dn-form ref="formRef" v-bind="formOptions"></dn-form>
</dn-page>
</template>
<script lang="jsx">
import {ref,defineComponent, onMounted} from "vue";
import { useForm,dn } from "@sdevnet/devnet-form";
const formRef = ref();
const formOptions = ref();
let data=[];
for(var i=0;i<8;i++){
let row = {
fid:(i+1),
name:'User Name'+i,
regcap:i + 35.67893,
regdate:new Date(),
isadmin: i % 2==0 ?1:0,
remark:'备注'+i,
state: i % 2==0 ?'0':"1",
};
data.push(row)
}
let selectData=[];
for(var i=0;i<10;i++){
selectData.push({
value:(i+1),
text:'Name'+i
})
}
let dictData=[
{id:"1",text:'打开',type:'primary'},
{id:"0",text:'关闭',type:'danger'}
];
function createFormOptions() {
const { buildFormOptions } = useForm();
return buildFormOptions({
columns: {
childHandleTable: {
title: "",
type: "table",
form: {
col:{span:24},
props:{
table:{
component:{
rowKey:'fid',
height:'auto'
},
props:{
headerAlign:'center',
showNumber:true,
enabledFilter:true,
enabledSort:true,
enabledEdit:true,
editMode:'full'
},
columns:{
name: {
title: "姓名",
type: "text",
props:{
filterData:selectData,
filterType:'multiple'
}
},
state:{
title:'状态',
type:'select',
props:{
valueMember:'id',
textMember:'text',
filterData:dictData,
request:{
getDataRequest:(query)=>{
return {data:dictData}
}
},
align:'center'
},
form:{
}
}
},
tableToolbar:{
show:true,
title:'表格编辑' ,
position:'top',
buttons:{
add:{
show:true,
},
delete:{
show:true,
},
save:{
show:true,
}
}
},
data:[]
},
request:{
getDataRequest:(query)=>{
let sort= query.sort;
let sortName='fid';
let order='asc';
if(sort && sort.length>0){
sortName=sort[0]['sortname'] ?? 'fid';
order = sort[0]['sortorder'] ?? 'asc';
}
data.sort((a,b)=>{
if(a[sortName]<b[sortName]){
return order==='asc'? -1 : 1;
}
if(a[sortName]>b[sortName]){
return order==='asc'? 1 : -1;
}
return 0;
});
var ret={data:[]};
for(var i=((query.pageIndex-1) * query.pageSize);
i<((query.pageIndex) * query.pageSize);
i++){
if(i<data.length){
ret.data.push(data[i]);
}
}
var pcount= parseInt(data.length / query.pageSize);
if((data.length % query.pageSize) !== 0){
pcount++;
}
ret.pageindex=query.pageIndex;
ret.pagesize=query.pageSize;
ret.rowcount=data.length;
ret.pagecount=pcount;
dn.message.success('模拟数据哦');
return ret;
},
saveRequest:({row,rows,key})=>{
console.log(rows);
//返回主键json
return {fid:999};
},
deleteRequest:({rows,rowIds})=>{
//rowIds: 逗号连接的主键
//rows:删的行数据
},
}
}
}
}
}
});
}
function initFormOptions() {
formOptions.value = createFormOptions();
formOptions.value.initData = { fid:1,childHandleTable:[]};
return {
formOptions,
formRef
};
}
export default defineComponent({
setup(props,ctx) {
onMounted(()=>{
formRef.value.children.childHandleTable.refresh();
});
return {
...initFormOptions()
}
}
});
</script>table API
参考 表格api
单元格编辑 API
| PropsName | Description | Type | Default |
|---|---|---|---|
...key | 上级key，见tableapi | json | |
| └ table | 表格配置 | string | |
└└ props | 按钮列配置 | json | |
└└└ enabledEdit | 是否启用编辑 | boolean | |
└└└ editMode | 编辑模式 | ||
└└ columns | 按钮列配置 | json | |
└└└ key | json | ||
| └└└└ props | 属性配置 | json | |
└└└└└ enabledEdit | 启用编辑 | boolean |