elementui table expand 修改数据

1.我的设计思路是当点击expand箭头后显示出来内容，然后双击(单击也可以，根据自己想法来)某个区域，然后弹窗进行数据修改，然后双向绑定进行数据渲染，点击保存按钮后数据传输到后台进行数据修改

2.看下效果图

3.然后双击其中的字段进行弹窗，然后进行值的修改 

点击确定后，将数据渲染到页面上，然后点击保存按钮进行后端交互

4.下面是具体的代码，首先给expand里的参数添加点击事件 

<el-table-column type="expand">
        <template slot-scope="props">
          <el-form
            label-position="left"
            inline
            class="demo-table-expand"
            style="background-color:pink"
          >
            <el-form-item label="项目名称：">
              <span
                @dblclick="
                  updateInfo(
                    '项目名称',
                    'name',
                    props.$index,
                    props.row.name,
                    'plainInput'
                  )
                "
                >{{ props.row.name }}</span
              >
            </el-form-item>
            <el-form-item label="项目版本：">
              <span
                @dblclick="
                  updateInfo(
                    '项目版本',
                    'version',
                    props.$index,
                    props.row.version,
                    'plainInput'
                  )
                "
                >{{ props.row.version }}</span
              >
            </el-form-item>
            <el-form-item label="运行状态：">
              <span
                @dblclick="
                  updateInfo(
                    '运行状态',
                    'runStatus',
                    props.$index,
                    props.row.runStatus,
                    'select'
                  )
                "
                >{{ props.row.runStatus }}</span
              >
            </el-form-item>
            <el-form-item label="开发状态：">
              <span
                @dblclick="
                  updateInfo(
                    '开发状态',
                    'devStatus',
                    props.$index,
                    props.row.devStatus,
                    'select'
                  )
                "
                >{{ props.row.devStatus }}</span
              >
            </el-form-item>
            <el-form-item label="需 求 方 ：">
              <span
                @dblclick="
                  updateInfo(
                    '需 求 方',
                    'demand',
                    props.$index,
                    props.row.demand,
                    'plainInput'
                  )
                "
                >{{ props.row.demand }}</span
              >
            </el-form-item>
            <el-form-item label="项目类型：">
              <span
                @dblclick="
                  updateInfo(
                    '项目类型',
                    'type',
                    props.$index,
                    props.row.type,
                    'select'
                  )
                "
                >{{ props.row.type }}</span
              >
            </el-form-item>
            <el-form-item label="推 送 人 ：">
              <span
                @dblclick="
                  updateInfo(
                    '推 送 人',
                    'pusher',
                    props.$index,
                    props.row.pusher,
                    'select'
                  )
                "
                >{{ props.row.pusher }}</span
              >
            </el-form-item>
            <el-form-item label="负 责 人 ：">
              <span
                @dblclick="
                  updateInfo(
                    '负 责 人',
                    'principal',
                    props.$index,
                    props.row.principal,
                    'plainInput'
                  )
                "
                >{{ props.row.principal }}</span
              >
            </el-form-item>
            <el-form-item label="计划开始时间：">
              <span
                @dblclick="
                  updateInfo(
                    '计划开始时间',
                    'planStartTime',
                    props.$index,
                    props.row.planStartTime,
                    'timePicker'
                  )
                "
                >{{ props.row.planStartTime }}</span
              >
            </el-form-item>
            <el-form-item label="计划结束时间：">
              <span
                @dblclick="
                  updateInfo(
                    '计划结束时间',
                    'planEndTime',
                    props.$index,
                    props.row.planEndTime,
                    'timePicker '
                  )
                "
                >{{ props.row.planEndTime }}</span
              >
            </el-form-item>
            <el-form-item label="创建时间：">
              <span>{{ props.row.createTime }}</span>
            </el-form-item>
            <el-form-item label="最后修改时间：">
              <span>{{ props.row.updateTime }}</span>
            </el-form-item>
            <el-form-item label="项目描述：">
              <span
                @dblclick="
                  updateInfo(
                    '项目描述',
                    'description',
                    props.$index,
                    props.row.description,
                    'textArea'
                  )
                "
                >{{ props.row.description }}</span
              >
            </el-form-item>
            <el-form-item label="">
              <el-button type="primary" @click="savePane(props)" size="mini"
                >保存</el-button
              >
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

5.下面是对应的参数初始化，和点击事件方法

  data() {
    return {
      ...
      updateDialog: false,
      updateDialogFieldCn: "", // 要修改的属性名-中文
      updateDialogFieldEn: "", // 要修改的属性名-英文
      updateDialogDefaultValue: "", // 修改弹窗中默认的值
      updateDialogFieldType: "", // 弹窗中组件的类型
      updateDialogRowIndex: 0 // 修改的值所在的行索引
    };
  },

6.弹窗的部分代码，主要通过updateDialogFieldType进行区分

 <!-- 双击属性事件的弹窗 -->
    <el-dialog
      :title="'修改' + updateDialogFieldCn"
      :visible.sync="updateDialog"
    >
      <el-form v-if="updateDialogFieldType=== 'plainInput'">
        <el-form-item :label="updateDialogFieldCn" label-width="120px">
          <el-input v-model="updateDialogDefaultValue"></el-input>
        </el-form-item>

       .... 后面为updateDialogFieldType='select',updateDialogFieldType='timePicker'等其他的布局

        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateDialog = false">取 消</el-button>
        <el-button type="primary" @click="saveUpdateDialog">确 定</el-button>
      </div>
    </el-dialog>

7.双击expand中属性值触发的事件

    // 定义pane中部件的点击事件
    updateInfo(cn, en, index, originValue, type) {
      // cn:要修改的属性值中文名，作为弹窗表单中组件的label和弹窗的title
      // en:要修改的属性值英文名，用在点击保存后给对象的某个属性设值的时候用
      // index:为修改的值所在tabData的行索引，用来进行值修改
      // originValue为该字段对应的原始默认值，用来进行渲染
      // type为弹窗中的组件类型，plainInput，select，timePicker，textArea等，根据需求名字自己定
      this.updateDialog = true;
      this.updateDialogFieldCn = cn;
      this.updateDialogFieldEn = en;
      this.updateDialogRowIndex = index;
      this.updateDialogDefaultValue = originValue;
      this.updateDialogFieldType = type;
    },

8.然后是弹窗确定按钮的点击事件

  // 修改弹窗的确定按钮的点击事件
    saveUpdateDialog() {
      this.updateDialog = false;
      let obj = this.tableData[this.updateDialogRowIndex]; // 获取tableData中该行的对象
      obj[this.updateDialogFieldEn] = this.updateDialogDefaultValue; // 修改该对象中指定属性的值
      // 属性值还原初始化
      (this.updateDialogFieldCn = ""), // 要修改的属性名-中文
        (this.updateDialogFieldEn = ""), // 要修改的属性名-英文
       (this.updateDialogFieldType = ""), // 弹窗中组件的类型
        (this.updateDialogFieldType = 1), // 弹窗中组件的类型
        (this.updateDialogRowIndex = 0); // 修改的值所在的索引
    },