NPM address

# vue-element-easy-table

vue-element-easy-table

• A simple table based on the re-encapsulation of Element-UI table

• Fully supports all attributes of the Element UI Table component

The installation

npm i vue-element-easy-table
Copy the code

The sample

// in main.js
import EasyTable from "vue-element-easy-table";
Vue.use(
  EasyTable,
  /* Global configuration, element-UI table attributes are available */ {
    // Table properties
    tableAttrs: {
      border: true.size: "small"."header-row-class-name": "className",},// Cell attributes
    tableColumnAttrs: {
      align: "center".emptyPlaceholder: "--".omit: {
        rows: 2.direction: "top",}},// Paging properties
    paginationAttrs: {
      align: "right",}});Copy the code

<EasyTable
  row-id="id"
  :data="tableData"
  :tableOptions="tableOptions"
  :page.sync="page"
  :page-size.sync="size"
  :total="total"
  :checkbox-config="{fetchVal: true, rowClick: true}"
  :radio-config="{selectedVal: selectedVal, fetchVal: true, rowClick: true}"
  @selected-change="select"
  @checked-change="handleChecked"
  @pagination="handleChangePage"
/>
Copy the code

export default {
  name: "App".components: {},
  data() {
    return {
      page: 1.size: 10.total: 1000.selectedVal: -1.tableData: [{id: 10.date: "2016-05-02".name: "Wang Xiaohu".address: Lane 1518, Jinshajiang Road, Putuo District, Shanghai.type: "1".img: require("@/assets/images/avatar.jpg"),
          status: 1}, {id: 21.date: "2016-05-04".name: "Wang Xiaohu".address:
            "Lane 1517, Jinshajiang Road, Putuo District, Shanghai".type: 0.img: require("@/assets/images/avatar.jpg"),
          status: 1}, {id: 33.date: "2016-05-01".name: "Wang Xiaohu".address: Lane 1519, Jinshajiang Road, Putuo District, Shanghai.type: false.img: require("@/assets/images/avatar.jpg"),
          status: 2}, {id: 4.date: "2016-05-03".name: "Wang Xiaohu".address: Lane 1516, Jinshajiang Road, Putuo District, Shanghai.type: 1516 Jinshajiang Road, Putuo District, Shanghai.img: require("@/assets/images/avatar.jpg"),
          status: 0,}]}; },computed: {
    tableOptions() {
      return[{title: "Radio".type: "radio"}, {title: "Date".prop: "date".merge: [{title: "Name".prop: "name".merge: [{title: The name of the "1".prop: "name"}, {title: "Address".prop: "address".returnVal: (value) = > {
                    return 'Detailed Address:${value}`; },},],}, {title: "Address".prop: "address",},],}, {title: "The name of the 111".prop: "type".renderHeader: () = > {
            return (
              <span>
                <span>Custom table headers</span>
                <sup>*</sup>
              </span>
            );
          },
          returnVal: (value, row) = > {
            return ` name:${value}`; }, {},title: "Image".render: (h, data) = > {
            return (
              <div>
                <img style="width: 50px; height: 50px" src={data.img} />
              </div>); }, {},title: "Address".prop: "address".omit: {
            effect: "light".rows: 2.direction: "top",}}, {title: "Address".prop: "address".omit: 1}, {title: "State".prop: "status".enumType: [{value: 0.label: "Not started"}, {value: 1.label: "Already started"}, {value: 2.label: "In progress",},],}, {title: "State 2".prop: "status".enumType: {
            // Customize enumeration parameters
            params: {
              value: "status".label: "text",},data: [{status: 0.text: "Not started"}, {status: 1.text: "Already started"}, {status: 2.text: "In progress",},],},},]; }},methods: {
    handleChangePage({ page, size }) {
      console.log(page, size);
      console.log(this.page);
      console.log(this.size);
    },
    handleChecked(data) {
      console.log("radio");
      console.log(data);
    },
    select(data) {
      console.log("selected");
      console.log(data); ,}}};Copy the code

Table Global Attribute

Table Attribute

Table Options

Table Events