vue2-dhtmlx v0.0.3

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>