基于vue+Element Table 表格的封装

2 years ago

source link: https://blog.51cto.com/u_15928719/5989464
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

基于vue+Element Table 表格的封装

精选原创

项目场景：

项目场景：需要频繁使用列表进行呈现数据，不可能每次都写一个表格，可以将表格封装为一个组件，在需要使用时可以直接调用。

效果展示：

项目结构：

具体实现：

Table.vue

<!-- 

  component:列表
  time:2022/11/15

  UserData:列数据
  tableConfig:表格的列配置，[UserId,key,label,width]
  getTableHeaderStyle:表格CSS类名

  表格数据：
  tableConfig:[
    {
      label:'姓名',
      width:150,
      key:'UserName'
    }
  ]
  UserData:[
    {
      "UserId":"1",
      "UserName":"杠铁侠",
      "UserNameValue":'1',
      "UserGender":"男",
      "UserAge":"31",
      "UserItem":"斯塔克工业",
      "UserItemValue":"1",
      "UserPostion":"Java工程师",
      "UserPostionValue":"1",
      "UserPhone": "15987462455",
      "UserEmail": "[email protected]",
      "UserEntryTime":"2020-8-27",
      "Useraddress":"上海市普陀区金沙江路 1518 弄"
    },
  ]

-->
<template>
  <div class="UserTable">
    <el-table
      :data="UserData"
      style="width: 100%"
      :header-cell-style="getTableHeaderStyle"
    >
      <template slot="empty">
        <el-empty :image-size="100" description='暂无数据'></el-empty>
      </template>
      <el-table-column
        v-for="column in tableConfig"
        :key="column.UserId"
        :prop=column.key
        :label=column.label
        :width=column.width>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <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 {
  data(){
    return{
      Userdata:[],
      tableconfig:[],
    }
  },
  props:{
    tableConfig:{
      default(){
        return [];
      }
    },
    UserData:{
      default(){
        return [];
      }
    },
  },
  methods: {
    getTableHeaderStyle(){
      return "background:#eee"
    },
    handleClick(row) {
      console.log(row);
    },
  },
}
</script>

<style>
.el-table{
  padding: 0px 10px 0px 0px;
}
.el-table__body-wrapper{
  padding-bottom: 10px;
}
</style>

UserManagement.vue

<template>
	<!-- 只需要传入数据及配置 -->
	<Table :UserData="Userdata" :tableConfig="tableconfig"></Table>
</template>

<script>
import UserData from '@/data/User'
import Table from '@/views/components/Table.vue'
export default {
  props:{UserData},
  components:{
    Table
  },
  data(){
    Userdata:[],
    tableconfig:[],
  }
  methods(){
  	Tableconfig(){  //列表配置
      this.tableconfig = [
        { //用户姓名
          label:'姓名',
          width:140,
          key:'UserName',
        },
        { //用户性别
          label:'性别',
          width:140,
          key:'UserGender',
        },
        { //用户年龄
          label:'年龄',
          width:140,
          key:'UserAge',
        },
        { //用户团队
          label:'团队',
          width:180,
          key:'UserItem',
        },
        { //用户职位
          label:'职位',
          width:200,
          key:'UserPostion',
        },
        { //用户电话
          label:'电话',
          width:200,
          key:'UserPhone',
        },
        { //用户邮箱
          label:'邮箱',
          width:250,
          key:'UserEmail',
        },
        { //用户入职时间
          label:'入职时间',
          width:150,
          key:'UserEntryTime',
        },
        { //用户地址
          label:'地址',
          width:300,
          key:'Useraddress',
        },
      ]
    },
	},
  mounted(){
    this.Userdata = UserData
    this.Tableconfig()
  },
}
</script>