Vue jEasyUI Row Group + замороженная колонка показывает заголовок группы GridColum дважды - PullRequest
Новая
       36

Vue jEasyUI Row Group + замороженная колонка показывает заголовок группы GridColum дважды

0 голосов
/ 23 сентября 2019

У меня есть сетка данных, где первые 4 строки заморожены, мне также нужны группы строк, чтобы показать, сколько элементов в этой группе. Я использую Jeasy UI Datagrid для vue , и это многое делаетлегче, когда я делаю группы строк.Но когда я использую замороженный столбец, он показывает заголовок группы строк дважды: один раз для замороженных групп и один для остальных.То, что я понял, что использование замороженных столбцов создает два отдельных div, поэтому он помещает заголовок группы в оба div.

Пример кода того, что я пытаюсь сделать, приведен ниже, 

<template>
    <div>
        <h2>Row Group</h2>
        <DataGrid :data="data" groupField="code" style="height:250px">
                <GridColumnGroup :frozen="true" align="left" width="200">
                <GridHeaderRow>
            <GridColumn :cellCss="headerStyle" width="30"></GridColumn>
            <GridColumn field="itemid" title="Item ID"></GridColumn>
            <GridColumn field="name" title="Name"></GridColumn>
            </GridHeaderRow>
            </GridColumnGroup>
            <GridColumn field="listprice" title="List Price" align="right"></GridColumn>
            <GridColumn field="unitcost" title="Unit Cost" align="right"></GridColumn>
            <GridColumn field="attr" title="Attribute" width="30%"></GridColumn>
            <GridColumn field="status" title="Status" align="center"></GridColumn>
            <template slot="group" slot-scope="scope" >
                <span style="font-weight:bold">
                    {{scope.value}} - <span style="color:red">{{scope.rows.length}}</span> Item(s)
                </span>
            </template>
        </DataGrid>
    </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      headerStyle: {
        background: "#fafafa"
      }
    };
  },
  created() {
    this.data = [
      {
        code: "FI-SW-01",
        name: "Koi",
        unitcost: 10.0,
        status: "P",
        listprice: 36.5,
        attr: "Large",
        itemid: "EST-1"
      },
      {
        code: "K9-DL-01",
        name: "Dalmation",
        unitcost: 12.0,
        status: "P",
        listprice: 18.5,
        attr: "Spotted Adult Female",
        itemid: "EST-10"
      },
      {
        code: "RP-SN-01",
        name: "Rattlesnake",
        unitcost: 12.0,
        status: "P",
        listprice: 38.5,
        attr: "Venomless",
        itemid: "EST-11"
      },
      {
        code: "RP-SN-01",
        name: "Rattlesnake",
        unitcost: 12.0,
        status: "P",
        listprice: 26.5,
        attr: "Rattleless",
        itemid: "EST-12"
      },
      {
        code: "RP-LI-02",
        name: "Iguana",
        unitcost: 12.0,
        status: "P",
        listprice: 35.5,
        attr: "Green Adult",
        itemid: "EST-13"
      },
      {
        code: "FL-DSH-01",
        name: "Manx",
        unitcost: 12.0,
        status: "P",
        listprice: 158.5,
        attr: "Tailless",
        itemid: "EST-14"
      },
      {
        code: "FL-DSH-01",
        name: "Manx",
        unitcost: 12.0,
        status: "P",
        listprice: 83.5,
        attr: "With tail",
        itemid: "EST-15"
      },
      {
        code: "FL-DLH-02",
        name: "Persian",
        unitcost: 12.0,
        status: "P",
        listprice: 23.5,
        attr: "Adult Female",
        itemid: "EST-16"
      },
      {
        code: "FL-DLH-02",
        name: "Persian",
        unitcost: 12.0,
        status: "P",
        listprice: 89.5,
        attr: "Adult Male",
        itemid: "EST-17"
      },
      {
        code: "AV-CB-01",
        name: "Amazon Parrot",
        unitcost: 92.0,
        status: "P",
        listprice: 63.5,
        attr: "Adult Male",
        itemid: "EST-18"
      }
    ];
  }
};
</script>
...