适合新手，初识前端必备保姆级教程（持续更新）

Posted 2021-07-04 水星记_

前言

内容比较基础，但对于刚入门的人来说或许是一个窗口，本章博客持续更新改进，请关注收藏...

---

- 对数据的 增 删 改 查

- 获取时间后转换成自己想要的格式

- 时间戳转换成时间

- elemetn表格组件行与行之间实现上移下移功能

- elemetn中el-upload组件的图片回显方式

- get 请求拼接式传参

- 判断字符串中是否包含某个字符

- element表格组件根据后台状态码展示相对应内容

---

增加数据

html

<template>
  <div>
    <h1>职位的增删改查</h1>
    <div>
      <div class="head">
        <el-row :gutter="20">
          <el-col :span="5">
            <el-input v-model="userInfo.name" placeholder="请输入你的公司名"></el-input>
          </el-col>
          <el-col :span="5">
            <el-input v-model="userInfo.position" placeholder="请输入你的职位"></el-input>
          </el-col>
          <el-col :span="5">
            <el-input v-model="userInfo.major" placeholder="请输入你的专业"></el-input>
          </el-col>
          <el-col :span="5">
            <el-input v-model="userInfo.number" placeholder="请输入数量"></el-input>
          </el-col>
        </el-row>
        <el-button type="primary" @click="addUser" class="add-btn">添加信息</el-button>
      </div>
      <!-- 主体内容 -->
      <div class="body">
        <template>
          <el-table :data="tableData" style="width: 100%">
            <!-- {{scope.$index + 1 }} 表头排列序号123456 -->
            <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" circle></el-button>
                <el-button type="danger" icon="el-icon-delete" circle></el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
    </div>
  </div>
</template>

data

  data() {
    return {
      // input的表单信息
      userInfo: {
        name: "", //名字
        position: "", //职务
        major: "", //工作内容
        number: "", //数量
      },
      // 模拟渲染的数据
      tableData: [
        {
          name: "互联网+学院",
          position: "专职教师",
          major: "对外贸易",
          number: "2",
        },
        {
          name: "徐州重工",
          position: "工厂车研发部工程师",
          major: "精密机械制造",
          number: "12",
        },
        {
          name: "北京青码科技",
          position: "前端开发工程师",
          major: "Vue、React",
          number: "4",
        },
      ],
    };
  },

js

  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); //push添加进去
      this.userInfo = {
        // 添加完之后清空input
        name: "",
        position: "",
        major: "",
        number: "",
      };
    },
  },

删除数据

html

<div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="num" label="编号" width="50">
        <template slot-scope="scope">
          <p>{{scope.$index+1}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="redeemNum" label="已兑换"></el-table-column>
      <el-table-column prop="stock" label="兑换库存"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- scope.row.id 拿到当前的 id -->
          <el-button type="primary" size="small" @click="handelEdit(scope.row.id)">编辑</el-button>
          <el-button @click="handleDel(scope.row.id)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
</div>

data

  data() {
    return {
      tableData: [], //表格数据
    };
  },

js

methods: {
    // 删除
    handleDel(id) {
      // 根据id删除
      let data = {
        id: id,
      };
      this.$confirm("是否删除该条数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // ShoppingListDelete 接口
          ShoppingListDelete(data).then((res) => {
            console.log(res, "删除");
            this.$message({
              type: "success",
              message: "删除成功！",
            });
            // 刷新页面 直接调用的方法
            this.IntegralGoodsInfoInfo();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },

修改数据

html

<template>
  <div>
    <h1>职位的增删改查</h1>
    <div class="head">
      <el-row :gutter="20">
        <el-col :span="5">
          <el-input v-model="userInfo.name" placeholder="请输入你的公司名"></el-input>
        </el-col>
        <el-col :span="5">
          <el-input v-model="userInfo.position" placeholder="请输入你的职位"></el-input>
        </el-col>
        <el-col :span="5">
          <el-input v-model="userInfo.major" placeholder="请输入你的专业"></el-input>
        </el-col>
        <el-col :span="5">
          <el-input v-model="userInfo.number" placeholder="请输入数量"></el-input>
        </el-col>
      </el-row>
    </div>
    <!-- 主体内容 -->
    <div class="body">
      <template>
        <el-table :data="tableData" style="width: 100%">
          <!-- {{scope.$index + 1 }} 表头排列序号123456 -->
          <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" circle></el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <!-- 编辑框 -->
    <!-- :before-close="handleClose"：关闭前的回调，会暂停 Dialog 的关闭 -->
    <el-dialog title="编辑用户信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <div>
        <!-- :model="editObj" 绑定表单的数据对象 -->
        <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>
</template>

data

  data() {
    return {
      // input的表单信息
      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, //默认选中下标是0
      filterTableDataEnd: <
以上是关于适合新手，初识前端必备保姆级教程（持续更新）的主要内容，如果未能解决你的问题，请参考以下文章
 
 ESP 保姆级教程玩转emqx篇 ——初识emqx
 ESP 保姆级教程玩转emqx篇① ——初识emqx
 ESP 保姆级教程玩转巴法云篇① ——初识巴法云
 IT保姆级❤️开发测试环境搭建教程大集合热门技术+工具类(持续更新)
 保姆级Java入门练习教程，附代码讲解，小白零基础入门必备（建议收藏）
 ElasticSearch保姆级入门教程