el-table-prepend

A Vue 2.0 component that adds a prepend slot to Element UI's el-table

Introduction

el-table-prepend extends the popular Element UI table component by adding a prepend slot. This allows you to insert custom content (toolbars, filters, buttons, etc.) between the table header and body.

Requirements

• Element UI 2.15.14

Installation

npm install el-table-prepend
# or
yarn add el-table-prepend
# or
pnpm add el-table-prepend

Quick Start

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import ElTablePrepend from 'el-table-prepend'

Vue.use(ElementUI)
Vue.component('ElTablePrepend', ElTablePrepend)

Usage

<template>
  <el-table-prepend :data="tableData" border @selection-change="handleSelection">
    <!-- Prepend slot content (appears between header and body) -->
    <template #prepend>
      <div class="table-toolbar">
        <el-button type="primary" size="small" @click="handleAdd">Add</el-button>
        <el-button size="small" @click="handleExport">Export</el-button>
        <el-input 
          placeholder="Search" 
          size="small" 
          style="width: 200px" 
          v-model="search" 
        />
      </div>
    </template>

    <!-- Regular table columns -->
    <el-table-column type="selection" width="55" />
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table-prepend>
</template>

<script>
export default {
  data() {
    return {
      search: '',
      tableData: [{
        date: '2024-01-01',
        name: 'John Doe',
        address: 'New York, NY'
      }]
    }
  },
  methods: {
    handleAdd() {
      // add logic
    },
    handleExport() {
      // export logic
    },
    handleSelection(val) {
      console.log('Selected:', val)
    }
  }
}
</script>