Web Demo Mobile Demo Angular Demo Vue Demo React Demo
源代码
<template>
  <div>
    <h2>Filtering</h2>
    <DataGrid ref="dg" :data="data" :filterable="true" style="min-width:700px;height:250px">
      <GridColumn field="itemid" title="Item ID"></GridColumn>
      <GridColumn field="name" title="Name"></GridColumn>
      <GridColumn field="listprice" title="List Price" align="right" :filterOperators="operators">
        <template slot="filter" slot-scope="scope">
          <NumberBox v-model="scope.column.filterValue" :precision="1" class="f-full">
          </NumberBox>
        </template>
      </GridColumn>
      <GridColumn field="unitcost" title="Unit Cost" align="right" :filterOperators="operators">
        <template slot="filter" slot-scope="scope">
          <NumberBox v-model="scope.column.filterValue" class="f-full">
          </NumberBox>
        </template>
      </GridColumn>
      <GridColumn field="attr" title="Attribute" width="30%"></GridColumn>
      <GridColumn field="status" title="Status" align="center">
        <template slot="filter">
          <ComboBox class="f-full"
              :data="status" 
              :editable="false"
              :inputStyle="{textAlign:'center'}"
              @valueChange="$refs.dg.doFilter({field:'status',op:'equal',value:$event.currentValue})">
          </ComboBox>
        </template>
      </GridColumn>
    </DataGrid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      operators: ["nofilter", "equal", "notequal", "less", "greater"],
      status: [
        { value: null, text: "All" },
        { value: "P", text: "P" },
        { value: "N", text: "N" }
      ]
    };
  },
  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: "N",
        listprice: 158.5,
        attr: "Tailless",
        itemid: "EST-14"
      },
      {
        code: "FL-DSH-01",
        name: "Manx",
        unitcost: 12.0,
        status: "N",
        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: "N",
        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>