vue2-dhtmlx
v0.0.3
Published
dhtmlx components for vue2
Downloads
25
Readme
vue2-dhtmlx
Usage
<template>
<div style="width: 100%;height: 100%;">
<div>
<el-button @click="toggleSortable"
>{{ sortable ? "关闭" : "开启" }}排序</el-button
>
<el-button @click="toggleEditable"
>{{ editable ? "关闭" : "开启" }}编辑</el-button
>
</div>
<dhx-grid :data="tableData" @row-change="handleRowChange">
<grid-column
prop="country"
title="国家"
header-filter="combo"
:editable="editable"
>
<template v-slot:default="slotProps">
<div style="display: flex;">
<div>{{ slotProps.cellValue }}</div>
<el-button
type="primary"
size="small"
@click="handleClick(slotProps.row)"
>默认按钮</el-button
>
</div>
</template>
</grid-column>
<grid-column
prop="population"
title="人口"
width="150"
:sortable="sortable"
:editable="editable"
>
<template v-slot:default="slotProps">
<el-tag type="success">{{ slotProps.cellValue }}</el-tag>
</template>
</grid-column>
<grid-column
prop="density"
title="人口密度"
width="150"
:sortable="sortable"
:editable="editable"
></grid-column>
<grid-column
prop="area"
title="面积"
width="150"
:sortable="sortable"
:editable="editable"
></grid-column>
<grid-column
prop="migrants"
title="移民"
width="150"
:sortable="sortable"
:editable="editable"
></grid-column>
<grid-column
prop="age"
title="年龄"
:sortable="sortable"
:editable="editable"
></grid-column>
</dhx-grid>
</div>
</template>
<script>
export default {
name: "grid-demo",
data() {
return {
tableData: [
{
"country": "China",
"population": "1415045928",
"yearlyChange": "0.0039",
"netChange": "5528531",
"density": "151",
"area": "9388211",
"migrants": "-339690",
"fert": "1.6",
"age": "37",
"urban": "0.5800",
"id": "1"
},
... and more
],
sortable: true,
editable: false
};
},
methods: {
handleClick(row) {
console.log(row);
this.$message(row.country);
},
toggleSortable() {
this.sortable = !this.sortable;
},
toggleEditable() {
this.editable = !this.editable;
},
handleRowChange({ value, row, column }) {
console.log(value, row, column);
}
}
};
</script>