插槽显不显示，怎样显示由父组件控制
插槽在哪里显示由子组件控制
组件模板种类非插槽模板
指html模板，如‘div、span、ul、table’； 其显示与隐藏以及怎样显示由组件自身控制。插槽模板
指slot； 其显示与隐藏以及怎样显示由父组件控制； slot显示的位置由子组件自身决定，slot写在组件template的什么位置，父组件传过来的模板就显示在什么位置。 父组件el-dropdown
通过组件slot设置下拉触发的元素，需要通过具名slot为dropdown 设置下拉菜单 split-button属性：让触发下拉元素呈现为按钮组 command事件：点击菜单项触发的事件回调，回调参数为dropdown-item 的指令 command指令：string/number/objectel-table
data：显示的数据，类型为array selection-change：当选择项发生变化时会触发该事件，参数为selection 实现多选: 手动添加一个el-table-column，设type属性为selection即可 toggleRowSelection：用于多选表格，切换某一行的选中状态，参数为row, selected，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） clearSelection：用于多选表格，清空用户的选择 <template> <div> <div> <select-tag :selectNum="selectNum"> <template v-slot:clear> <el-button type="text" @click="toggleSelection()">清空</el-button> </template> <template v-slot:button> <el-dropdown split-button @command="handle" >操作 <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="0">批量</el-dropdown-item> <el-dropdown-item command="1">全部</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </template> </select-tag> <div> <el-table :data="tableData" ref="multipleTable" @selection-change="handleSelectionChange"> <el-table-column type="selection"></el-table-column> <el-table-column label="ID"> <template slot-scope="scope">{{ scope.row.id }}</template> </el-table-column> </el-table> </div> </div> </div> </template> <script> import SelectTag from './SelectTag' export default { data() { return { tableData: [], multipleSelection: [], }; }, components: { SelectTag }, methods: { handle(command){ // ... }, toggleSelection(rows) { if (rows) { rows.forEach(row => { this.$refs.multipleTable.toggleRowSelection(row); }); } else { this.$refs.multipleTable.clearSelection(); } }, handleSelectionChange(val) { this.multipleSelection = val; } } }; </script>子组件：
<template> <div> <el-row> <el-col :span="2"> 已选择 <span>{{ selectNum }}</span> 项 </el-col> <el-col :span="1"> <slot name="clear"></slot> </el-col> <el-col :span="2"> <slot name="button"></slot> </el-col> </el-row> </div> </template> <script> export default { name: 'SelectTag', props: { selectNum: { type: Number, required: true } } }; </script>