Компонент Table на основе инкапсуляции Element UI Table

внешний интерфейс GitHub Element
Компонент Table на основе инкапсуляции Element UI Table

Компонент таблицы инкапсулирован на основе компонента таблицы Element UI, просто чтобы сэкономить вам несколько строк кода 😎.

100% бесшовная поддержка для всех функций таблицы элементов!

адрес проекта:GitHub.com/kinglysky/о…

Адрес документа:kinglisky.github.io/egrid

Зачем накладывать еще один слой поверх компонента таблицы элементов?

Таблица элементов, которую мы обычно используем, часто записывается так:

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      label="日期"
      width="180">
      <template scope="scope">
        <el-icon name="time"></el-icon>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="姓名"
      width="180">
      <template 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>{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template scope="scope">
        <el-button
          size="small"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

Если вам придется повторять этот фрагмент кода каждый раз, когда вы используете таблицу, ваш проект определенно будет иметь много избыточного кода с течением времени, и это не способствует сопровождению. В это время необходимо инкапсулировать еще один слой на основе исходного компонента формы, поместить эти повторяющиеся коды внутрь компонента и продумать, как настроить форму с помощью метода конфигурации при ее использовании.

Я думаю, что идеальным способом использования группы таблиц должно быть:

<egrid
  :other="other"
  :data="data"
  :columns="columns">
</egrid>

dataИсточник данных соответствующей таблицы,columnsИспользуется для настройки отображения отдельных столбцов в таблице.

Некоторые студенты могут сказать, что я могу просто инкапсулировать! Либо для рендеринга несколькихel-table-columnпредмет? Но после такой инкапсуляции, как определить пользовательский контент для рендеринга.

Ну, в том-то и дело,egridОн был написан для решения этих проблем.

Ранее я инкапсулировал простой компонент таблицы элементов в своем собственном проекте, но он был не очень универсальным, поэтому я решил переписать версию, чтобы она служила всем.

Я не буду говорить о конкретной реализации здесь, основные пользовательские компоненты зависят от<component>компонент реализован.

На самом деле это довольно просто реализовать.Исходный код здесь, но полностью поддерживает все функции таблицы элементов.

Документация здесь:kinglisky.github.io/egridAmway немного.

Категории