D2 Crud, простой в использовании компонент таблицы

внешний интерфейс HTTPS GitHub Element
D2 Crud, простой в использовании компонент таблицы

D2-Crudпредставляет собой набор, основанный наVue.js 2.2.0+а такжеElement UI 2.0.0+компонент формы.D2-CrudБудуElementФункции таблицы были инкапсулированы, и были добавлены общие функции, такие как добавление, удаление, изменение и запрос таблиц, проверка данных и редактирование в таблице. Большинство функций можно настроитьjsonвнедрили, внедрили и расширилиElememtХотя табличный компонент функционирует, он снижает сложность разработки, уменьшает объем кода и значительно упрощает процесс разработки.

Гитхаб:2-проекты на GitHub.com/…

Документация:2-projects.GitHub.IO/2-admin-do…

Пример:2-projects.GitHub.IO/2-admin/#/…

Пример развёрнут на Github Pages Если у вас не очень хорошая сеть (проект примера содержит большое количество примеров, объём большой), пожалуйста, выполните клонпроектНачните локально.

автор

Аккаунт, который опубликовал эту статью, неD2-CrudОригинальный авторский аккаунт.

Адрес автора Наггетс:@забытая легенда.

Автор гитхабsunhaoxiang

Приглашаем всех обратить внимание на его поддержку и поддержать нас, чтобы мы продолжали открывать исходный код ~

Введение в функцию

  • Унаследовал все функции таблицы в Element
  • таблица добавить данные
  • данные модификации таблицы
  • форма удалить данные
  • Рендеринг содержимого таблицы и форма редактирования содержимого с использованием компонентов в Element
  • Проверка редактирования формы
  • Режим прямого редактирования в таблице

как использовать

Установить с помощью нпм:

npm i element-ui @d2-projects/d2-crud -S

Установить с помощью пряжи:

yarn add element-ui @d2-projects/d2-crud

существуетmain.jsНапишите следующее в:

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import D2Crud from '@d2-projects/d2-crud'

Vue.use(ElementUI)
Vue.use(D2Crud)

new Vue({
  el: '#app',
  render: h => h(App)
})

Пример простой таблицы:

<template>
  <div>
    <d2-crud
      ref="d2Crud"
      :columns="columns"
      :data="data"/>
  </div>
</template>

<script>
export default {
  data () {
    return {
      columns: [
        {
          title: '日期',
          key: 'date'
        },
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '地址',
          key: 'address'
        }
      ],
      data: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    }
  }
}
</script>

Следующее изображение является результатом рендеринга приведенного выше фрагмента кода:

Пример

Добавить данные

新增数据
Демонстрационный адрес:2-projects.GitHub.IO/2-admin/#/…

изменить данные

修改数据
Демонстрационный адрес:2-projects.GitHub.IO/2-admin/#/…

удалить данные

删除数据
Демонстрационный адрес:2-projects.GitHub.IO/2-admin/#/…

проверка формы

表单校验
Демонстрационный адрес:2-projects.GitHub.IO/2-admin/#/…

Редактирование в форме

表格内编辑
Демонстрационный адрес:2-projects.GitHub.IO/2-admin/#/…

Пример с функцией редактирования удаления и прямым использованиемElement UIсравнение кода

Используя D2 Crud:

<template>
  <div>
    <d2-crud
      ref="d2Crud"
      :columns="columns"
      :data="data"
      index-row
      selection-row
      :rowHandle="rowHandle"
      :form-template="formTemplate"
      @row-edit="handleRowEdit"
      @row-remove="handleRowRemove"/>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        columns: [
          {
            title: '日期',
            key: 'date'
          },
          {
            title: '姓名',
            key: 'name'
          },
          {
            title: '地址',
            key: 'address'
          }
        ],
        data: [
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }
        ],
        rowHandle: {
          edit: {
            size: 'mini'
          },
          remove: {
            size: 'mini'
          }
        },
        formTemplate: {
          date: {
            title: '日期',
            value: ''
          },
          name: {
            title: '姓名',
            value: ''
          },
          address: {
            title: '地址',
            value: ''
          }
        }
      }
    },
    methods: {
      handleRowEdit ({index, row}, done) {
        this.$message({
          message: '编辑成功',
          type: 'success'
        })
        done()
      },
      handleRowRemove ({index, row}, done) {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        done()
      }
    }
  }
</script>

Используйте табличный компонент Element UI напрямую:

<template>
  <div>
    <el-table
      :data="tableData">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        prop="date"
        label="日期">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, tableData)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="编辑"
      :visible.sync="showDialog">
      <el-form>
        <el-form-item label="日期">
          <el-input v-model="form.date"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleEditSave">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }
        ],
        form: {
          date: '',
          name: '',
          address: ''
        },
        showDialog: false
      }
    },
    methods: {
      handleEdit (index, row) {
        this.showDialog = true
        this.editIndex = index
        this.form = row
        this.$message({
          message: '编辑成功',
          type: 'success'
        })
      },
      handleEditSave () {
        this.showDialog = false
      },
      handleDelete (index, rows) {
        this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          rows.splice(index, 1)
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        })
      }
    }
  }
</script>

Введение в проекты D2

Домашняя страница команды:github.com/d2-projects

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

присоединиться к группе

Официальная общедоступная учетная запись команды проекта с открытым исходным кодом, обратите внимание на своевременное получение последней информации об обновлениях, адресов документов и соответствующих технических статей:

Группа обмена QQ из 2000 человек, своевременно отвечающая на вопросы и сомнения:

Если вам нужно добавить группу WeChat, следуйте официальной учетной записи, чтобы получить QR-код в нижнем меню.

Категории