vue-ele-tables v1.0.5

简介

基于Element-ui封装的表格，支持Element表格的所有属性，用数据生产可配置的表格，支持插槽，表格树，自定义配置表格等。

安装

• 注意：使用之前请确保是否安装好了element-ui组件，目前仅支持Vue 2.x

  #使用 npm安装
  npm install vue-ele-tables
  
  #使用 yarn安装
  yarn add vue-ele-tables

使用

<template>
  <div class="tables">
    <eleTable 
		@tabList="tabList" 
        :api="api"  
        :table-data="tableData" 
        :query="query" 
        :tableLabel="tableLabel">
      <!-- 状态 -->
      <template slot="status" slot-scope="scope">
        <el-switch 
			v-model="scope.row.status"  
            active-color="#13ce66"  
            inactive-color="#ff4949"/>
      </template>
      <!-- 操作 -->
      <template slot="edit" slot-scope="scope">
        <el-button type="text" @click="edit(scope.row)">编辑</el-button>
      </template>
    </eleTable>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import eleTable from 'vue-ele-tables'
export default Vue.extend({
  name: 'tables',
  components: { eleTable },
  data(){
    return{
      api: {
        url: '/list/table',
        method: 'post',
        token: '850ee157-363a-4f76-8e93-111187159dd7'
      },
      tableData: [],
      tableLabel: [
        { prop: 'name', label: '姓名' },
        { prop: 'age', label: '年龄' },
        { prop: 'sex', label: '性别' },
        { prop: 'email', label: '邮箱' },
        { prop: 'msg', label: '文本' },
        { prop: 'status', label: '状态', template: true },
      ],
      query: {
        pageNumber: 1,
        pageSize: 10,
        name: '',
        status: null,
      }
    }
  },
  methods:{
    tabList(res, query){
      let data = res.data.page
      data.forEach(item => {
        item.status === 1 ? item.status =  true : item.status = false
        item.sex === 1 ? item.sex =  '男' : item.sex = '女'
      })
      this.tableData = data
      query.total = res.data.total
    },
    edit(val){
      console.log(val)
      const h = this.$createElement;
      this.$notify({
        position: 'top-left',
        showClose: false,
        message: h(
			'i', 
            { style: 'color: #202124' },
            `${ val.name } ${ val.age }  ${ val.email }`)
      });
    }
  }
});
</script>

文档地址

http://web_saul.gitee.io/vue-ele-tables-file/#/