vue + ElementUI（饿了么UI） ---增删改查（用localStorage存储数据+过滤搜索）--demo

新增和修改写到了一个文件上
该目录会上传到gitee上

.eslintrc.js
最后一行是自己添加的，其余内容是脚手架自动生成的

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', '@vue/standard'],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'space-before-function-paren': 'off'
  }
}

.prettierrc

{
  "singleQuote": true,
  "semi": false,
  "trailingComma": "none"
}

vue.config.js
这个文件，感觉有没有都无所谓

module.exports = {}

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// elementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

home.vue

<template>
  <div id="home">
    <!-- <div id="nav"> -->
    <!-- 按钮 -->
    <el-row class="el-row">
      <el-button type="primary" @click="navTo('addData')">新增</el-button>
    </el-row>
    <!-- 搜索 -->
    <el-input placeholder="请输入内容" v-model="input" clearable></el-input>
    <!-- </div> -->
    <!-- 列表 -->
    <el-table :data="input=='' ?tableData:tableData1" style="width: 100%">
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column property="name" label="名字"></el-table-column>
      <el-table-column property="imgUrl" label="主图">
        <template slot-scope="scope">
          <img :src="scope.row.imgUrl" alt style="width:80px;height:80px;" />
        </template>
      </el-table-column>
      <el-table-column property="nums" label="库存"></el-table-column>
      <el-table-column property="price" label="价格"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- <el-button size="mini" @click="navTo('addData', scope.row.id)" -->
          <el-button size="mini" @click="navTo('addData', scope.$index)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 组件 -->
    <router-view />
  </div>
</template>
<script>
export default {
  data() {
    return {
      input: '',
      tableData: [
        {
          id: '1',
          name: '1',
          imgUrl: '1',
          nums: '1',
          price: '1'
          // delivery: false
        }
      ]
      // isSearch: false
    }
  },
  created() {
    this.tableData = JSON.parse(localStorage.getItem('DataList'))
    console.log(this.tableData)

    
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(index, row) {
      console.log(index, row)
      const bool = window.confirm('是否删除此项信息')
      if (bool) {
        this.tableData.splice(index, 1)
        localStorage.setItem('DataList', JSON.stringify(this.tableData))
      }
    },
    navTo(routeName, index) {
      this.$router
        .push({ name: routeName, params: { index: index } })
        .catch(() => {})
    }
    /* navTo(routeName, id) {
      this.$router.push({ name: routeName, params: { id: id } })
    } */
  },
  computed: {
    tableData1() {
      // if (this.input) {
      return this.tableData.filter((item) => item.name.indexOf(this.input) > -1)
      // }
    }
  }
}
</script>
<style scoped>
#home {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 10px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
/* 按钮 */
.el-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
}
</style>

addData.vue

<template>
  <div class="addData">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="ID" v-show="ruleForm.isShow">
        <el-input v-model="ruleForm.id" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="书名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="主图" prop="imgUrl">
        <el-input v-model="ruleForm.imgUrl"></el-input>
      </el-form-item>
      <el-form-item label="库存" prop="nums">
        <el-input v-model="ruleForm.nums"></el-input>
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-input v-model="ruleForm.price"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')" v-show="ruleForm.isAdd">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')" v-show="ruleForm.isAdd">重置</el-button>
        <el-button type="danger" v-show="ruleForm.isShow" @click="saveBtn">保存修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  data() {
    return {
      ruleForm: {
        id: '',
        name: '',
        imgUrl: '',
        nums: '',
        price: '',
        // delivery: false,
        isShow: true,
        isAdd: true
      },
      allRuleForm: [],
      rules: {
        name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        imgUrl: [
          { required: true, message: '请输入图片链接', trigger: 'change' }
        ],
        nums: [
          {
            // type: 'number',
            required: true,
            message: '请填写库存数量',
            trigger: 'change'
          }
        ],
        price: [
          {
            // type: 'number',
            required: true,
            message: '请填写价格',
            trigger: 'change'
          }
        ]
      },
      oneIndex: ''
    }
  },
  created() {
    this.oneIndex = this.$route.params.index
    // console.log(this.index)
    if (this.oneIndex || this.oneIndex === 0) {
      this.ruleForm.isAdd = false
      this.ruleForm.isShow = true
      this.allRuleForm = JSON.parse(localStorage.getItem('DataList'))
      console.log(this.allRuleForm)
      /* for (let i = 0; this.allRuleForm.length; i++) {
        if (this.allRuleForm[i].id === this.oneIndex) {
          this.ruleForm.id = this.allRuleForm[i].id
          this.ruleForm.name = this.allRuleForm[i].name
          this.ruleForm.imgUrl = this.allRuleForm[i].imgUrl
          this.ruleForm.nums = this.allRuleForm[i].nums
          this.ruleForm.price = this.allRuleForm[i].price
        }
      } */
      this.ruleForm.id = this.allRuleForm[this.oneIndex].id
      this.ruleForm.name = this.allRuleForm[this.oneIndex].name
      this.ruleForm.imgUrl = this.allRuleForm[this.oneIndex].imgUrl
      this.ruleForm.nums = this.allRuleForm[this.oneIndex].nums
      this.ruleForm.price = this.allRuleForm[this.oneIndex].price
    } else {
      this.ruleForm.isAdd = true
      this.ruleForm.isShow = false
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        this.ruleForm.id = Date.now()
        if (valid) {
          if (localStorage.getItem('DataList')) {
            console.log(this.ruleForm)
            this.allRuleForm = JSON.parse(localStorage.getItem('DataList'))
            this.allRuleForm.push(this.ruleForm)
            console.log(this.allRuleForm)
            localStorage.setItem('DataList', JSON.stringify(this.allRuleForm))
          } else {
            this.allRuleForm.push(this.ruleForm)
            localStorage.setItem('DataList', JSON.stringify(this.allRuleForm))
          }
          // console.log(this.allRuleForm)
          const bool = window.confirm('书籍信息添加成功，是否跳转到首页')
          if (bool) {
            this.$router.push({ name: 'Home' })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    saveBtn() {
      // this.allRuleForm = JSON.parse(localStorage.getItem('DataList'))
      const a = this.allRuleForm.findIndex((item, index) => {
        return index === this.oneIndex
      })
      this.allRuleForm[a].id = this.ruleForm.id
      this.allRuleForm[a].name = this.ruleForm.name
      this.allRuleForm[a].imgUrl = this.ruleForm.imgUrl
      this.allRuleForm[a].nums = this.ruleForm.nums
      this.allRuleForm[a].price = this.ruleForm.price
      localStorage.setItem('DataList', JSON.stringify(this.allRuleForm))
    }
  }
}
</script>

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/home.vue')
  },
  {
    path: '/addData',
    name: 'addData',
    component: () => import('../views/addData.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router