IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> el-table动态添加行(包含input输入框) -> 正文阅读

[JavaScript知识库]el-table动态添加行(包含input输入框)

<el-form size="small" :disabled="isdisabled">
      <el-form-item prop="servin">
        <template>
           <div style="font-weight:bold;text-align:center;font-size:20px">申请状态</div>
          <el-table ref="table" border :data="applayList" style="width: 100%"  :row-class-name="rowClassName">
            <el-table-column label="序号" align="center" width="55" prop="xh" type="index"  >
            </el-table-column>
             <el-table-column prop="zdcpmc" label="主导产品名称">
              <template slot-scope="scope">
                <el-input v-model="scope.row.zdcpmc" :disabled='isdisabled' ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="sjzlmc" label="涉及专利名称">
              <template slot-scope="scope">
                <el-input v-model="scope.row.sjzlmc" :disabled='isdisabled' ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="sqh" label="申请或授权号">
              <template slot-scope="scope">
                <el-input v-model="scope.row.sqh" :disabled='isdisabled' ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="sqrq" label="申请或授权日期">
              <template slot-scope="scope">
                <el-date-picker :disabled='isdisabled' v-model="scope.row.sqrq" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"  placeholder="选择日期时间"> </el-date-picker>
              </template>
            </el-table-column>
              <el-table-column prop="sqfs" label="授权方式">
              <template slot-scope="scope">
                <el-input v-model="scope.row.sqfs" :disabled='isdisabled' ></el-input>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="applaydeleteRow(scope.$index, applayList)"
                  :disabled='isdisabled' 
                  size="small"
                >
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
            <el-row style="border:0;">
             <el-col style="text-align:center;" ><el-button :disabled='isdisabled' style="border-top:none;width:100px; position: relative;bottom:2px"  @click="applayaddRow(applayList)" >+</el-button></el-col>
          </el-row>
        </template>
      </el-form-item>
    </el-form>
    //添加表格里的行(申请状态)
    applayaddRow(tableData1) {
      tableData1.push({
        zdcpmc: "",
        sqh: "",
        sqrq: "",
        sqfs: "",
        sjzlmc:'',
        xh:this.xh1,
        infoId:this.infoId
      });
       
    },
    //删除表格里的行(申请状态)
    applaydeleteRow(index, rows) {
      rows.splice(index, 1);
    },
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-03-12 17:23:13  更:2022-03-12 17:25:35 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 6:59:47-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码