Element中在<el-table-column>中的方法执行两次

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Element中在<el-table-column>中的方法执行两次相关的知识,希望对你有一定的参考价值。

参考技术A 因为有固定列,有几个固定列,会多执行几次,表的固定实现是通过多个表堆叠实现的,所以如果你有存在固定的列,那就会存在多个表

Element-ui的el-select组件使用记录:将el-select放到el-table中页面不更新问题的解决方案

本文主要记录多选操作

Element-ui官网参考

一、像下面这样直接使用,页面选择下拉列表数据,页面时不会更新的

 <!-- 表格区开始 -->
 <el-table size="mini" :data="tableData" style="width: 98%">
   <el-table-column label="select" width="100">
     <!-- <template slot-scope="scope"> -->
       <el-select
         v-model="value1"
         multiple
         placeholder="请选择"
       >
         <el-option
           v-for="item in options"
           :key="item.value"
           :label="item.label"
           :value="item.value"
         >
         </el-option>
       </el-select>
     <!-- </template> -->
   </el-table-column>
</el-table>
<!-- 表格区结束 -->

二、将el-select放到el-table中页面不更新问题的解决方案

 <!-- 表格区开始 -->
 <el-table size="mini" :data="tableData" style="width: 98%">
   <el-table-column label="select" width="100">
     <template slot-scope="scope">
       <el-select
         v-model="value1"
         multiple
         placeholder="请选择"
       >
         <el-option
           v-for="item in options"
           :key="item.value"
           :label="item.label"
           :value="item.value"
         >
         </el-option>
       </el-select>
     </template>
   </el-table-column>
</el-table>
<!-- 表格区结束 -->

三、使用@visible-change和@remove-tag实现业务功能

 <!-- 表格区开始 -->
 <el-table size="mini" :data="tableData" style="width: 98%">
   <el-table-column label="select" width="100">
     <template slot-scope="scope">
       <el-select
         v-model="value1"
         multiple
         placeholder="请选择"
         @visible-change="changeValue"
         @remove-tag="removeTag"
       >
         <el-option
           v-for="item in options"
           :key="item.value"
           :label="item.label"
           :value="item.value"
         >
         </el-option>
       </el-select>
     </template>
   </el-table-column>
</el-table>
<!-- 表格区结束 -->


四、传递多个参数

 <!-- 表格区开始 -->
 <el-table size="mini" :data="tableData" style="width: 98%">
   <el-table-column label="select" width="100">
     <template slot-scope="scope">
       <el-select
         v-model="value1"
         multiple
         placeholder="请选择"
         @visible-change="changeValue($event,scope.row)"
         @remove-tag="removeTag"
       >
         <el-option
           v-for="item in options"
           :key="item.value"
           :label="item.label"
           :value="item.value"
         >
         </el-option>
       </el-select>
     </template>
   </el-table-column>
</el-table>
<!-- 表格区结束 -->

说明@visible-change绑定的方法如果不带(),则会默认传递一个事件$event作为参数

@visible-change="changeValue"
@visible-change="changeValue($event")

这两种写法是等效的,括号和$event参数可带可不带

但是,如果是需要传递两个或两个以上的参数,就必须显式地将所有参数写出来,如:

@visible-change="changeValue($event,scope.row)"

以上是关于Element中在<el-table-column>中的方法执行两次的主要内容,如果未能解决你的问题,请参考以下文章

Element-ui的el-select组件使用记录:将el-select放到el-table中页面不更新问题的解决方案

Element-ui的el-select组件使用记录:将el-select放到el-table中页面不更新问题的解决方案

javascript中在链表中向前(向后)移动n个节点

Element表单验证规则

剑指offer第8题

自定义element-ui图标