element-ui table批量编辑Input框

逻辑放在vuex中

一开始数据没变化，耽误了很多时间才发现是没深拷贝导致的。clone-deep npm地址

// vuex中
// member.js

const cloneDeep = require('clone-deep');
const state = {
  tableData: [],
  editingRows: [],
  editedValues: {}
}
const mutations = {
  startEditing(state, index) {
    state.editingRows = cloneDeep(state.editingRows); // 克隆数组
    state.editingRows.push(index)
    state.editedValues[index] = state.tableData[index].name
  },
  finishEditing(state, index) {
    state.editingRows = cloneDeep(state.editingRows); // 克隆数组
    state.editingRows.splice(state.editingRows.indexOf(index), 1)
    delete state.editedValues[index]
  },
  saveEditing(state, index) {
    // 在这里处理保存编辑的逻辑
    state.editingRows = cloneDeep(state.editingRows); // 克隆数组
    state.editingRows.splice(state.editingRows.indexOf(index), 1)
    state.tableData[index].name = cloneDeep(state.editedValues[index])
    delete state.editedValues[index]
  },
  setEditedValue(state, { index, value }) {
    console.log('setEditedValue value😊===》',value)
    state.editedValues = cloneDeep(state.editedValues); // 克隆数组
    state.editedValues[index] = value
  },
  setTableData(state, data) {
    state.tableData = data
  }
}
const actions = {
  editCell({ commit }, index) {
    commit('startEditing', index)
  },
  saveCell({ commit }, index) {
    // 在这里处理保存修改的逻辑
    commit('saveEditing', index)
  },
  cancelEdit({ commit }, index) {
    commit('finishEditing', index)
  },
  // 获取表格数据
  getTableData({ commit }) {
    // 这里可以发送 ajax 请求获取表格数据
    const tableData = []
    for (let i = 0; i < 30; i++) {
      tableData.push({
        name: '组织名称' + i,
        role: '超级管理员',
        createTime: '2020-01-01',

        action: '操作'
      })
    }
    setTimeout(() => {
      commit('setTableData', tableData)
    }, 2000)
  }
}
const getters = {
// 放在getter才能实现动态展现。 放在mutation的话isEditing只会执行一次。
  isEditing: (state) => (index) => {
    return state.editingRows.includes(index);
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

使用的页面

<el-table :data="tableData" :row-style="{height:'58px'}" height="calc(100% - 80px)" >
  <el-table-column prop="name" label="账号"/>
  <el-table-column sortable prop="name" label="人员组织名称">
    <template v-slot="scope">
      <div v-if="!isEditing(scope.$index)">
        {{ scope.row.name }}
      </div>
      <div v-else>
        <el-input :value="editedValues[scope.$index]" @input="setEditedValue({index:scope.$index,value:$event})" placeholder="人员组织名称"/>
      </div>
    </template>
  </el-table-column>
  <el-table-column prop="role" label="用户角色"/>
  <el-table-column prop="name" label="所属项目"/>
  <el-table-column prop="name" label="加入方式"/>
  <el-table-column sortable prop="createTime" label="加入时间"/>
  <el-table-column prop="action" label="操作">
    <template v-slot="scope">
      <template v-if="!isEditing(scope.$index)">
        <el-tooltip class="item" content="修改人员组织名称" placement="top">
          <i class="cursor-pointer iconfont icon-pencil text-indigo-500 pr-10"  @click="editCell(scope.$index)"></i>
        </el-tooltip>
        <el-tooltip class="item" content="1. 超级管理员用户不可以移除自身 2. 组织管理员用户不可以移除超管和自身" placement="top">
          <i class="cursor-pointer iconfont icon-delete cursor-not-allowed"></i>
        </el-tooltip>
      </template>
      <template v-else>
        <el-tooltip content="确认修改" placement="top">
          <i class="el-icon-check font-bold   cursor-pointer w-16 ml-8" @click="saveCell(scope.$index)"></i>
        </el-tooltip>
        <el-tooltip content="取消修改" placement="top">
          <i class="el-icon-close font-bold  text-red-500 cursor-pointer w-16 ml-8" @click="cancelEdit(scope.$index)"></i>
        </el-tooltip>
      </template>
    </template>
  </el-table-column>
</el-table>
 
computed: {
  ...mapState('member',['editingRows', 'editedValues', 'tableData']),
  ...mapGetters('member',['isEditing']),
},

methods: {
  ...mapMutations('member',['startEditing', 'finishEditing','setEditedValue']),
  ...mapActions('member',['editCell', 'saveCell', 'cancelEdit','getTableData']),
}