[JavaScript知识库]element plus组件二次封装

自定义表格

1. Table.vue 表格模板，通过插槽进行填充不同的结构

问题：用来做循环的父盒子不能template 不能添加自定义属性。求大老解决

<template>
  <el-table :data="tableData" style="width: 100%" class="tab">
    <template  v-for="item in tabcur" :key="item">
      <el-table-column :label="item.labelName"  v-if="item.compon">
        <template #default="scope">
          <slot :name="item.fied" :rows="scope.row">
            <p>自定义的组件</p>
          </slot>
        </template>
      </el-table-column>

      <el-table-column :prop="item.fied" :label="item.labelName" v-else />
    </template>

    <el-table-column fixed="right" label="操作" width='160'>
      <template #default="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
          >Edit</el-button
        >
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >Delete</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts">
export default {
  components: {},
  props: {
    tableData: Object,
    tabcur: Object
  },
  setup (props: any) {
    const handleEdit = (index: String, row: any) => {
      console.log(index, row)
    }
    const handleDelete = (index: any, row: any) => {
      console.log(index, row)
    }
    return {
      handleEdit,
      handleDelete
    }
  }
}
</script>

<style lang="less">
  .tab {
    margin-top: 30px;
  }
</style>

O2O.vue 使用

核心是作用域插槽

<template>
  <div class="ShopContainer">
    <Table :tableData="tableData" :tabcur="TabDataCur">
      <template #date="scope">
        <el-icon><timer /></el-icon>
        <span style="margin-left: 10px">{{ scope.rows.date }}</span>
      </template>

      <template #username="scope">
        <el-popover effect="light" trigger="hover" placement="top">
          <template #default>
            <p>姓名: {{ scope.rows.username }}</p>
            <p>住址: {{ scope.rows.address }}</p>
          </template>
          <template #reference>
            <div class="name-wrapper">
              <el-tag size="medium">{{ scope.rows.username }}</el-tag>
            </div>
          </template>
        </el-popover>
      </template>
    </Table>
  </div>
</template>
<script lang="ts">
import Table from './TableComm.vue'
import { reactive, toRefs } from 'vue'
import { Timer } from '@element-plus/icons'

export default {
  name: 'Shop',
  components: {
    Timer,
    Table
  },
  setup () {
    const data = reactive({
      // 数据结构
      TabDataCur: [
        {
          labelName: 'id',
          fied: 'id',
          compon: false
        },
        {
          labelName: '姓名',
          fied: 'username',
          compon: true
        },
        {
          labelName: '图片',
          fied: 'img',
          compon: true
        },
        {
          labelName: '手机号码',
          fied: 'phone',
          compon: false
        },
        {
          labelName: '会员编号',
          fied: 'uid',
          compon: false
        },
        {
          labelName: '订单信息',
          fied: 'order',
          compon: false
        },
        {
          labelName: '地址',
          fied: 'address',
          compon: false
        },
        {
          labelName: '订单状态',
          fied: 'orderStu',
          compon: true
        },
        {
          labelName: '支付状态',
          fied: 'payStu',
          compon: true
        },
        {
          labelName: '支付日期',
          fied: 'date',
          compon: true
        },
        {
          labelName: '支付方式',
          fied: 'pay',
          compon: false
        }
      ],
      // 数据
      tableData: [
        {
          date: '2016-05-03',
          username: 'cat',
          address: 'No. 189, Grove St, Los Angeles'
        },
        {
          date: '2016-05-02',
          username: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        },
        {
          date: '2016-05-04',
          username: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        },
        {
          date: '2016-05-01',
          username: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }
      ]
    })
    return {
      ...toRefs(data)
    }
  }
}
</script>

<style lang="less" scoped></style>