加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > Linux > 正文

element实现table当前行可编辑、保存

发布时间:2020-12-13 22:43:17 所属栏目:Linux 来源:网络整理
导读:el- table ref ="multipleTable" :data ="tableData" tooltip -effect="dark" style ="width: 100%;" :cell -style="changeColor" :header -cell-style="changeHeaderColor" :row -style="changRowColor" @selection -change="handleSelectionChange" el-tab
<el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 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;}

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读