el-table表格可编辑

需求：使用elementui的表格组件，实现某些列可以输入或者下拉选择修改行数据

html 复制代码

//tabClickLabel 只是作为区分是否可以修改列的条件
<el-table
                ref="table"
                :data="tableData"
                :header-cell-style="{ background: '#F5F7FA', height: '30px' }"
                style="width: 100%; margin: 0 auto"
                height="100%"
                align="center"
                stripe
                row-key="id"
                border
                :row-class-name="tableRowClassName"
                @cell-click="tabClick"
              >
                <el-table-column
                  v-for="(item, index) in viewColumns"
                  :key="index"
                  :fixed="item.fixed"
                  :prop="item.prop"
                  :align="item.align"
                  :label="item.label"
                  :min-width="item.width"
                  :show-overflow-tooltip="true"
                >
                  <template slot-scope="scope">
                    <!-- <span v-if="scope.row.index === tabClickIndex && tabLabel == item.label && tabClickLabel == '1'">
                      <el-input v-model="scope.row[item.prop]" v-focus size="small" @blur="inputBlur(scope.row)" />
                    </span> -->
                    <span v-if="scope.row.index === tabClickIndex && tabLabel == item.label && tabClickLabel == '2'">
                      <el-select v-model="scope.row[item.prop]" v-focus size="small" style="width: 100%" @change="handleChange($event, scope.row,item.prop)">
                        <el-option v-for="and in dt_stylishly" :key="and.id" :label="and.text" :value="and.id" />
                      </el-select>
                    </span>
                    <span v-else-if="scope.row.index === tabClickIndex && tabLabel == item.label && tabClickLabel == '4'">
                      <el-select v-model="scope.row[item.prop]" v-focus size="small" style="width: 100%" multiple @visible-change="(v) => handleBulr(v,scope.row)">
                        <el-option v-for="and in dt_stylishlyFour" :key="and.id" :label="and.text" :value="and.id" />
                      </el-select>
                    </span>
                    <span v-else v-html="intFormatter(scope.row[item.prop], item.prop)" />
                  </template>
                </el-table-column>
              </el-table>

tabClick方法里面处理修改数据

javascript 复制代码

    tabClick(row, column, cell, event) {
      if (this.viewColumns.some((ele) => ele.label == column.label)) {
        this.tabClickIndex = row.index
      }
      if (column.label == '部品表编号') {
        this.tabClickLabel = '0'
      } else if (column.label == '初始式样') {
        this.tabClickLabel = '2'
      } else if (column.label == '初始区域') {
         //里面的逻辑具体按照 后端需要的数据进行获取
        this.tabClickLabel = '4'
        // 这个地方给的是中文
        if (row.divType) {
          if (!Array.isArray(row.divType)) {
            let str = []
            if (row.divType.includes('/')) {
              str = row.divType.split('/')
            } else {
              str = [row.divType]
            }
            const texts = str.map(text => {
              const item = this.dt_stylishlyFour.find(obj => obj.text === text) // 查找符合条件的对象
              return item ? item.id : '' // 如果找到对象，返回其 text 字段；否则返回空字符串
            })
            row.divType = texts
          }
        }
      } else {
        this.tabClickLabel = '1'
      }
      this.tabLabel = column.label
    },