纯前端实现简单的增删改查

项目检查需要一个简单的增删改查页面，不对接后台，纯前端实现。代码如下：

<template>
  <div class="bodyViewBox">
    <div class="addBox">
      <el-button type="primary" size="small" @click="addClick">添加</el-button>
    </div>
    <div class="tableBox">
      <el-table :data="tableData" stripe style="width: 100%;overflow:auto" height="100%" border highlight-current-row
        :header-cell-style="{background:'#435dad',color:'#fff',fontWeight:600}" @current-change="handleCurrent"
        v-loading="loading" tooltip-effect="dark">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="sjylx" label="数据源类型"></el-table-column>
        <el-table-column prop="lxrxm" label="联系人姓名"></el-table-column>
        <el-table-column prop="lxrdh" label="联系人电话"></el-table-column>
        <el-table-column prop="sjlx" label="数据类型"></el-table-column>
        <el-table-column prop="" label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="testClick(scope.row)">测试数据源</el-button>
            <el-button type="text" size="small" @click="editClick(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="delClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog :title="titleFlag?'新增':'修改'" :visible.sync="dialogFormVisible" :modal-append-to-body="false" center>
      <el-form :model="wrjForm" :rules="rules" ref="wrjRef">
        <el-form-item prop="sjylx" label="数据源类型" label-width="40%" value="1">
          <el-input v-model="wrjForm.sjylx" style="width:15vw" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="url地址" label="url" label-width="40%" value="1">
          <el-input v-model="wrjForm.url" style="width:15vw" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="usernamr" label="用户名" label-width="40%" value="1">
          <el-input v-model="wrjForm.usernamr" style="width:15vw" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="pwd" label="密码" label-width="40%" value="1">
          <el-input v-model="wrjForm.pwd" style="width:15vw" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="lxrxm" label="联系人姓名" label-width="40%" value="1">
          <el-input v-model="wrjForm.lxrxm" style="width:15vw" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="lxrdh" label="联系人电话" label-width="40%" value="1">
          <el-input v-model="wrjForm.lxrdh" style="width:15vw" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="sjlx" label="数据类型" label-width="40%" value="1">
          <el-input v-model.number="wrjForm.sjlx" style="width:15vw" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item style="text-align:center;">
          <el-button type="primary" @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="success" @click="saveFrom('wrjRef')">提 交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    var checkPhone = (rule, value, callback) => {//校验电话号码
        const phoneReg = /^1[3|4|5|6|7|8|9][0-9]{9}$/
        const landline = /^[\w]{6,12}$/
        if (!value) {
          return callback(new Error('请输入联系人电话'))
        }
          // Number.isInteger是es6验证数字是否为整数的方法,但是我实际用的时候输入的数字总是识别成字符串
          // 所以我就在前面加了一个+实现隐式转换
        if (!Number.isInteger(+value)) {
          callback(new Error('请输入数字值'))
        } 
        else {
          if (phoneReg.test(value) || landline.test(value)) {
            callback()
          } else {
            callback(new Error('电话号码格式不正确'))
          }
        }
      };
    return {
      tableData: [
        {
          sjylx:'雅虎',
          lxrxm:'王小虎',
          lxrdh:'15811243269',
          sjlx:'娱乐',
          tid:1
        },
        {
          sjylx:'百度',
          lxrxm:'张小亮',
          lxrdh:'15827653278',
          sjlx:'百科',
          tid:2
        },
      ],
      loading: false,
      selectRow: '',

      wrjForm:{
        sjylx:'',
        lxrxm:'',
        lxrdh:'',
        sjlx:'',
        tid:0,
      },
      dialogFormVisible:false,
      titleFlag: true,
      rules: {
        sjylx: [{ required: true, message: '数据源类型', trigger: 'blur' }],
        lxrxm: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],
        lxrdh: [{ required: true, validator: checkPhone, trigger: 'blur' },],
        sjlx: [{ required: true, message: '请输入数据类型', trigger: 'blur' }],
      },
    };
  },
  created() {
    let tt = JSON.parse(sessionStorage.getItem("tdata"))
    this.tableData = tt ? tt : this.tableData
  },
  methods: {
    handleCurrent(row) {
      this.selectRow = row;
    },
    addClick(row){
      this.dialogFormVisible = true
      this.titleFlag = true
      this.wrjForm = {}
    },
    editClick(row){
      this.dialogFormVisible = true
      this.titleFlag = false
      this.wrjForm = {...row}
    },
    delClick(row){
      let aa = this.tableData.filter(el=>{
        return el.tid != row.tid
      })
      sessionStorage.setItem('tdata', JSON.stringify(aa)) 
      this.tableData = JSON.parse(sessionStorage.getItem("tdata"))
    },
    testClick(row){
      if(row.sjylx == '雅虎'){
        this.$message.success('查询成功！')
      }else{
        this.$message.error('查询失败！')
        return
      }
    },
    saveFrom(formName){
      this.$refs[formName].validate(valid=>{
        if(valid){
          if(this.titleFlag){
            this.tableData.push({
              sjylx: this.wrjForm.sjylx,
              lxrxm: this.wrjForm.lxrxm,
              lxrdh: this.wrjForm.lxrdh,
              sjlx: this.wrjForm.sjlx,
              tid: this.tableData.length+1,
            })
            
            sessionStorage.setItem('tdata', JSON.stringify(this.tableData)) 
            this.dialogFormVisible = false
          }else{
            let ss = JSON.parse(sessionStorage.getItem("tdata"))
            ss.forEach((item, i)=>{
              if(item.tid == this.wrjForm.tid){
                ss[i] = this.wrjForm
                this.dialogFormVisible = false
              }
            })
            sessionStorage.setItem('tdata', JSON.stringify(ss)) 
            this.tableData = JSON.parse(sessionStorage.getItem("tdata"))
          }
        }
      })
    }
  }
};
</script>