zoukankan      html  css  js  c++  java
  • VUE动态生成table表格(element-ui)(新增/删除)

    (直接复制即可测试)

    结构(红色部分 data/prop/v-model 数据绑定):

    <template>
          <el-table size="small" :data="dataForm.list" border>
              <!--addOrUploadFrom <el-table-column type="selection" fixed="left" header-align="center" align="center" width="50">选择</el-table-column> -->
              <el-table-column prop="start" label="开始日期" width="160" header-align="center" align="center">
                <template slot-scope="scope">
                  <el-date-picker v-model="scope.row.start" type="date" placeholder="开始日期" value-format="yyyy-MM-dd"></el-date-picker>
                </template>
              </el-table-column>
              <el-table-column prop="end" label="结束日期" width="160" header-align="center" align="center">
                <template slot-scope="scope">
                  <el-date-picker v-model="scope.row.end" type="date" placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker>
                </template>
              </el-table-column>
              <el-table-column prop="user" label="用户" width="" header-align="center" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.user" placeholder="用户"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="person" label="负责人" width="" header-align="center" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.person" placeholder="负责人"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" header-align="center" align="center" width="100">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="delData(scope.row)"> 删除 </el-button>
                </template>
              </el-table-column>
            </el-table>
        </template>
       <template slot="footer">
          <el-button size='small' plain icon="el-icon-plus" @click="addData()"> 新增 </el-button>
        </template>

    模拟数据:

    <script>
    export default {
      data () {
        return {
          dataForm: {
            id: '',
            list: [
                {user: "张三",start: "2020-10-02",person: "负责人1",end: "2020-10-05"},
           {user: "李四",start: "2020-10-02",person: "负责人2",end: "2020-10-05"}
            ]
          }
        }
      },
      methods: { 
        addData() { //新增
            let obj = {}
              obj.resumeId = this.dataForm.id //设置一个字段
              this.dataForm.list.push(obj)
          },
        delData(item) {
            // 移除当前选中数据
            this.dataForm.list.splice(this.dataForm.list.indexOf(item), 1)
          }
       }
    }        

    最简单的表格动态生成与移除。

  • 相关阅读:
    opensuse的一些软件使用
    love2d新闻
    好用的在线工具收集
    POJ2531 Network Saboteur 枚举||随机化
    Acdream Path 动态规划
    Acdream Xor 简单数学
    POJ2676 Sudoku 搜索
    Acdream 1015 Double Kings 搜索
    Acdream Multiplication 基础题
    Acdream Cut 贪心
  • 原文地址:https://www.cnblogs.com/moutudou/p/13858565.html
Copyright © 2011-2022 走看看