A Table similar to elementUI’s column definition notation –BeeGridTable

Home

• A table table component based on vuejs2. x
• Has rich features and easy to use API

Syntactic sugar report

$\color{mediumTurquoise}{1, Column Definition Syntax}$

<BeeGridTable border height="560" :showSummary="false" fixed="left" :data="data" > <BeeColumn field="code" title="Code"></BeeColumn> <BeeColumn field="name" title="Name" resizable></BeeColumn> <BeeColumn field="sex" title="Sex"  type="number"> </BeeColumn> </BeeGridTable>

  
  data() {
    return {
      // columns: [],
      data: [],
      ...
    };
  },
      

• The BeeColumn is a component that can be used to define column information

$\color{mediumTurquoise}{2, column header definition syntax}$

<BeeGridTable border height="560" :showSummary="false" fixed="left" :data="data" > <BeeColumn field="code" title="Code"></BeeColumn> <BeeColumn field="name" title="Name" resizable></BeeColumn> <BeeColumn field="sex" title="Sex"  type="number"> <template slot-scope="{ row }"> <i style="font-size: x-large" class="bee-sys-icon md-man" v-if="row.sex === 0" ></i> <i style="font-size: x-large; color: red" class="bee-sys-icon md-woman" v-else ></i> </template> </BeeColumn> <BeeColumnHeader field="sex"> <template slot-scope="{ column }"> <Button style="color: red">{{ column.title }}</Button> </template> </BeeColumnHeader> </BeeGridTable>

  
  data() {
    return {
      // columns: [],
      data: [],
      ...
    };
  },
      

• BeeColumn default slot, incoming parameter has the current rendering row row, can customize data display, gender here is rendered as icon icon
• You can customize the header for the BeeColumnHeader. For example, the header for the Sex field here is rendered as a Button Button

$\color{mediumTurquoise}{3, Column Filter Definition Syntax}$

<BeeGridTable border height="560" :showSummary="false" fixed="left" :data="data" > <BeeColumn field="code" title="Code"></BeeColumn> <BeeColumn field="name" title="Name" resizable></BeeColumn> <BeeColumn field="sex" title="Sex"  type="number"> <template slot-scope="{ row }"> <i style="font-size: x-large" class="bee-sys-icon md-man" v-if="row.sex === 0" ></i> <i style="font-size: x-large; color: red" class="bee-sys-icon md-woman" v-else ></i> </template> </BeeColumn> <BeeColumn field="state" title="State"> <template slot-scope="{ row }"> <Select v-model="row.state" style="width: 100px"> <Option v-for="item in stateList" :value="item.value" :key="item.value" >{{ item.label }}</Option > </Select> </template> </BeeColumn> <BeeColumn field="group" title="Group"> <template slot-scope="{ row }"> <Select v-model="row.groupCode" style="width: 100px"> <Option v-for="item in groupList" :value="item.code" :key="item.name" >{{ item.name }}</Option > </Select> </template> </BeeColumn> <BeeColumnHeader field="sex"> <template slot-scope="{ column }"> <Button style="color: red">{{ column.title }}</Button> </template> </BeeColumnHeader> <BeeColumnFilter field="sex" :selectedSexCode="selectedSexCode" :filterValue="1" type="number" > <template slot-scope="{ column, doSortAndFilter }"> <RadioGroup v-model="column.selectedSexCode" @on-change="sexSelected(column, doSortAndFilter)" > <Radio label="-1"> <i class="bee-sys-icon md-people"></i> <span>All</span> </Radio> <Radio label="0"> <i class="bee-sys-icon md-man"></i> <span>Boy</span> </Radio> <Radio label="1"> <i style="color: red" class="bee-sys-icon md-woman"></i> <span>Girl</span> </Radio> </RadioGroup> </template> </BeeColumnFilter> </BeeGridTable>

 data() {
    return {
      columns: [
        ...
        { title: "Sex", slot: "sex", key: "sex", width: 150, resizable: true },
        ...
        {
          title: "Group",
          slot: "group",
          key: "groupName",
          resizable: true,
        },
        {
          title: "State",
          slot: "state",
          key: "state",
          width: 200,
        },
        {
          title: "Operation",
          slot: "op",   //custom column slot
          headSlot: "hop", //custom column header slot
          key: "op",
          width: 150,
        },
      ],
      data: [],
      groupList: [
        {
          code: 1,
          name: "First"
        },
        {
          code: 2,
          name: "Second"
        },
        {
          code: 3,
          name: "Third"
        }
      ],
      stateList: [
        {
          value: 0,
          label: "Prepare"
        },
        {
          value: 1,
          label: "Start"
        },
        {
          value: 2,
          label: "Burst"
        },
        {
          value: 3,
          label: "End"
        }
      ],
      ...
    };
  },

• The default slot is passed in column, dosortAndFilter, which defines and controls the callback triggered by the filter for the current column, respectively.

  <template slot-scope="{ column, doSortAndFilter }">

  conclusion

  As you can see from the above, BeeGridTable's API design is quite user-friendly. The entire table is written in the same way as ElmentUI's table, but it is quite powerful.