element table表格支持添加编辑校验

news/2024/7/7 23:45:07

实现效果:

将table表格与form表单结合使用 (用el-form外层包裹el-table结合rules进行校验)

代码实现

<template>
  <div>
    <el-card class="box-card" shadow="never">
      <div>
        <el-button
          size="mini"
          type="primary"
          icon="el-icon-plus"
          @click="AddData"
          >添加</el-button
        >
      </div>
    </el-card>
    <el-card class="box-card" shadow="never">
      <el-form ref="Issuerform" :model="Issuerform">
        <el-table :data="Issuerform.tableIssuerData" border>
          <el-table-column
            prop="Name"
            label="简称"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span v-if="!scope.row.editCell">{{ scope.row.Name }}</span>
              <el-form-item
                v-else
                :prop="'tableIssuerData.' + scope.$index + '.Name'"
                :rules="rules.Name"
              >
                <el-autocomplete
                  ref="autocomplete"
                  v-model="scope.row.Name"
                  class="querySearch"
                  style="width: 100%"
                  size="mini"
                  clearable
                  :fetch-suggestions="querySearchAsync"
                  placeholder="请输入搜索内容"
                  :trigger-on-focus="false"
                  @select="handleSelect"
                />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            prop="Code"
            label="代码"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span v-if="!scope.row.editCell">{{ scope.row.Code }}</span>
              <el-form-item
                v-else
                :prop="'tableIssuerData.' + scope.$index + '.Code'"
                :rules="rules.Code"
              >
                <el-input size="mini" v-model="scope.row.Code"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            prop="issuer"
            label="主体"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="Type"
            label="类型"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span v-if="!scope.row.editCell">
                {{ scope.row.Type }}
              </span>
              <el-form-item
                v-else
                :prop="'tableIssuerData.' + scope.$index + '.Type'"
                :rules="rules.Type"
              >
                <el-select
                  v-model="scope.row.Type"
                  placeholder="请选择"
                  clearable
                  size="mini"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in TypeOptions"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="text"
                v-if="scope.row.editCell"
                @click="issuerSave(scope.row, scope.$index)"
              >
                保存
              </el-button>
              <el-button
                size="small"
                type="text"
                v-if="!scope.row.editCell"
                @click="issuerEdit(scope.row, scope.$index)"
              >
                编辑
              </el-button>
              <el-button
                size="small"
                type="text"
                @click="issuerdelete(scope.row, scope.$index)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </el-card>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      Issuerform: {
        tableIssuerData: [
          {
            Name: null,
            Code: null,
            issuer: null,
            Type: null,
            editCell: true,
          },
        ],
      },
      TypeOptions: [
        {
          value: "1",
          name: "类型1",
        },
        {
          value: "2",
          name: "类型2",
        },
        {
          value: "3",
          name: "类型3",
        },
      ],
      rules: {
        Name: [{ required: true, message: "", trigger: "blur" }],
        Code: [{ required: true, message: "", trigger: "blur" }],
        Type: [{ required: true, message: "", trigger: "change" }],
      },
    };
  },
  methods: {
    AddData() {
      this.Issuerform.tableIssuerData.push({
        Name: null,
        Code: null,
        issuer: null,
        Type: null,
        editCell: true,
      });
    },
    //模糊搜索
    querySearchAsync(queryString, cb) {
      let param = {
        name: queryString,
      };
      console.log(param, cb);
    },
    handleSelect() {},
    issuerSave(row, index) {
      this.$refs.Issuerform.validate((valid) => {
        if (valid) {
          this.Issuerform.tableIssuerData[index].editCell = false;
        } else {
          return false;
        }
      });
    },
    issuerEdit(row, index) {
      this.Issuerform.tableIssuerData[index].editCell = true;
    },
    issuerdelete(row, index) {
      this.Issuerform.tableIssuerData.splice(index, 1);
    },
  },
};
</script>
<style scoped lang='less'>
/deep/.el-form-item__error {
  display: none; //隐藏校验提示
}
</style>


http://lihuaxi.xjx100.cn/news/1292434.html

相关文章

如何创建WooCommerce会员网站

Web网站内容货币化的一种非常标准的方法是通过会员社区提供对内容的有限访问。您可以使用 WordPress 的众多付费专区插件之一轻松创建它。有些使用MemberPress或其他顶级 WordPress 会员插件&#xff0c;还有一些使用 WooCommerce。当您想到会员网站时&#xff0c;WooCommerce可…

最新,2023年6月CDGP设计及论述题解析

2023年6月CDGP设计及论述题解析 &#xff08;加gzh“大数据食铁兽”&#xff0c;回复“2023cdgp”获取完整版&#xff09; 酒店会员建模 结合国内外数据安全法律法规&#xff0c;谈谈境外传输数据安全管理体系建设 国内&#xff1a;《数据安全法》、《网络安全法》、2022年9月…

React hooks文档笔记(三) 状态

状态 一、如何设计组件状态的步骤二、状态构造原则1. 组相关状态2. 避免矛盾/互斥状态3. 避免多余状态4. 不要把props放进state&#xff0c;除非你特别想要阻止更新 三、状态保存/重置1. 相同位置的相同组件保留状态2. 同一位置不同元素reset状态 一、如何设计组件状态的步骤 …

数据分析知识图谱

在做数据分析时&#xff0c;经常会有这样的困扰&#xff1a;面对几种相似的方法&#xff0c;既不清楚它们各自的使用场景&#xff0c;也无法分清它们之间的差别&#xff0c;一念之差就可能选错方法。如果你也有这样的困扰&#xff0c;建议按照SPSSAU知识图谱目录顺序检索对应的…

音频领域_DSP,专业词汇积累

serial &#xff1a;串行 parity&#xff1a;奇偶校验 handshake:握手 vendor:供应商 product:产品 …

【算法题】动态规划中级阶段之跳跃游戏、最大子数组和、解码方法

动态规划中级阶段 前言一、最大子数组和1.1、思路1.2、代码实现 二、跳跃游戏2.1、思路2.2、代码实现 三、解码方法3.1、思路3.2、代码实现 总结 前言 动态规划&#xff08;Dynamic Programming&#xff0c;简称 DP&#xff09;是一种解决多阶段决策过程最优化问题的方法。它是…

【业务功能篇35】Java Stream流 :Collectors.toMap

业务场景&#xff1a;我们经常会把一个list<Dto> 对象类集合&#xff0c;转换成一个map集合&#xff0c;例如一个问题单集合 list<proVo>, 我们需要转换成 一个map集合&#xff0c;key就指定 问题单类的某个字段&#xff0c;比如问题单号 no, value值就是对应的整…

libevent实践03:监听有名管道

首先创建两个管道&#xff1a;p1,p2 lkmaoubuntu:/big/libevent/libevent-2.1.12-stable/_install/learn$ mkfifo p1 p2 lkmaoubuntu:/big/libevent/libevent-2.1.12-stable/_install/learn$ ls -lshF p1 p2 0 prw-rw-r-- 1 lkmao lkmao 0 6月 29 20:39 p1| 0 prw-rw-r-- 1 l…