标签：Vue .. val element 表格 relevant 选中 rowNum tableData

功能需求：

1、实现一个表格，可以增加行 ，可以修改每一行的数据；

2、获取选中的行的数据，获取选中行的索引；

3、根据获取的行的索引删除相应的一行的数据。

tableData的数据可以从后台获取。

效果：

 代码实现：

<template>
        <div class="tableDate">
          <div class="button" style="width:6%;float:right;">
            <P><el-button class="el-icon-plus" @click.prevent="addRow()"></el-button></P>
            <p><el-button class="el-icon-minus" @click.prevent="delData()"></el-button></p>
          </div>
          <div class="table">
            <el-table
              :data="tableData"
              ref="table"
              tooltip-effect="dark"
              border
              stripe
              style="width: 93%"
              @selection-change='selectRow'>
              <el-table-column type="selection" width="45" align="center"></el-table-column>
              <el-table-column label="序号"  type="index" width="60" align="center"></el-table-column>
              <el-table-column  label="岗位" align="center">
                <template slot-scope="scope">
                  <el-cascader prop="post_id" class="post_name" v-model="scope.row.post_id" :options="post_options" :show-all-levels="false" @change="test"></el-cascader>
                  <!--<el-input v-model="scope.row.post_id"></el-input>-->
                </template>
              </el-table-column>
              <el-table-column label="需求">
                <template slot-scope="scope">
                  <el-input class="require_des" v-model="scope.row.require_des"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="备注">
                <template slot-scope="scope">
                  <el-input type="textarea" class="remark" v-model="scope.row.remark"></el-input>
                </template>
              </el-table-column>

            </el-table>
          </div>
        </div>
      </template>
js:

<script>
  import '../../../assets/css/commlist.css'
  import '../../../assets/css/comm.sass'
  import '../../../assets/css/commscoped.sass'
 
  export default {
    data () {
      return {
        tableData: [],
        selectlistRow: [],
        rowNum:1
      }
    },
    methods: {
      // 获取表格选中时的数据
      selectRow (val) {
        this.selectlistRow = val
      },
      // 增加行
      addRow () {
             var list = {
          rowNum:this.rowNum,
          post_id:[],
          require_des: '',
          remark:''
            };
        this.tableData.unshift(list)
        this.rowNum += 1;
      },
      // 删除方法
      // 删除选中行
      delData () {
        for (let i = 0; i < this.selectlistRow.length; i++) {
          let val = this.selectlistRow
          // 获取选中行的索引的方法
          // 遍历表格中tableData数据和选中的val数据，比较它们的rowNum,相等则输出选中行的索引
          // rowNum的作用主要是为了让每一行有一个唯一的数据，方便比较，可以根据个人的开发需求从后台传入特定的数据
          val.forEach((val, index) => {
            this.tableData.forEach((v, i) => {
              if (val.rowNum === v.rowNum) {
                // i 为选中的索引
                this.tableData.splice(i, 1)
              }
            })
          })
        }
        // 删除完数据之后清除勾选框
        this.$refs.table.clearSelection()
      }
    }
  }
</script>

参考：https://blog.csdn.net/qq_38906291/article/details/100081364?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.pc_relevant_default&utm_relevant_index=2

标签：Vue,..,val,element,表格,relevant,选中,rowNum,tableData
来源： https://www.cnblogs.com/zqlym/p/16192689.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。