In general, a table column needs to have multiple buttons that can be used to move forward, be it edit view or upload or download. The implementation of this part has been written by many people. The way to write this part of the operation is to separate the operation from the component, and each time just need to pass the operation type and the corresponding handler function. Systems that involve many forms, such as background management systems, are much more convenient.

Table – operation components

This component is very simple. It is an

that wraps around some

. These buttons are rendered through the operation array passed by the parent component. Operation is an array of only the type of the button and the text displayed on the button. The code for the entire component is as follows:

<template>
    <el-button-group>
        <el-button
          v-for="(op,index) in operations"
          :key="index"
          type="primary"
          size="mini"
          :icon="icons[op.type]"
          @click="clickOperation(op)"
        >{{op.title}}</el-button>
    </el-button-group>
</template>

<script>
export default {
    name: 'TableComponent',
    props: {
    operations: {
        type: Array
    },
    rawData: {
        type: Object
    }
    },
    data () {
        return {
            icons: {
                edit: 'el-icon-edit',
                view: 'el-icon-view'}}; }, methods: { clickOperation (operation) { this.$emit('handleOperation',operation,this.rawData); }}}; </script>Copy the code

ICONS specify which icon a particular type of button corresponds to

Components that use el-Table

Here the component is called table-page and only the

part is looked at

<el-table
    :data="list"
    class="mt-10"
    fit
    stripe
    empty-text="No data at present"
    :highlight-current-row="true"
    >
        <el-table-column
            v-for="(item, index) in table_title"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width? item.width:null"
            :min-width="item.minwidth? item.minwidth:null"
            :sortable="item.sortable? item.sortable:false"
            :align="item.columnAlign"
            :header-align="item.titleAlign"
        >
            <template slot-scope="scope">
                <template v-if="item.tag">
                    <slot name="tags" :scope="scope.row"></slot> </template> <span v-else>{{scope.row[item.prop]}}</span> </template> </el-table-column> <! If you want to customize the last column, you need to pass in an object and provide a template --> <el-table-column v-if="operates.operate" 
            :label="operates.label" 
            :width="operates.width"
            :align="operates.columnAlign"
            :header-align="operates.titleAlign">
            <template slot-scope="scope">
                <slot name="operates" :scope="scope"></slot>
            </template>
        </el-table-column>
    </el-table>
Copy the code

As you can see, after loiterating through the rest of the table, the last column is rendered as an action column that accepts the parent component’s operates object. This is a column that is similar to each of the other attributes in the array, but can be written together with the others, using v-if (as in the tag column above). Separate out here for the sake of illustration, place a slot for us to use the operating components.

Use the parent of both components

In the parent, first look at the above definitions of operation and operates passed to the two child components

const operates = {
  operate: true,
  label: 'operation',
  minwidth: '120px',
  titleAlign: 'center',
  columnAlign: 'center'}; const operations = [ {type: 'edit',
    title: 'edit'
  },
  {
    type: 'view',
    title: 'look at'}];Copy the code

How do you use these two components

<table-page
    :list="list"
    :table_title="table_title"
    :operates="operates">... // Other templates <template v-slot:operates="scope">
        <table-operation 
            :operations="operations"
            :rawData="scope.scope.row"
            @handleOperation="handleOperation"
        ></table-operation>
    </template>
</table-page>
Copy the code

passes a operates,
passes an operation and a function that handles the operation. This is the component that fills the slot for the operation.

So what does this function that handles the operation do?

methods: { ... , handleOperation(op,row) {if (op.type == 'edit') {// edit it}else if (op.type == 'view') {// look at it}},... }Copy the code

In the action component, we can also see that two arguments are passed back to the function, one for the action component and the other for this line of data. These two should solve most scenarios if you get them. The op type is used to determine which button is triggered, and then perform the corresponding operation, such as playing an

rendering