[JavaScript知识库]elementui 表格 slot 插槽使用 如果把elementui表格中的操作分离出来.

目前有这样的需求:

1. 表格 使用element-ui
2. 有10个页面都需要用到 这个表格
3. 表格有10个字段展示.
4. 其中这10个字段 有5个字段在各个页面来回切换使用.
5. 并且操作按钮的功能不一样(有1. 查看 2. 修改 3. 删除 4. 审核 5. 其他)

我的解决方案为以下步骤:

1. 把表格封装成组件, 名称为:common_table.vue
2. 传入子组件的数据有 tableData(表格数据) showColumn(隐藏显示列)
3. 使用了slot(插槽) 在父组件使用 控制各个按钮的操作.
4. 剩下的点击方法同学们自由发挥吧.

先看看效果图:
parent页面:

child的页面:

这边我讲的是vue2.0的
先简单的封装一下 公共表格(common_table.vue) 直接上代码了:

<template>
  <div class="table">
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="province"
        label="省份">
      </el-table-column>
      <el-table-column
        prop="city"
        label="市区">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column
        prop="zip"
        label="邮编">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="电话" v-if="showColumn.phone">
      </el-table-column>
      <el-table-column
        prop="school"
        label="学校" v-if="showColumn.school">
      </el-table-column>
      <slot></slot>
      <!-- <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column> -->
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'table',
  props: {
    showColumn:{
      type:Object,
      default:()=>{
        return {}
      }
    }
  },
  data(){
    return{
      tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          phone:'15632548568',
          school:'学校1',
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333,
          phone:'15632548568',
          school:'学校1',
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333,
          phone:'15632548568',
          school:'学校1',
        }, {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333,
          phone:'15632548568',
          school:'学校1',
        }]
    }
  }
}
</script>

<style scoped>
</style>

parent组件为:

<template>
  <div class="parent">
    <CommonTable :showColumn="showColumn">
      <template>  <!--这里的template 必须加 等同于 子组件中的slot(vue2.0版本) 但是注意注意注意vue3.0+ 不用加 -->
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </template>
    </CommonTable>
  </div>
</template>

<script>
import CommonTable from '@/components/common_table.vue'

export default {
  name: 'parent',
  components: {
    CommonTable
  },
  data(){
    return{
      showColumn:{
        phone:true,
      }
    }
  }
}
</script>

child组件:

<template>
  <div class="about">
    <CommonTable :showColumn="showColumn">
      <template>  <!--这里的template 必须加 等同于 子组件中的slot(vue2.0版本) 但是注意注意注意vue3.0+ 不用加 -->
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
      </template>
    </CommonTable>
  </div>
</template>

<script>
import CommonTable from '@/components/common_table.vue'

export default {
  name: 'about',
  components: {
    CommonTable
  },
  data(){
    return{
      showColumn:{
        school:true,
      }
    }
  }
}
</script>

如果能帮助到你的, 麻烦点个赞 . 谢谢!

学到的就要教人，赚到的就要给人。