I just learned vue, looked at the components of elementUI, and wrote and played by myself.

The basic needs are as follows

1. Check all boxes, Pagination
2. Like iview, the table header is customized by passing in an array of options, and the table content is controlled by passing in an array of data.

It's not much to say that single-choice paging is to use element's own components.
This is the way to write the list of official websites.

  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="date"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
  </el-table>

You can see that the option for this table is the el-table-column tag. Then data and requirements are passed directly into the array, so let's iterate directly to render el-table-column.

 <el-table-column
        v-for="(item,index) in cloumn"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width==null?'auto':item.width"
      >
      </el-table-column>

This is the data format.

 cloumn: [
        {
          prop: "id",
          label: "user ID"
        },
        {
          prop: "createDateTime",
          label: "Creation time"
        },
        {
          prop: "userName",
          label: "nickname"
        }
      ],

Wait, what if you want to customize the column template

Custom Column Template

Official website is defined by slots

 <el-table-column
      label="Full name"
      width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>Full name: {{ scope.row.name }}</p>
          <p>address: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>

But it seems different from the way I read the slot on the vue website? Oh, it has been abandoned.

So I wrote this in the component

      <el-table-column v-if="cloumn.length" type="selection" width="55"></el-table-column>
      <el-table-column
        v-for="(item,index) in cloumn"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width==null?'auto':item.width"
      >
        <slot v-if="item.scope" :name="item.prop"></slot>
      </el-table-column>

I add scope: true to the data format so that if I encounter a column with this attribute, my slot will be enabled. The name of the slot is in the data. When calling from the outside, for example, when this column is prop action, then the name of the named slot is action, in the outer v-slot:action.

 <DefaultTable
      :cloumn="cloumn"
      :data="data"
      @handle-selection="handleSelection"
      @handle-page="handlePage"
    >
      <template v-slot:action  >
          <el-button size="mini" @click="handleEdit()">edit</el-button>
      </template>
    </DefaultTable>

Run it, the effect comes out, as if that's the case.
Wait, it seems that something has been forgotten!
I clicked the edit button. How can I transfer the data in this line?

Or watch the official website
Through this slot props

 <template slot-scope="scope">

There's a row attribute inside.

<p>Full name: {{ scope.row.name }}</p>

Well, these are all abandoned expressions.

final result

DefaultTable

    <el-table
      :data="data"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
      ref="multipleTable"
    >
      >
      <el-table-column v-if="cloumn.length" type="selection" width="55"></el-table-column>
      <template v-for="(item,index) in cloumn">
        <el-table-column v-bind="item" v-if="!item.scope" :key="index"></el-table-column>
        <slot v-if="item.scope" :name="item.prop"></slot>
      </template>
    </el-table>

Call:

 <DefaultTable
        ref="table"
        :cloumn="cloumn"
        :data="data"
        :totalNum="totalNum"
        @handle-selection="handleSelection"
        @handle-page="handlePage"
      >
        <template v-slot:action>
          <el-table-column #default="{row}" label= "operation" width= "400">
            <el-button size="mini" type="primary" plain @click="btn_info(row)">User Information</el-button>
            <el-button size="mini" type="info" plain @click="btn_evaluate(row)">Historical evaluation</el-button>
            <el-button size="mini" type="success" plain @click="btn_order(row)">Historical orders</el-button>
            <el-button size="mini" type="danger" plain @click="btn_del(row)">delete</el-button>
          </el-table-column>
        </template>
      </DefaultTable>

Compared with the previous one, I put the el-table-column tag on the outer layer, because the slot props must be placed on the el-table-column tag to succeed. I don't know why I don't need the template tag on the vue website.
Notice this <el-table-column#default="{row}" label= "operation" width= "400">
If you want to write that template can't get row s as follows, I hope you have a big man to explain why...
Maybe the socket is also used in this component, so the data can only be obtained by writing on it.

complete

This allows you to customize the columns you need by modifying the incoming array and writing in the template.