配置表单 *号提示 英文加数字校验 + vue2 table表格 双击修改单个单元格

已于 2024-04-08 16:57:09 修改
阅读量289 收藏
点赞数 4
文章标签： elementui css javascript less vue.js npm 前端框架
于 2024-03-07 15:36:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_73461414/article/details/136535598
版权
本文描述了一个IT技术项目中的表单设计，涉及基础参数配置（如人员库、交互方式、同步标识等）和人员指标参数配置（如子集代号、SQL视图、字段映射等），详细介绍了表单元素的输入验证和编辑功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<template>
  <!-- 整体min位置 -->
  <div class="divmin">
    <!-- 基础参数配置表单部分 -->
    <el-form ref="form" :model="form" label-width="80px" size="mini" hide-required-asterisk>
      <h3 class="table-cell">基础参数配置</h3>
      <!-- 人员库 -->
      <div class="jcpz">
        <el-form-item label="人员库" prop="staff"
        :rules="[{ required: true, message: '人员库不能为空' },{ pattern: /^[A-Za-z]+$/, message: '请输入英文字母' }]">
          <el-tooltip effect="dark" content="添加人员库，如果有多个库，中间以英文逗号隔开" placement="top">
            <i class="el-icon-question"></i>
          </el-tooltip>
          <el-input v-model="form.staff" size="mini" style="width: 550px;" class="inputleft"></el-input>
        </el-form-item>
        <!-- 交互方式 -->
        <el-form-item label="交互方式" :required="true">
          <el-tooltip effect="dark" content="选择接口推送方式，是推送还是其他平台调用接口" placement="top">
            <i class="el-icon-question"></i>
          </el-tooltip>
          <el-radio-group v-model="form.resource" style="width: 550px;margin-left: 25px;">
            <el-radio label="推送方" class="inputleft"></el-radio>
            <el-radio label="调用方"></el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 同步标识 -->
        <el-form-item label="同步标识" prop="identifying"
        :rules="[{ required: true, message: '同步标识不能为空' },{ pattern: /^[A-Za-z]+$/, message: '请输入英文字母' }]">
          <el-tooltip effect="dark" content="需以英文字母填写" placement="top">
            <i class="el-icon-question"></i>
          </el-tooltip>
          <el-input v-model="form.identifying" size="mini" style="width: 550px;" class="inputleft"></el-input>
        </el-form-item>
        <!-- 单批对接数据数量 -->
        <el-form-item label="对接量" prop="DockingQuantity"
        :rules="[{ validator: checkDockingQuantity, }]">
          <el-tooltip effect="dark" content="需以数字填写,不填不计数量" placement="top"><i class="el-icon-question"></i></el-tooltip>
          <el-input v-model.number="form.DockingQuantity" size="mini" style="width: 550px;" class="inputleft"></el-input>
        </el-form-item>
      </div>
      <!-- ---------------人员指标参数配置-------------------- -->
      <h3 class="table-cee2">人员指标参数配置</h3>
      <el-table :data="tableData" row-key="id"  border @row-dblclick="dbclick" height="258" :cell-class-name="tableCellClassName" :row-style="{height:'40px'}">
        <!-- 子集代号 min-width="250"-->
        <el-table-column prop="SubsetCode" label="子集代号">
          <template slot-scope="scope">
            <el-input size="mini"
              v-model="scope.row.SubsetCode"
              :ref="scope.row.index + ',' + scope.column.index"  
              v-if="scope.row.index + ',' + scope.column.index == currentCell"
              @blur="hideInput" placeholder="请输入"/>
            <span v-else>{{scope.row.SubsetCode}}</span>
          </template>
        </el-table-column>
        <!-- 同步指标名称 -->
        <el-table-column prop="SyncName" label="同步指标名称" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input size="mini"
              v-model="scope.row.SyncName"
              :ref="scope.row.index + ',' + scope.column.index"  
              v-if="scope.row.index + ',' + scope.column.index == currentCell"
              @blur="hideInput" placeholder="请输入"/>
            <span v-else>{{scope.row.SyncName}}</span>
          </template>
        </el-table-column>
        <!-- 唯一指标 -->
        <el-table-column prop="TBindexName" label="唯一指标">
          <template slot-scope="scope">
            <el-input size="mini"
              v-model="scope.row.TBindexName"
              :ref="scope.row.index + ',' + scope.column.index"  
              v-if="scope.row.index + ',' + scope.column.index == currentCell"
              @blur="hideInput" placeholder="请输入"/>
            <span v-else>{{scope.row.TBindexName}}</span>
          </template>
        </el-table-column>
        <!-- 查询指标 -->
        <el-table-column prop="queryIndicators" label="查询指标">
          <template slot-scope="scope">
            <el-input size="mini"
              v-model="scope.row.queryIndicators"
              :ref="scope.row.index + ',' + scope.column.index"
              v-if="scope.row.index + ',' + scope.column.index == currentCell"
              @blur="hideInput" placeholder="请输入"/>
            <span v-else>{{scope.row.queryIndicators}}</span>
          </template>
        </el-table-column>
        <!-- SQL视图 -->
        <el-table-column prop="SQLview" label="SQL视图" min-width="140">
          <template slot-scope="scope">
            <el-input size="mini" autosize type="textarea"
              v-model="scope.row.SQLview"
              :ref="scope.row.index + ',' + scope.column.index"  
              v-if="scope.row.index + ',' + scope.column.index == currentCell"
              @blur="hideInput" placeholder="请输入"/>
            <span v-else>{{scope.row.SQLview}}</span>
          </template>
        </el-table-column>
        <!--地址接口 -->
        <el-table-column prop="AdresLnface" label="地址接口" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input size="mini"
              v-model="scope.row.AdresLnface"
              :ref="scope.row.index + ',' + scope.column.index"  
              v-if="scope.row.index + ',' + scope.column.index == currentCell"
              @blur="hideInput" placeholder="请输入"/>
            <span v-else>{{scope.row.AdresLnface}}</span>
          </template>
        </el-table-column>
        <!--其它参数配置1 -->
        <el-table-column prop="ParameterOne" label="其它参数配置1" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input size="mini"
              v-model="scope.row.ParameterOne"
              :ref="scope.row.index + ',' + scope.column.index"  
              v-if="scope.row.index + ',' + scope.column.index == currentCell"
              @blur="hideInput" placeholder="请输入"/>
            <span v-else>{{scope.row.ParameterOne}}</span>
          </template>
        </el-table-column>
        <!-- 其它参数配置2 -->
        <el-table-column prop="ParameterTwo" label="其它参数配置2" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input size="mini"
              v-model="scope.row.ParameterTwo"
              :ref="scope.row.index + ',' + scope.column.index"  
              v-if="scope.row.index + ',' + scope.column.index == currentCell"
              @blur="hideInput" placeholder="请输入"/>
            <span v-else>{{scope.row.ParameterTwo}}</span>
          </template>
        </el-table-column>
        <!-- 字段映射 -->
        <el-table-column prop="fieldMapping" label="字段映射">
          <template >
            <el-button style="width: 78px;" size="mini" type="success" plain>查看</el-button><br>
            <el-button style="margin-top:2px;" size="mini" type="success" plain>重新上传</el-button>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" prop="caozuo" align="center" min-width="58">
          <template slot-scope="scope">
            <el-button plain type="danger" size="mini" @click="onDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 上传弹窗 -->
      <el-button class="filter-item" style="width: 1130px;height: 32px;" size="mini" @click="handleCreate">
        <i class="el-icon-circle-plus-outline" style="font-size: 21px;"></i>
      </el-button>
      <!-- 表单按钮 -->
      <el-form-item class="TJQX">
        <el-button plain type="primary" size="mini" style="width: 130px;" @click="onSubmit">保存</el-button>
        <el-button type="info" plain size="mini" style="width: 130px;">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      // --- 基础参数配置 ---
      form: {
          name: '',
          delivery: false,
          identifying: '',
          DockingQuantity: '',
        },
      // --- 人员指标参数配置 ---
      currentCell: null,
      tableData: [
        { id: '1', SubsetCode:'A01', SyncName:'A01,A02,A03111', TBindexName:'dad', queryIndicators:'faf', SQLview:'a', fieldMapping:'faf', AdresLnface:'gs11111111111', ParameterOne:'gs11111111111', ParameterTwo:'gs11111111111',},
        { id: '2', SubsetCode:'A01', SyncName:'A01,A02,A03', TBindexName:'dad', queryIndicators:'faf', SQLview:'a', fieldMapping:'faf', AdresLnface:'gs', ParameterOne:'gs', ParameterTwo:'gs',},
        { id: '3', SubsetCode:'A01', SyncName:'A01,A02,A03', TBindexName:'dad', queryIndicators:'faf', SQLview:'a', fieldMapping:'faf', AdresLnface:'gs', ParameterOne:'gs', ParameterTwo:'gs',},
        { id: '4', SubsetCode:'A01', SyncName:'A01,A02,A03', TBindexName:'dad', queryIndicators:'faf', SQLview:'a', fieldMapping:'faf', AdresLnface:'gs', ParameterOne:'gs', ParameterTwo:'gs',},
        { id: '5', SubsetCode:'A01', SyncName:'A01,A02,A03', TBindexName:'dad', queryIndicators:'faf', SQLview:'a', fieldMapping:'faf', AdresLnface:'gs', ParameterOne:'gs', ParameterTwo:'gs',},
      ],
    }
  },
  methods: {
    // --- ---基础参数配置--- ---
    onSubmit() {
        console.log('submit!');
      },
      // 数字校验
    checkDockingQuantity(rule, value, callback) {
      if (value !== '' && isNaN(value)) {
        callback(new Error('对接量必须填数字'));
      } else {
        callback();
      }
    },
    // --- ---人员指标参数配置--- ---
    // 给单元格绑定横向和竖向的index，这样就能确定是哪一个单元格
    tableCellClassName({row, column, rowIndex, columnIndex}){
        row.index=rowIndex;
        column.index=columnIndex;
    },
    // 获得当前双击的单元格的横竖index，然后拼接成一个唯一字符串用于判断，并赋给currentCell  // 拼接后类似这样："1,0","1,1",
    dbclick(row,column) {
        this.currentCell = row.index + ',' + column.index;
        // 这里必须要setTimeout，因为在点击的时候，input才刚被v-if显示出来，不然拿不到dom
        setTimeout(() => {
            // 双击后自动获得焦点
            this.$refs[row.index + ',' + column.index].focus();
        })
    },
    // 当input失去焦点的时候，隐藏input
    hideInput(){
        this.currentCell = null;
    },
    // 删除
    onDelete(row) {
      const index = this.tableData.indexOf(row);
      if (index !== -1) {
        this.tableData.splice(index, 1);
      }
    },
  },
}
</script>

