elmentplus TreeSelect 封装 elementui 封装

刚学了vue，看了下elementUI的组件，自己写着玩。

基本需求如下

1. 单选全选框、分页
2. 类似iview一样通过传入选项数组来定制表头，传入数据数组来控制表格内容

单选全选分页就不多说了，就是用element自己的组件
这是官网列表的写法

<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="日期"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
  </el-table>

可以看到这个表格的选项是 el-table-column标签。然后数据和需求一样，直接传入数组，那我们直接循环渲染 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>

这是数据格式

cloumn: [
        {
          prop: "id",
          label: "用户ID"
        },
        {
          prop: "createDateTime",
          label: "创建时间"
        },
        {
          prop: "userName",
          label: "用户昵称"
        }
      ],

等等，如果想自定义列模板该咋办

自定义列模板

官网是通过插槽来定义的

<el-table-column
      label="姓名"
      width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.name }}</p>
          <p>住址: {{ 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>

但是好像和我看vue官网的插槽写法不一样啊?哦已经被废弃了啊

于是我在组件中这样写

<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>

我在数据格式中添加scope: true这个属性，这样如果遇到有这个属性的列，就启用我的插槽，插槽的名字是数据中的，在外层调用的时候，比如这一列我定的prop是action，然后具名插槽名字也就是action，在外层 v-slot:action

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

运行一下，效果出来了，好像就是这么回事

等等，好像有什么事忘了！

我编辑按钮点了怎么把这一行的数据传进去啊？？

还是看官网

通过这个插槽props

<template slot-scope="scope">

里面有个row属性

<p>姓名: {{ scope.row.name }}</p>

好吧这些都是废弃了的写法

最终结果

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>

调用：

<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="操作" width="400">
            <el-button size="mini" type="primary" plain @click="btn_info(row)">用户信息</el-button>
            <el-button size="mini" type="info" plain @click="btn_evaluate(row)">历史评价</el-button>
            <el-button size="mini" type="success" plain @click="btn_order(row)">历史订单</el-button>
            <el-button size="mini" type="danger" plain @click="btn_del(row)">删除</el-button>
          </el-table-column>
        </template>
      </DefaultTable>

和前面的相比，我把el-table-column标签放到外层，因为这个插槽props必须放在el-table-column标签上才能成功，想vue官网上那种写着template 标签上我不知道为啥就用不了。

注意这个<el-table-column #default="{row}" label="操作" width="400"> 如果想下面一样写着template是获取不了row的，希望有大佬解释下为啥。。。。

可能这个组件里面也是用的插槽，所以数据要写在上面才能获得。

完成

这样就可以通过修改传入的数组加上在模板中写，可以达成在需要的列进行自定义的效果