首页 > 其他分享 >Vue2 element-table 动态添加一行

Vue2 element-table 动态添加一行

时间:2023-10-26 14:00:10浏览次数:35  
标签:index 一行 element 添加 Vue2 table total tableData

Vue2 element-table 动态添加一行

<template>
  <div class="app-container">
    <!-- 表格 -->
    <el-table :data="tableData" :height="fullHeight" border>
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="subcompanyId" label="部门名称">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.postId"
            :disabled="scope.row.disableInput"
          >
            <el-option label="设计部" value="1234567890"></el-option>
            <el-option label="产品部" value="9876543210"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="postId" label="岗位名称">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.postId"
            :disabled="scope.row.disableInput"
          >
            <el-option label="经理" value="1234567890"></el-option>
            <el-option label="普通员工" value="9876543210"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="oaUserIds" label="姓名/手机号码">
        <template slot-scope="scope">
          <el-input
            :disabled="scope.row.disableInput"
            v-model="scope.row.oaUserIds"
          ></el-input>
        </template>
      </el-table-column>
 
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button-group>
            <el-button
              icon="el-icon-edit"
              size="mini"
              :disabled="
                !scope.row.oaUserIds ||
                !scope.row.postId ||
                !scope.row.subcompanyId
              "
              @click="subrow(scope.row)"
              >提交</el-button
            >
            <el-button
              icon="el-icon-delete"
              size="mini"
              @click="deleteRow(scope.row)"
              >删除</el-button
            >
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="searchForm.pageNum"
      :limit.sync="searchForm.pageSize"
      @pagination="getList"
    />
    <!-- 添加一行数据 -->
    <el-button
      type="primary"
      class="buttonAdd"
      icon="el-icon-plus"
      @click="addRow"
      >添加一行</el-button
    >
  </div>
</template>
 
 
 
<script>
export default {
  data() {
    return {
      total: 0,
      tableData: [], // 表格数据
      newRow: {}, // 新增的一行数据
      isDis: false,
      fullHeight: window.innerHeight - 222 + "px",
    };
  },
  mounted() {
  },
  methods: {
 
    addRow() {
      // 添加一行数据
      const newRow = {
        subcompanyId: undefined,
        postId: undefined,
        oaUserIds: undefined,
        disableInput: false,
      };
      this.tableData.push(newRow);
    },
 
    deleteRow(row) {
      // 删除行数据
      const index = this.tableData.indexOf(row);
      if (index !== -1) {
        this.tableData.splice(index, 1);
      }
    },
  },
};
</script>

写了一个动态表格,点下面按钮,动态添加带输入框和选择框的一条数据

标签:index,一行,element,添加,Vue2,table,total,tableData
From: https://www.cnblogs.com/nuomibaibai/p/17789250.html

相关文章

  • 基于 ElementUi框架的 table组件制作的 报表功能
    <template><!--月周计划报表--><divclass="monthPlanForm"><el-table:data="tableData":span-method="spanMethod"style="width:100%"><el-table-columntype="index"widt......
  • vue和element ui 滑块组件 重置验证滑块父组件ref调用子组件函数,子组件调用自己dom标
    css3可以改变图片的颜色了。从此再也不用设计出多张图,而且随时可以修改。下面就简单介绍下css3中是如何做到改变背景图片的颜色效果的。方式一:利用css3滤镜filter中的drop-shadow代码如下:<style>.icon{display:inline-block;width:180px;height:180px;bac......
  • [ERROR FileContent--proc-sys-net-bridge-bridge-nf-call-iptables]: /proc/sys/net/
     永久解决方法:在/etc/sysctl.conf中添加:net.bridge.bridge-nf-call-ip6tables=1net.bridge.bridge-nf-call-iptables=1执行sysctl-p时刷新sysctl-p如果出现缺少文件的现象sysctl:cannotstat/proc/sys/net/bridge/bridge-nf-call-iptables:没有那个文......
  • ERROR: Failed to Setup IP tables: Unable to enable SKIP DNAT rule
    1.报错信息#docker-composeup-dCreatingnetwork"2023-10-25-xcheck-net"withthedefaultdriverERROR:FailedtoSetupIPtables:UnabletoenableSKIPDNATrule:(iptablesfailed:iptables--wait-tnat-IDOCKER-ibr-7b14cc2d1da4-jRETURN:......
  • ElementPlus里的类型别名声明及使用
    前言最近刚开始使用ts,定义的变量总是不知道类型,特别是第三方库中,更是不知道有哪些类型,笨人本办法,遇到一个就记录一下,方便我下次使用查询组件实例我们通过组件的ref属性获取组件实例时,定义的实例变量需要指定类型。下面是常见的一些组件实例类型el-scrollbar<template><el-scroll......
  • vue3 elementplus table表格内添加checkbox和行号
    1.仅添加复选框<el-table-columntype="selection"width="55"></el-table-column>2.添加复选框和文字行号在一列<el-table-column><template#header><el-checkboxv-model="selectAll"@change="han......
  • Java图片压缩遇到 "No suitable ImageReader found for source data."
     问题:使用压缩工具的时候突然遇到图片压缩失败的情况。此时检查一下要上传的图片是否正常。处理方式:检查图片数据是否异常,一个图片五六兆。图片虽然是JPG结尾的,但是不在“ ImageIO”类的支持范围内。例如 WebP图片虽然可以以JPG格式结尾,但是 “ ImageIO”类......
  • pgsql create table,cpp fill psql table via the third party library pqxx
    //createtablet1;createtablet1(idbigserialnotnullprimarykey,authorvarchar(40)notnull,commentvarchar(40)notnull,contentvarchar(40)notnull,headervarchar(40)notnull,isbnvarchar(40)notnull,objectvarchar(40)notnull,summaryvarchar(40......
  • elementui实现 返回顶部
    elementui实现返回顶部重要样式.page{overflow-y:scroll;}js获取类名.page<divclass="page"style="padding-bottom:40px;"> <divclass="toTop"@click="backTop"> <divclass="h-svg-icon-wrapper......
  • Ultrabook™ and Tablet Windows* 8 Sensors Development Guide
    MicrosoftWindows*8Desktop  Sensors  Laptop  Tablet  MicrosoftWindows*8IntroductionThisguidegivesdevelopersanoverviewoftheMicrosoftWindows8.1sensorsapplicationprogramminginterfaces(APIs)forWindows8.1DesktopandWindowsStore......