导航

实现方案一（缺查询功能）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow" rel="external nofollow" >
  <title>Vue增删改查</title>
  <style>
    #app{
      width:1024px;
      margin: 0 auto; 
    }
    .add-btn{
      margin-top: 20px;
      width: 100%;
    }
    .body{
      margin-top:20px;
    }
  </style>
  
</head>
<body>
  <div id="app">
    <h1>职位的增删改查</h1>
    <div class="head">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input v-model="userInfo.name" placeholder="请输入你的公司名"></el-input>
        </el-col>
        <el-col :span="6">
          <el-input v-model="userInfo.position" placeholder="请输入你的职位"></el-input>
        </el-col>
        <el-col :span="6">
          <el-input v-model="userInfo.major" placeholder="请输入你的专业"></el-input>
        </el-col>
        <el-col :span="6">
          <el-input v-model="userInfo.number" placeholder="请输入数量"></el-input>
        </el-col>
      </el-row>
      <el-button type="primary" @click="addUser" class="add-btn" plain>添加信息</el-button>
    </div>
    <!-- 主体内容 -->
    <div class="body">
      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="序号" width="180"><template slot-scope="scope"> {{scope.$index + 1 }} </template></el-table-column>
          <el-table-column prop="name" label="公司名" width="180"></el-table-column>
          <el-table-column prop="position" label="职位"></el-table-column>
          <el-table-column prop="major" label="专业"></el-table-column>
          <el-table-column prop="number" label="数量"></el-table-column>
          <el-table-column prop="birthday" label="操作">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" @click="editUser(scope.row,scope.$index)" circle></el-button>
              <el-button type="danger" icon="el-icon-delete" @click="delUser(scope.$index)" circle></el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <!-- 编辑框 -->
    <el-dialog title="编辑用户信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <div>
        <el-form ref="form" :model="editObj" label-width="80px">
          <el-form-item label="公司名"><el-input v-model="editObj.name"></el-input></el-form-item>
          <el-form-item label="职位"><el-input v-model="editObj.position"></el-input></el-form-item>
          <el-form-item label="专业"><el-input v-model="editObj.major"></el-input></el-form-item>
          <el-form-item label="数量"><el-input v-model="editObj.number"></el-input></el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

  <script>
    
    new Vue({
      el:'#app',
      data: function(){
        return{
          userInfo:{ 
            name:'',
            position: '',
            major: '',
            number: '',
          },
          tableData: [{
            name:'互联网+学院',
            position: '专职教师',
            major: '对外贸易',
            number: '2',
          },{
            name:'徐州重工',
            position: '工厂车研发部工程师',
            major: '精密机械制造',
            number: '12',
          },{
            name:'北京青码科技',
            position: '前端开发工程师',
            major: 'Vue、React',
            number: '4',
          }
          ],
          dialogVisible: false, 
          editObj:{
            name:'',
            position: '',
            major: '',
            number: '',
          },
          userIndex:0,
        }
      },
      methods:{
        //添加
        addUser(){
          if(!this.userInfo.name){
            this.$message({
              message: '请输入你的公司名！',
              
            });
            return;
          }
          if(!this.userInfo.position){
            this.$message({
              message: '请输入你的职位！',
              type: 'warning'
            });
            return;
          }
          if (!this.userInfo.major) {
            this.$message({
              message: '请输入你的专业！',
              type: 'warning'
            });
            return;
          }
          if (!this.userInfo.number) {
            this.$message({
              message: '请输入数量！',
              type: 'warning'
            });
            return;
          }
          this.tableData.push(this.userInfo);
          this.userInfo = { 
            name:'',
            position: '',
            major: '',
            number: '',
          };
        },

        //删除
        delUser(idx){
          this.$confirm('确认删除此用户信息？')
            .then(_ => {
              this.tableData.splice(idx, 1);
            })
            .catch(_ => {});
        },
        //编辑
        editUser(item,idx){
          this.userIndex = idx;
          this.editObj = {
            name: item.name,
            position: item.position,
            major: item.major,
            number: item.number,
          };
          this.dialogVisible = true;
        },

        handleClose(){
          this.dialogVisible = false;
        },

        confirm(){
          this.dialogVisible = false;
          Vue.set(this.tableData, this.userIndex, this.editObj);
            }
          },
        })
  </script>

</body>
</html>

实现方案二(缺查询功能)

<template>
  <div>
    <!-- 查询 -->
    <!--这是新增的查询功能-->
    <el-input
      type="text"
      placeholder="请输入要查询的条件"
      style="width: 25%"
      v-model="search"
      class="searchClass"
    />
    <el-button type="success" @click="search">搜索</el-button>

    <!-- 添加数据 -->
    <div id="tianjia">
      <el-input
        type="text"
        name="id"
        v-model="addDetail.id"
        value=""
        placeholder="请输入公司代号"
        style="width: 13%"
      />
      <el-input
        type="text"
        name="name"
        v-model="addDetail.name"
        value=""
        placeholder="请输入公司名称"
        style="width: 13%"
      />
      <el-input
        type="text"
        name="adress"
        v-model="addDetail.adress"
        value=""
        placeholder="请输入公司地址"
        style="width: 13%"
      />

      <el-button type="success" size="big" @click.native.prevent="adddetail()"
        ><font color="#f0f8ff" size="2px">添加</font>
      </el-button>
    </div>
    <!-- 展示数据 -->
    <el-form>
      <el-table :data="newsList" style="width: 100%" align="center">
        <el-table-column
          prop="id"
          label="公司代号"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="公司名称"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="adress"
          label="公司地址"
          width="180"
        ></el-table-column>
        <!--增加 操作 菜单 以及旗下的子菜单 增加 修改-->
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <!--修改按钮-->
            <el-button
              @click="handleEdit(scope.$index, scope.row)"
              type="info"
              size="small"
              >修改</el-button
            >

            <!--删除按钮-->
            <el-button
              @click.native.prevent="deletedetail(scope.$index, newsList)"
              type="danger"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-form>

    <!--编辑弹框部分-->
    <div>
      <el-dialog title="编辑" :visible.sync="dialogFormVisible" width="30%">
        <!--这就是一个表格-->
        <el-form :model="form">
          <!--公司ID-->
          <el-form-item label="公司ID">
            <el-input v-model="form.id" autocomplete="off"></el-input>
          </el-form-item>
          <!--公司名称-->
          <el-form-item label="公司名称">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <!--公司地址-->
          <el-form-item label="公司地址">
            <el-input v-model="form.adress" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>

        <!--确定, 取消  按钮-->
        <div>
          <el-button type="primary" @click.native.prevent="editSubForm"
            >确定</el-button
          >
          <el-button @click.native.prevent="dialogFormVisible = false"
            >取消</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
