手把手教你学vue - 14 通用解决方法: 一键增删改查配置

增删改查是页面中最常见的基础功能了，这里小编推荐使用eladmin的Curd通用组件。一键导入，代码6的飞起

github：github.com/elunez/elad…

Crud组件

Crud组件由上到下分为：

新增、修改、删除、导出操作方法组件

分页组件

搜索、重置组件

全选按钮调用方法封装组件

方法封装与组件集成

代码

<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- *********************** 搜索 ***********************-->
        <el-input
          v-model="query.language"
          clearable
          size="small"
          placeholder="language"
          style="width: 160px"
          class="filter-item"
        />
        <rrOperation />
      </div>
      <crudOperation :permission="permission">
      </crudOperation>
    </div>

    <!-- ***********************表格渲染 *********************** -->
    <el-table
      ref="table"
      v-loading="crud.loading"
      border
      :data="crud.data"
      style="width: 100%"
      @select="crud.selectChange"
      @select-all="crud.selectAllChange"
      @sort-change="crud.sortChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column
        sortable
        prop="language"
        label="language"
      />
    </el-table>

    <!--表单渲染-->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :before-close="crud.cancelCU"
      :visible.sync="crud.status.cu > 0"
      :title="crud.status.title"
      id="single-dialog"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :xs="24" :sm="24" :md="24" :lg="24">
            <el-form-item :label="language" prop="language">
              <el-input
                v-model="form.language"
                placeholder="language"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">Cancel</el-button>
        <el-button
          :loading="crud.status.cu === 2"
          type="primary"
          @click="crud.submitCU"
          >Save</el-button
        >
      </div>
    </el-dialog>

    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import CRUD, { presenter, header, crud, form } from '@boCrud/crud'
import rrOperation from '@boCrud/RR.operation'
import crudOperation from '@boCrud/CRUD.operation'
import pagination from '@boCrud/Pagination'
import crudApi from './api'
import { mapGetters } from 'vuex'
import pageIds from '@/utils/pageIds'

// crud交由presenter持有
const defaultForm = {
  language: ''
}

export default {
  name: 'Language',
  components: { pagination, crudOperation, rrOperation },
  cruds () {
    return CRUD({
      url: 'admin/language/page',
      crudMethod: { ...crudApi }
    })
  },
  mixins: [presenter(), header(), crud(), form(defaultForm)],
  created () {

  },
  data () {
    return {
      permission: {
        add: ['admin', 'language:add'],
        edit: ['admin', 'language:edit'],
        del: ['admin', 'language:del']
      },
      rules: {
        language: [
          {
            required: true,
            message: 'Required',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {}
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>

一键搞定

128行的代码即可直线增删改查

类似的操作直接修改一下form表单、table字段、改一下API即可搞定

15分钟完成一个页面不在话下吧！

快去操作吧。6的飞起