快捷導(dǎo)航

vue2+element-ui新增編輯表格+刪除行功能

更新時間：2024年07月06日 10:49:11 作者：CiL#

這篇文章主要介紹了vue2+element-ui新增編輯表格+刪除行功能,本文通過示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

vue2+element-ui新增編輯表格+刪除行

實現(xiàn)效果：

代碼實現(xiàn) ：

          <el-table :data="dataForm.updateData"
                    border
                    :header-cell-style="{'text-align':'center'}"
                    :cell-style="{'text-align':'center'}">
            <el-table-column label="選項字段"
                             align="center"
                             prop="name">
              <template slot-scope="scope">
                <el-form-item :prop="'updateData.' + scope.$index + '.formName'"
                              :rules="[
                                { required: true, message: '請輸入', trigger: 'blur' },
                                { min: 1, max: 20, message: '長度在1到 20個字符', trigger: 'blur' }
                              ]">
                  <el-input v-model="scope.row.formName"
                            clearable></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column fixed="right"
                             label="操作">
              <template slot-scope="scope">
                <el-button @click.native.prevent="addRow(scope.$index,scope.row,dataForm.updateData)"
                           type="text"
                           size="small">
                  新增
                </el-button>
                <el-button @click.native.prevent="deleteRow(scope.$index,scope.row,dataForm.updateData)"
                           type="text"
                           size="small"
                           v-if="dataForm.updateData.length!=1">
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
<script>
export default {
      data () {
        return {
            dataForm: {
                // 自定義字段
                updateData: [
                  {
                    // id: '',
                    formName: ''
                  }
                ]
                // 其他...    
            }
        }
      },
      methods: {
    // addRow 新增 自定義字段表格行
    addRow (index, rows, item) {
      // console.log(index, rows, item)
      // this.dataForm.updateData.push({
      //   // sort: this.dataForm.updateData && this.dataForm.updateData.length > 0 ? this.dataForm.updateData.length + 1 : 1,
      //   id: null,
      //   formName: ''
      // })
      // 數(shù)組中添加新元素
      item.splice(index + 1, 0, { formName: '' })
    },
    // deleteRow 刪除 自定義字段表格行
    deleteRow (index, rows, item) {
      // console.log(index, '當(dāng)前行索引', rows, '刪除的目標(biāo)行')
      // 從index這個位置開始刪除數(shù)組后的1個元素
      item.splice(index, 1)
      // this.$confirm('刪除當(dāng)前行, 是否繼續(xù)?', '提示', {
      //   confirmButtonText: '確定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //   item.splice(index, 1)
      //   // this.delArrId.push(rows.id) // 被刪除的id數(shù)組集合
      //   // rows.isDelete = 1
      // }).catch(() => {
      //   this.$message({
      //     type: 'info',
      //     message: '已取消刪除'
      //   })
      // })
    },
      }
}
</script>

補充：vue3+element-plus: el-table表格動態(tài)添加或刪除行