when i use the Pro version, i want to make a resource chart
but the config: resourceConfig doesn’t work . config: resourceConfig overwrites the style of this.gantt.config.columns = this.tasks.columns。
It uses the same column style for both.
I wrote it according to the example on the official website, but I still can’t get it out。How to implement it correctly？
7.0.13 Pro version
Blockquote
tasks: {
data: [],
links: [],
columns: [
{
name: ‘sort’,
label: ‘Sort’,
min_width: 66,
template: function (obj) {
console.log(obj)
if (obj.parent === 0) {
return (‘’ + obj.sort + ‘’)
}
}
},
{ name: ‘car’, label: ‘Car’, tree: true, width: ‘*’, min_width: 150 },
{ name: ‘project_name’, label: ‘Name’, align: ‘center’ },
{ name: ‘duration’, label: ‘Duration’, align: ‘center’ },
{ name: ‘start_date’, label: ‘Start’, align: ‘center’, min_width: 150 },
{ name: ‘end_date’, label: ‘End’, align: ‘center’, min_width: 150 },
],
// 底部关联table数据
resource:{
columns:[
{
name: “name”, label: “Name1”, tree:true, template: function (resource) {
console.log(resource)
return resource.text;
}
},
],
resource_data:[
{id: 1, text:‘first’,parent:null},
{id: 2, text:‘decond’,parent:null},
]
}
Blockquote
this.gantt.config.columns = this.tasks.columns
this.gantt.templates.resource_cell_value = function (start_date, end_date, resource, tasks) {
console.log(tasks);
return "<div>" + tasks.length * 8 + "</div>";
}
this.gantt.config.resource_store = "resource"
this.gantt.config.resource_property = "owner_id"
this.gantt.config.order_branch = true
let resourceConfig={
columns:this.tasks.resource.columns
}
this.gantt.config.layout = {
css: "gantt_container",
rows: [
{
cols: [
{view: "grid", scrollable: true,group:"grids",scrollY: "scrollVer",gravity:1},
{resizer: true, width: 1},
{view: "timeline",gravity:3, scrollX: "scrollHor", scrollY: "scrollVer"},
{view: "scrollbar", id: "scrollVer", group:"vertical"}
],
gravity:2
},
{resizer: true, width: 1},
{
cols: [
{view: "resourceGrid",config: resourceConfig, group:"grids",scrollY: "resourceVScroll" },
{resizer: true, width: 1},
{view: "resourceTimeline", gravity:3,scrollX: "scrollHor", scrollY: "resourceVScroll"},
{view: "scrollbar", id: "resourceVScroll", group:"vertical"}
],
gravity:1
},
{view: "scrollbar", id: "scrollHor"}
]
}
Blockquote
this.gantt.init(this.$refs.gantt)
this.gantt.parse(this.$props.tasks)
if(this.tasks.resource){
var resourcesStore = this.gantt.createDatastore({
name: _this.gantt.config.resource_store,
type: “treeDatastore”,
initItem: function (item) {
console.log(item)
item.parent = item.parent || _this.gantt.config.root_id;
item[_this.gantt.config.resource_property] = item.parent;
// item.open = true;
console.log(item)
return item;
}
});
this.resourcesStore = resourcesStore
resourcesStore.parse(this.tasks.resource.resource_data)
}
The display effect is