<style scoped lang="less">
.divmin {
  max-width: 1130px;
  margin: auto;
  border: 1px solid #e0dede; /* 添加外部边框 */
  padding: 2px 12px;
}
/* -------------------- 基础参数配置 --------------------------------- */
.jcpz{
  margin: 15px 0;
}
::v-deep{
  .el-form-item__label{ /* 基础参数配置中内容距离左边 */
    margin-left: 30px;
  }
  .is-required .el-form-item__label::after { /* 红星 */
    content: "*";
    color: #ff0000;
    margin-left: 4px;
  }
  .el-form-item--mini .el-form-item__error{ /* 校验提示位置 */
    margin-left: 50px;
  }
  .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item { /* 距离高度 */
    margin-bottom: 16px;
  }
}
/* 图标变淡 */
.el-icon-question{
  color: #bfbcbc;
}
/* input距离左边距离 */
.inputleft{
  left: 4px;
}
/* 保存取消按钮 */
.TJQX{
  margin-left: 349px;
  margin-top: -1px;
}
/* --------------------- 人员指标参数配置 --------------------------- */
/* 下边框线 */
.table-cell {
  color: #837e7e;
  padding-bottom:5px;
  padding-top:8px;
  border-bottom: 1px solid #e5e2e2;
}
.table-cee2{
  color: #837e7e;
  padding-top:15px;
  margin-bottom:5px;
  border-top: 1px solid #e5e2e2;
}
/* 每行高度 */
::v-deep {
  .el-table .el-table__cell {
    padding: 2px 0;
    text-align: center;
    font-size: 11px;
    text-overflow: ellipsis;
  }
  .el-table .cell {
    line-height: 16px;
  }
  .el-table th.el-table__cell>.cell {
    padding: 6px 0;
  }
}
</style>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值