Vue动态修改element el-table的某列数据

 

 

1、对话框打开时调用函数open@opened="checked"

2、可编辑 <el-table-column
                 --------

                 visEdit="true"
                 >

3、同步选中的数据List：multipleSelection ，函数  checked: function ()

 

 

<!-- 显示对话框 -->
<el-dialog v-dialogDrag style="font-size: 10px;" width='800px' heigt='500px' title="对话框"
           :visible.sync="dialogName" @opened="checked">

  <el-form :model="form" inline="true" ref="form" style="margin-bottom: -20px;margin-top:-20px;"> 

    <el-table
      ref="table"
      tooltip-effect="dark"

      cell-style="padding:0;"
      style="font-size: 10px;"
      fit="true"
      height="250"
      max-height="250"
      :header-cell-style="{height:'15px', fontSize:'10px', color:'#595959', background:'#EBEEF5'}"
      :data="dataList"
      align="center"
      highlight-current-row
      @current-change="handleCurrentChange"
      @selection-change="handleSelection">

      <el-table-column
        type="selection"
        width="28"
        height="28">
      </el-table-column>

      <el-table-column
        prop="dataKey"
        label="ID"
        width="300px"
        height="28px"
      >
      </el-table-column>


      <el-table-column
        label="dataName"
        width="350px"
        height="28px"
        visEdit="true"
      >
        <template slot-scope="scope">
          <el-input size='mini' :placeholder="" v-model="scope.row.name"
                    style="width:300px;height: 35px;margin-top:5px"
                    v-on:blur="nameCheck(scope.row.dataKey,scope.row.dataName)"
                    autocomplete="off"></el-input>

        </template>
      </el-table-column>

    </el-table>


  </el-form>

  <div slot="footer" class="dialog-footer">
    <el-button size='mini' type="primary" @click="founction" v-loading.fullscreen.lock="fullscreenLoading">
      {{$t('common.Btn')}}
    </el-button>
    <el-button size='mini' @click="dialogName= false">{{$t("common.cancel")}}</el-button>
  </div>
</el-dialog>

 

 

  checked: function () {



        //初始化默认选中状态
        //首先el-table添加ref="table"引用标识
        for (var i = 0; i < this.currentdataList.length; i++) {
          for (var j = 0; j < this.dataList.length; j++) {
            if (this.currentdataList[i].dataKey == this.dataList[j].dataKey) {
              this.$refs.table.toggleRowSelection(this.ddtaList[j], true);

            }

          }

        }
        //初始化时修改table中可编辑框中的值，（赋初值）
        for (var i = 0; i < this.dataList.length; i++) {
          for (var j = 0; j < this.currentdataList.length; j++) {
            if (this.dataList[i].dataKey == this.currentdataList[j].dataKey) {
              this.dataList[i].port = this.currentdataList[j].port
            }
          }
        }
      },



/**
 * @Description  ：表格多选框改变时，将所选行进行保存
 */
//multipleSelection 为数组
handleSelection(val) {
  this.multipleSelection = val
},