树形表格

前置知识 #

参考elementUI表格的方法

在Body加入组件 #

模板 –> UI组件 –> 表格 然后在外层加入一个拖拽容器

<div class="smtdrag" id="id_1722855049012">
<el-table :data="d0.tableData" height="100%" size="mini" border style="width:100%">
<el-table-column v-for="item in d0.tableHead" :label="item.label" :property="item.prop"  sortable></el-table-column>
</el-table>
</div>

然后在 el-table的标签中加入属性

    row-key="id"
    lazy
    :load="load"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"

新增一个数据集(拖拽图形) #

0号数据集编辑器中写入查询

select province,sum(qty) as qty from smartdemo
group by province

图形选择VUE表格, 并如下修改，增加id字段

let df0 = __dataset__;

//处理表头
let tableHead = [];
let tableHeadLabel;
for (let i=0;i<df0[0].length;i++){
    tableHeadLabel=df0[0][i];
    tableHead.push({label: tableHeadLabel, prop:df0[0][i]});
}

//增加树表格ID
df0[0].push('id');
df0[0].push('hasChildren');
for (let i=1;i< df0.length;i++){
   df0[i].push(ds_generateUUID());
   df0[i].push(1);
}


//VUE赋值,在模板中加入表格组件
vapp.d0 = {tableHead:tableHead,tableData:ds_createMap_all(df0)};

新增一个懒加载数据集 #

1号数据集编辑器中写入查询

select c3, sum(qty) as qty from smartdemo
where province='$province'
group by c3

图形如下修改，增加id字段

data1 = __dataset__;

data1[0].push('id');
for (let i=1;i< data1.length;i++){
  data1[i].push(ds_generateUUID())
}

在JS区域加入 # 

var vapp=new Vue({el:'#vue_app',delimiters:['{[',']}'],
 data:{
   d0:''
 },
 methods:{
   load(tree, treeNode, resolve) {
     ds_setParam('province', tree.province);
     ds_refresh(1);
     data1[0][0] = 'province'; //因为需将第一列显示在province这一列
     resolve(ds_createMap_all(data1));
   }
}
});
Edit Edit this page