el-table封装

el-table封装

要封装组件，首先要先简单了解slot插槽，插槽分为具名插槽和匿名插槽

• 匿名插槽又称默认插槽，当slot没有指定name属性的时候就是一个匿名插槽，一个组件内只能有一个匿名插槽

例如：

子组件

<template>
	<div>
    	 
        <slot>这是一个匿名插槽</slot>
    </div>
</template>

父组件

<template>
	<div>
        <!-- 使用组件 -->
        <子组件>
         	<slot>我是匿名插槽<</slot>   
         </子组件>
    </div>
</template>
<script>
    import 子组件 from '路径'
    export default {
  components: {
    	子组件
  },

</script>

• 具名插槽 在默认插槽的基础上添加指定插槽的名字（name=” “），父组件指定在子组件的那个插槽插入

  例如：

  子组件

  <template>
   <div>
     	<p>段落1</p>
         <slot name="btn">这是一个具名插槽</slot>
         <p>段落2</p>
     </div>
  </template>
  

  父组件

  <template>
  	<div>
          <!-- 使用组件 -->
          <子组件>
              <template v-slot:btn>我是匿名插槽</template> 
           </子组件>
      </div>
  </template>
  <script>
      import 子组件 from '路径'
      export default {
    components: {
      	子组件
    },
  
  </script>
  

  页面展示效果为：

  段落1

  我是具名插槽

  段落2

以下是封装的适用自己需要的table组件

子组件

        <el-table
            :data="tableData"
            style="width: 100%"
            border
            height='500'
            max-height='500'
            :header-cell-style=" {background:'#5987CF',color:'white',textAlign:'center',lineHeight:'30px',padding:'0'}"
            :cell-style="{'text-align':'center','line-height':'20px'}"
            >
            <!-- 单选多选框插槽 -->
            <slot name="chekAll"></slot> 
            <el-table-column
            v-for="item,index in tableTitle"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :fixed="item.fixed"
            >
            <template slot-scope="scope">
            <!-- 特殊需求 -->
                <slot name="demand" :scope="scope" :item="item"></slot>
            </template>
            </el-table-column>
    </el-table>

父组件

 <Table :tableTitle="tableTitle" :tableData="tableData">
                <template #chekAll>
                    <el-table-column type="selection" width="55"></el-table-column>
                </template>
                <template v-slot:demand="{scope,item}">
                    <el-input v-if="item.prop == 'sy_jianshu'" v-model="scope.row.prop" />   
                    <el-button v-else-if="item.label == '操作'">删除</el-button>    
                    <span v-else>{{scope.row[item.prop]}}</span>         
                </template>
            </Table>