Effect of vue-split-table application

Vue-split-table open source address, welcome star, now open source and synced to NPM easy to split/merge tables, edit tables, no longer not to be used by the product

1. Core source code analysis

  1. Nested inside to achieve table split;
  2. Native check box single and full selection function;
  3. The props property exposes property values like the parent component;
  4. The $emit custom event method passes values to the parent component;
  5. The scope slot passes HTML tags from the parent to the child;
  6. V-for does not allow the input tag to use v-Model to change the item value.
  7. Webpack packages the configuration

    8. Vue-split-table open source address, welcome star and PR

    2. Exposed Attributes

    parameter instructions type Whether will pass Default
    headData Content of the header Array Will pass –
    bodyData The table body content Array Will pass –
    checkFlag Whether there is a check column Boolean optional True
    tableEditFlag Whether the table is editable Boolean optional True
    operFlag Whether there is an action column Boolean optional True

    3. Events exposed

    name instructions parameter
    multipleData Change of the election triggered multipleData
    editData Table edit text box out of focus triggered editData

    4.slot

    The event name instructions
    operate After configuring the action column, you can configure the content of the action by setting the slot

    5. Pull up the sample code

    Vue based project <template> <split-table :headData="headData" :bodyData="bodyData" @multipleData="multipleData" @editData="editData">
    <template slot="operate" slot-scope="props">
      <span @click="splitEdit(props.rowData)"<span @click= <span @click="splitAdd(props.rowData)"> <span > <span @click="splitDel(props.rowData)"> Delete </span> </template> </split-table> </template> <script> import SplitTable from'vue-split-table';
  export default {
    components: { SplitTable },
    data () {
      return {
         headData: ["City"."Food"."Fun place"],
      bodyData: [
        { city: "Beijing", food: "Peking Duck", fun: ["The palace"."Summer Palace"."Great Wall"] },
        {
          city: "Shenzhen",food: ["Steamed vermicelli roll"."Beef hot pot"],fun: ["West blunt"."华侨城"."Window to the World"]
        },
        {
          city: ["Chongqing"."Chengdu"."Wuhan"],
          food: ["Chongqing Old Hot Pot".Chongqing Grilled Fish."Chongqing noodles"."Chengdu Snacks".Wuhan Hot and Dry Noodles],
          fun: [Hongya Cave.Mount Emei.Yellow Crane Tower]
        }
      ], 
      }
    },
    methods: {
    splitEdit(rowData) {
      console.log("RowData value is", rowData);
    },

    editData(data) {
      console.log("Edit row value is", data);
    }

    splitAdd(data) {
      console.log("Add row value to", data);
    },

    splitDel(data) {
      console.log("Delete row value is", data);
    },

    multipleData(data) {
      console.log("Check box selected value as", data);
    }
    }
  }
</script>
Copy the code

    Reference article:

    The clock component