Vue中的slot

1. slot插槽

• 插槽显不显示，怎样显示由父组件控制

• 插槽在哪里显示由子组件控制

2. 组件模板种类

• 非插槽模板

  指html模板，如‘div、span、ul、table’；
  其显示与隐藏以及怎样显示由组件自身控制。
  

• 插槽模板

  指slot；
  其显示与隐藏以及怎样显示由父组件控制；
  slot显示的位置由子组件自身决定，slot写在组件template的什么位置，父组件传过来的模板就显示在什么位置。
  

3. 父组件

• el-dropdown

  通过组件slot设置下拉触发的元素，需要通过具名slot为dropdown 设置下拉菜单
  split-button属性：让触发下拉元素呈现为按钮组
  command事件：点击菜单项触发的事件回调，回调参数为dropdown-item 的指令
  command指令：string/number/object
  

• el-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>