var _index; //定义一个全局变量，以获取行数据的行号
export default {
  data() {
    return {
      dialogFormVisible: false,
      editForm: [],
      form: {
        id: "",
        name: "",
        adress: "",
      },
      selectList: {},
      search: "",
      addDetail: {},

      newsList: [
        {
          id: "001",
          name: "阿里巴巴",
          adress: "杭州湖畔花园",
        },
        {
          id: "002",
          name: "工银科技",
          adress: "北京朝阳区天源祥泰大厦",
        },
        {
          id: "003",
          name: "IBM",
          adress: "海淀区中关村软件园",
        },
        {
          id: "004",
          name: "华为",
          adress: "北京海淀区北研所",
        },
        {
          id: "005",
          name: "网龙",
          adress: "福州长乐湖",
        },
        {
          id: "006",
          name: "BOSS直聘",
          adress: "北京朝阳区太阳宫",
        },
        {
          id: "007",
          name: "滴滴",
          adress: "北京海淀区上地",
        },
        {
          id: "008",
          name: "中国软件",
          adress: "北京海淀区北下关",
        },
        {
          id: "009",
          name: "小米",
          adress: "北京海淀区清河",
        },
        {
          id: "010",
          name: "跟谁学",
          adress: "北京海淀区中关村",
        },
        {
          id: "011",
          name: "美团",
          adress: "北京海淀区中关村",
        },
        {
          id: "012",
          name: "今日头条",
          adress: "北京海淀区清河",
        },
      ],
    };
  },
  methods: {
    /*添加方法*/
    adddetail() {
      console.log(1);
      this.$confirm("确认进行添加", "是否继续?", "提示", {
        confirmButtonText: "确定",
        confirmButtonText: "取消",
      })
        .then(() => {
          this.newsList.push({
            id: this.addDetail.id,
            name: this.addDetail.name,
            adress: this.addDetail.adress,
          }),
            /*成功添加之后的提示信息*/
            this.$message({
              type: "success",
              message: "添加成功",
            });
        })
        .catch((err) => {
          this.$message({
            type: "error",
            message: err,
          });
        });
    },

    /*删除方法*/

    deletedetail: function (index, rows) {
      this.$confirm("此操作将删除数据,", "是否继续?", "提示", {
        confirmButtonText: "确定",
        confirmButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.newsList.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功",
          });
        })
        .catch((err) => {
          this.$message({
            type: "error",
            message: err,
          });
        });
    },

    /*编辑修改数据*/
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      this.form = Object.assign({}, row);
      _index = index;
      // console.log(index)
      // console.log(_index)
      //取到这一栏的值，也就是明白是在那一栏进行操作，从而将编辑后的数据存到表格中
    },
    //保存编辑
    editSubForm() {
      var editData = _index;
      this.newsList[editData].id = this.form.id;
      this.newsList[editData].name = this.form.name;
      this.newsList[editData].adress = this.form.adress;
      this.dialogFormVisible = false;
    },
    /*查询方法*/
    searchFn: function (e) {
      var key = e.target.value;

      /*查询公司ID*/
      if (key) {
        var serchArray = [];
        this.newsList.forEach(function (item) {
          if (item.id.indexOf(key) > -1) {
            serchArray.push(item);
          }

          /*name查询*/
          if (item.name.indexOf(key) > -1) {
            serchArray.push(item);
          }
          /*地址查询*/
          if (item.adress.indexOf(key) > -1) {
            serchArray.push(item);
          }
        });
        this.getShowData1(serchArray);
      } else {
        this.getShowData1(this.newsList);
      }
    },

    /*获取需要渲染到页面中的数据*/
    getShowData: function (arr) {
      this.clonenewsList = JSON.parse(JSON.stringify(arr));
    },

    /*专门为查询写的渲染数据*/
    getShowData1: function (arr) {
      this.newsList = JSON.parse(JSON.stringify(arr));
    },
  },
};
</script>
<style>
.searchClass {
  margin-left: 600px;
}
#tianjia {
  margin-left: 600px;
}

.title {
  padding: 10px;
  border-bottom: 1px solid #00ffff;
}

.mask {
  width: 300px;
  height: 250px;
  background: rgba(255, 255, 255, 1);
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 47;
  border-radius: 5px;
}

#mask {
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 4;
  top: 0;
  left: 0;
}
</style>
# html # elementui
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue