element table表格实现编辑并后台提交数据

最新推荐文章于 2024-01-05 20:00:35 发布

tlysys

最新推荐文章于 2024-01-05 20:00:35 发布

阅读量2.9k

点赞数 2

分类专栏： Vue 文章标签： vue elementui

本文链接：https://blog.csdn.net/s990420/article/details/126257538

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

需求：

点击单元格可以进行编辑
离开之后进行数据保存
单元格数据进行判空

实现
1、table表格

<el-table v-loading="loading"
              :data="userList"
              :row-class-name="tableRowClassName"
              @cell-click="tabClick"
              @selection-change="handleSelectionChange" border>
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="用户id" align="center" prop="userId"/>
      <el-table-column label="用户名" align="center" prop="userName"/>
      <el-table-column label="性别" align="center" prop="sex">
        <template slot-scope="scope">
          <span v-if="scope.row.sex==0">男</span>
          <span v-if="scope.row.sex==1">女</span>
        </template>
      </el-table-column>
      <el-table-column label="电话号码" align="center" prop="phoneNumber" width="200px"/>
      <el-table-column label="邮箱" align="center" prop="email" width="200px">
        <template slot-scope="scope">
          <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '邮箱'">
            <el-input v-model="scope.row.email" placeholder="请输入邮箱" size="mini" @blur="inputBlur(scope.row)"/>
          </span>
          <span v-else>{{scope.row.email}}</span>
        </template>
      </el-table-column>
      <el-table-column label="毕业学校" align="center" prop="school" width="300px"/>
      <el-table-column label="学历" align="center" prop="education">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.education_information" :value="scope.row.education"/>
        </template>
      </el-table-column>
      <el-table-column label="地址" align="center" prop="address" width="200px"/>
    </el-table>

2、JS

data() {
    return {
      tabClickIndex: null, // 点击的单元格
      tabClickLabel: '', // 当前点击的列名
    }
},
method(){
	// table表格直接编辑
    tableRowClassName({ row, rowIndex }) {
      // 把每一行的索引放进row
      row.index = rowIndex
    },
    // 添加明细原因 row 当前行 column 当前列
    tabClick(row, column, cell, event) {
      switch (column.label) {
        case '邮箱':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        default: return
      }
    },
    // 失去焦点初始化
    inputBlur(item) {
      this.tabClickIndex = null
      this.tabClickLabel = ''
      console.log(item)
      if (item.email == ""){
        this.$modal.msgWarning("邮箱不能为空");
        this.getList();
      }else {
        // 失去焦点 提交数据
        updateUser(item).then(response  => {
          this.$modal.msgSuccess("提交成功");
          this.getList();
        })
      }
    },
},