在table的操作列加上elementui 的弹出层，弹出层里面包含codemirror

之前的错误代码

<el-table-column label="操作" width="222">
     <template slot-scope="scope">
                      <el-popover
                                placement="left"
                                width="250"
                                trigger="click"
                                @show="refreshScript(scope.row.script)" :key="scope.$index">
                            <codemirror v-model="scope.row.script"
                                        :value="scope.row.script"
                                        :options="tableScriptCodemirrorOption"
                                        ref="scriptCodemirror"
                            ></codemirror>
                            <el-button slot="reference" type="text" size="mini">脚本转换</el-button>
                        </el-popover>
     </template>
</el-table-column>

//methods方法
refreshScript (script) {
       let codemirror = this.$refs["scriptCodemirror"].codemirror; //
          codemirror.setValue(script);
             setTimeout(() => {
                    codemirror.refresh();
                }, 100) //一定要setTimeout,保证在setValue()之后再刷新
       },

会出现的问题是:codemirror里面出现的始终未第一次渲染的值

image.png

解决方法：将ref加上index保证他们是唯一的codemirror

<el-table-column label="操作" width="222">
     <template slot-scope="scope">
                      <el-popover
                                placement="left"
                                width="250"
                                trigger="click"
                                @show="refreshScript(scope.row.script,scope.$index)" :key="scope.$index">
                            <codemirror v-model="scope.row.script"
                                        :value="scope.row.script"
                                        :options="tableScriptCodemirrorOption"
                                       :ref="'scriptCodemirror'+scope.$index"
                            ></codemirror>
                            <el-button slot="reference" type="text" size="mini">脚本转换</el-button>
                        </el-popover>
     </template>
</el-table-column>

//methods方法
refreshScript (script,index) {
       let codemirror = this.$refs["scriptCodemirror" + index].codemirror;
          codemirror.setValue(script);
             setTimeout(() => {
                    codemirror.refresh();
                }, 100)
       },