zoukankan      html  css  js  c++  java
  • element实现table当前行可编辑、保存

    <el-table
                  ref="multipleTable"
                  :data="tableData"
                  tooltip-effect="dark"
                  style=" 100%;"
                  :cell-style="changeColor"
                  :header-cell-style="changeHeaderColor"
                  :row-style="changRowColor"
                  @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column class="td-th" label="行政区划" width="120">
              <template slot-scope="scope">
                <el-input v-model="scope.row.date" :disabled="isEditObj[scope.$index].a"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="问题类型">
              <template slot-scope="scope">
                <el-input v-model="scope.row.name" :disabled="isEditObj[scope.$index].a"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" width="282px">
              <template slot-scope="scope">
                <div v-show="isEditObj[scope.$index].a">
                  <el-button type="text" icon="el-icon-s-claim" size="small" @click="editUserInfo(scope.$index)">编辑
                  </el-button>&nbsp;|
                  <el-button type="text" icon="el-icon-edit-outline" size="small" @click="details">详情
                  </el-button>&nbsp;|
                  <el-button type="text" icon="el-icon-delete" size="small">删除</el-button>
                </div>
                <div v-show="!isEditObj[scope.$index].a">
                  <el-button type="text" icon="el-icon-s-claim" size="small" @click="checkEditUserInfo(scope.$index)">保存
                  </el-button>&nbsp;|
                  <el-button type="text" icon="el-icon-edit-outline" size="small" @click="cancelEditUserInfo(scope.$index)">取消
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>

    2、设置:isEditObj: [],

    3、

    mounted() {
            for (let i in this.tableData) {
              let a = "edit"+i;
              this.isEditObj.push({
                a:true
              });
            }
        },

    4、

    editUserInfo(index) {
            this.isEditObj[index].a = false;
          },
    checkEditUserInfo(index) {      //编辑用户信息
    this.isEditObj[index].a = true;
    },
    cancelEditUserInfo(index) {
    this.isEditObj[index].a = true;
    }
     
  • 相关阅读:
    Asp.net2.0中的提供程序dashcommerce中的税率计算提供程序
    C#中的位操作
    一个很不错的日历控件
    统计商品留言信息,列出 已读,未读和总数
    Linq学习笔记
    TSQL 选择某一记录的前后相关记录
    XPath简明语法
    统计下载的周排行跟月排行
    二进制度序列化碰到的问题 切实认识Asp.net2.0页面编译机制
    Asp.net中Web.config 页面访问按角色授权配置
  • 原文地址:https://www.cnblogs.com/keai/p/11152203.html
Copyright © 2011-2022 走看看