Vue background management system — add, delete, modify and check list one-click configuration

Introduction to the

This paper mainly introduces how to simplify the large number of repeated table additions, deletions, modifications and checks in vUE management background projects. Use related configuration and can quickly complete a table list configuration and add, delete, change and check; This paper mainly draws on the ideas of Avue for encapsulation, and adds customized functions and deletion based on the source code.

preface

Due to the versatility and completeness of the large number of features designed, the article will continue to be updated in the spare time for features. I’m sure you’ve had the same kind of insight into encapsulation and design as I have in the process, and you’re welcome to leave comments in the comments section about features you’d like to add. If it helps you read this article, it won’t take you too long.

Certified components

1. Main.js globally injects the Avue component library

import Avue from './components/avuex/index'
Vue.use(Avue);
Copy the code

2. Components/Avuex /index Registers a global component

Import components from './element' const install = function(Vue){// global register component name Components. Map (component => { Vue.component(component.name, component); }); } export default {version:"1.0.0", install}Copy the code

3. Components/Avuex/Element Component entry

// Import all components
import Crud from './crud/index.vue';
export default [
    Crud
]
Copy the code

A basic table

<template>
  <div class="index">
    <mn-crud 
    :data="tableData"
    :option="listOption"> 
    </mn-crud> 
  </div>
</template>

<script type="text/javascript">
export default {
  name: "Index".data() {
    return {
      tableData: [{
            date: '2016-05-02'.name: 'Wang Xiaohu'.address: Lane 1518, Jinshajiang Road, Putuo District, Shanghai
          }, {
            date: '2016-05-04'.name: 'Wang Xiaohu'.address: Lane 1517, Jinshajiang Road, Putuo District, Shanghai
          }, {
            date: '2016-05-01'.name: 'Wang Xiaohu'.address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai'
          }, {
            date: '2016-05-03'.name: 'Wang Xiaohu'.address: Lane 1516, Jinshajiang Road, Putuo District, Shanghai}]}; },computed: {listOption(){
      return {
          column: [{label: 'date'.prop: 'date'}, {label: 'name'.prop: 'name'}, {label: 'address'.prop: 'address',},]}}},}</script>

Copy the code

So a simple table list has been completed, tableData is the list of data, listOption is the list of items, is not a lot of convenient, then we step by step to analyze mN-CRUD this component mystery.

Crud core components

First post code

components/avuex/index

<template>
  <div>
      <el-table :data="list">
          <column :columnOption="tableColumn">
          </column>
      </el-table>  
  </div>
</template>

<script type="text/javascript">
// Introduce the create global method
import create from '.. /.. /core/create'
import column from './column'

export default create({
  name: "crud".props: {
    data: {type:Array.require:true.default:() = >{
        return[]}},option: { // List the configuration items
        type: Object.required: true.default: () = > {
          return{}; }}},components: { column },
  data() {
    return {
        list: [].// The data shown in the table
    };
  },
  created(){
    //1. Initialize the list data
    this.dataInit()
    //2. Initialize column configuration
    this.initTableColumn()
  },
  mounted(){},
  methods: {
    //1. Initialize the list data
    dataInit(){
      this.list = this.data
    },
    //2. Initialize column configuration
    initTableColumn(){
      this.tableColumn = this.option.column.filter((o) = >o.hide ! = =true)}}})</script>

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

Copy the code

components/avuex/column

<template>
  <div>
      <template v-for="(column,index) in columnOption">
          <template>
             <el-table-column
              :key="`col_${index}`"
              :prop="column.prop"
              :label="column.label">
             </el-table-column>
          </template>
      </template>
  </div>
</template>

<script type="text/javascript">
export default {
  name: "column".props: {
    columnOption: {
      type: Array.default: () = > {
        return[]; }},},data() {
    return{}; }};</script>

Copy the code

• 1. Where did MN-CRUD come from?

Register the global component Vue.component(component.name, Component); Then the component name should be component.name, which is CRUD, so why do we use mn-CRUD?

Note that components/avuex/index has a create method that precedes the component name with a constant name. I've set mn here, so you can set whatever you want.import { COMMON_PREFIX_COMPONENT_NAME } from '.. /global/constant';
import bem from '.. /utils/bem';
export default function(component){
    component.name = COMMON_PREFIX_COMPONENT_NAME + component.name;
    component.mixins = component.mixins || [];
    component.mixins.push(bem);
    return component; 
}

Copy the code

• A global BEM naming method

The previous step introduced BEM to mixins

const ELEMENT = '__';
const MODS = The '-';

const join = (name, el, symbol) = > el ? name + symbol + el : name;

const prefix = (name, mods) = > {
  if (typeof mods === 'string') {
    return join(name, mods, MODS);
  }

  if (Array.isArray(mods)) {
    return mods.map(item= > prefix(name, item));
  }

  const ret = {};
  Object.keys(mods).forEach(key= > {
    ret[name + MODS + key] = mods[key];
  });
  return ret;
};

export default {
  methods: {
    b(el, mods) {  
      const { name } = this.$options;
      if (el && typeofel ! = ='string') {
        mods = el;
        el = ' ';
      }
      el = join(name, el, ELEMENT);

      returnmods ? [el, prefix(el, mods)] : el; }}};const ELEMENT = '__';
const MODS = The '-';

const join = (name, el, symbol) = > el ? name + symbol + el : name;

const prefix = (name, mods) = > {
  if (typeof mods === 'string') {
    return join(name, mods, MODS);
  }

  if (Array.isArray(mods)) {
    return mods.map(item= > prefix(name, item));
  }

  const ret = {};
  Object.keys(mods).forEach(key= > {
    ret[name + MODS + key] = mods[key];
  });
  return ret;
};

export default {
  methods: {
    b(el, mods) {  
      const { name } = this.$options;
      if (el && typeofel ! = ='string') {
        mods = el;
        el = ' ';
      }
      el = join(name, el, ELEMENT);

      returnmods ? [el, prefix(el, mods)] : el; }}};Copy the code

Globally we bind styles to be used

:class=”b()” b(‘a’) b(‘a’, [‘b’]

• b() // ‘mn-crud’
• b(‘a’) // ‘mn-crud__a’
• b(‘a’, [‘b’]) // ‘mn-crud__a mn-crud__a–b’
• b([‘c’, ‘d’]) // ‘mn-crud mn-crud–c mn-crud–d’

Time limited today first write here, there are still a lot of things to be improved, basically the configuration of the configuration is added, will continue to update later. The added content will be:

• Add a page

• Add global table mixins

• One-click configuration add, delete, modify and check

• Improved various table configurations

• Add list item dictionary, validate, rewrite

• And so on…

conclusion

• First update at: 2020/12/12 17:00
• Github Demo address mn-Avue

I only submitted a very initial simplified version for the first time. I believe you can certainly absorb some nutrients from the article. If it is a little help to you who see the article, please click “like”. No silicon step as far as a thousand miles!