vue中获取el-table的一行数据进行修改

需求：有时候我们需要点击el-table中的一行数据进行回显并修改，这时候就可以利用computed计算属性来获取当前选择的数据。

1、**修改的对话框**

    <el-dialog
      title="修改线下门店信息"
      :visible.sync="showUpdateDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="40%"
      @close="handleClose('showUpdateDialog', 'form')"
    >
      <el-form ref="form" :model="form" label-width="150px" :rules="rule">
        <el-col :lg="24" :xl="24">
          <el-form-item label="门店品牌" prop="storeBrand">
            <el-input
              v-model="form.storeBrand"
              placeholder="请输入门店品牌"
              maxlength="20"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="24" :xl="24">
          <el-form-item label="门店名称" prop="storeName">
            <el-input
              v-model="form.storeName"
              placeholder="请输入门店名称"
              maxlength="50"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="24" :xl="24">
          <el-form-item label="门店所在省份" prop="storeProvince">
            <el-select
              clearable
              filterable
              v-model="form.storeProvince"
              placeholder="请选择省份"
              @change="changeProvince({ province: form.storeProvince })"
            >
              <el-option
                v-for="(item, index) in provinceList"
                :key="index"
                :value="item"
                :label="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="24" :xl="24">
          <el-form-item label="门店所在城市" prop="storeCity">
            <el-select
              clearable
              filterable
              v-model="form.storeCity"
              placeholder="请选择城市"
            >
              <el-option
                v-for="(item, index) in cityList"
                :key="index"
                :value="item"
                :label="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="24" :xl="24">
          <el-form-item label="门店具体地址" prop="storeAddress">
            <el-input
              v-model="form.storeAddress"
              placeholder="请输入门店具体地址"
              maxlength="200"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose('showUpdateDialog', 'form')">
          取消
        </el-button>
        <el-button @click="sureUpdateForm">确定</el-button>
      </span>
    </el-dialog>

2、**form表单**

  data() {
    return {
      form: {
        id: "",
        storeAddress: "",
        storeBrand: "",
        storeCity: "",
        storeName: "",
        storeProvince: ""
      },
      rule: {
        storeAddress: [
          { required: true, message: "请输入门店具体地址", trigger: "blur" }
        ],
        storeBrand: [
          { required: true, message: "请输入门店品牌", trigger: "blur" }
        ],
        storeCity: [
          { required: true, message: "请选择门店所在城市", trigger: "change" }
        ],
        storeName: [
          { required: true, message: "请输入门店名称", trigger: "blur" }
        ],
        storeProvince: [
          { required: true, message: "请选择门店所在省份", trigger: "change" }
        ]
      },
      showUpdateDialog: false
    };
  },

3、**获取当前行的数据**

因为我这里是使用的封装的el-table组件，所以this.$refs.tableList代表当前的组件tableList，$refs.tableList代表tableList中使用的el-table组件，而selection就代表了当前选择的行数据。

 

  computed: {
    selectedRows() {
      return this.$refs.tableList.$refs.tableList.selection;
    }
  }

4、当点击修改按钮时给form表单赋值

 

    onUpdateBtnClick() {
      if (this.selectedRows.length !== 1) {
        this.$message.warning("请选择一条数据进行操作");
        return;
      }
      this.form = JSON.parse(JSON.stringify(this.selectedRows[0]));
      this.showUpdateDialog = true;
    },