本文主要记录多选操作
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>
<!-- 表格区结束 -->