基于element ui的表格的二次封装

日常练习篇      基于element ui的表格的简单二次封装

 

Table Attributes

 

参数	说明	类型	默认值
tableData	显示的数据	array
showBorder	是否带有纵向边框	boolean	false
columns	列属性	object
indexOptions	序号	object
expandOptions	是否展示下拉	boolean	false
showPagination	是否展示分页	boolean	false
loadingOptions	是否有加载动画	object
currentPage	当前页	number	1
pageSizes	每页显示个数选择器的选项设置	number[]	[10, 20, 30, 40]
pageSize	每页显示条目个数	number	10
total	总条目数	number

​
Table配置项

 <xwTable
      :tableData="rolesList"
      :columns="columns"
      :index-options="indexOptions"
      :showBorder="showBorder"
      :expand-options="true"
      :loadingOptions="loadingOptions"
      :showPagination="false"
    ></xwTable>

​

Table-column Attributes

参数	说明	类型
prop	对应列内容的字段名	string
label	显示的标题	string
align	对齐方式	left / center / right
slot	槽	string

（prop 和solt 不能共用）

​

    //列配置项     注意一般数据和插槽的区别
     columns: [
        {
          prop: "roleName",            //一般数据    
          label: "职位",
          align: "center"
        },
        {
          prop: "roleDesc",            //一般数据
          label: "描述",
          align: "center"
        },
        {
          label: "操作",                //插槽
          slot: "operation",
          align: "center"
        }
      ],

​

​插槽的使用： 注意v-slot绑定的值
<template v-slot:operation="scope">
    <el-button type="primary" @click="edit(scope.scope.row)" size="mini">编辑</el-           
    button>
    <el-button type="danger" @click="del(scope.scope.row)" size="mini">删除</el- 
     button>
     <el-button type="warning" @click="allocate(scope.scope.row)" size="mini">分配角 
     色</el-button>
</template>

loadingOptions Attributes

参数	说明	类型	默认值
text	显示在加载图标下方的加载文案	string	空
icon	显示加载图标	图标	有默认
bgColor	遮罩背景色	string	有默认

  //加载配置项
     loadingOptions: {
        text: "加载中...",
        icon: "el-icon-loading",
        bgColor: "rgba(0, 0, 0, 0.8)"
      },

 

indexOptions Attributes

参数	说明	类型	默认值
showIndex	是否显示序号	boolean	true
label	显示的标题	string
align	对齐方式	string	left / center /right
IndexMethod	方法

      //序号配置项
      indexOptions: {
        showIndex: true,
        label: "#",
        align: "center",
        IndexMethod(index) {
          return index + 1;
        }
      },

 

Table Events

 

事件名称	说明	回调参数
handleSizeChange	pageSize 改变时会触发	每页条数
handleCurrentChange	currentPage 改变时会触发	当前页

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }

 

总代码

<template>
  <div>
    <el-table
      :data="tableData"
      :border="showBorder"
      :element-loading-text="loadingOptions.text"
      :element-loading-spinner="loadingOptions.icon"
      :element-loading-background="loadingOptions.bgColor"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      v-loading="!tableData.length"
    >
      <!-- 是否展示下拉 -->
      <el-table-column v-if="expandOptions" type="expand">
        <template slot-scope="scope">
          <slot name="expand" :scope="scope"></slot>
        </template>
      </el-table-column>
      <!-- 是否展示序号 -->
      <el-table-column
        v-if="indexOptions&& indexOptions.showIndex"
        type="index"
        :label="indexOptions.label"
        :align="indexOptions.align"
        :index="indexOptions.indexMethod"
      ></el-table-column>
      <!-- 一般数据正常循环 -->
      <template v-for="(item,index) in columns">
        <el-table-column
          v-if="item.prop"
          :prop="item.prop"
          :label="item.label"
          :key="index"
          :align="item.align"
        >
        </el-table-column>
        <!-- 具名插槽放置按钮 -->
        <el-table-column  v-else :key="index" :label="item.label" :align="item.align">
          <template slot-scope="scope">
            <slot :name="item.slot" :scope="scope"></slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <!-- 分页 -->
    <div v-if="showPagination" class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  props: {
    tableData: {
      //表格数据
      type: Array,
      requrequired: true
    },
    columns: {
      //字段名
      type: Array,
      requrequired: true
    },
    showBorder: {
      //是否带有边框
      type: Boolean,
      default: false
    },
    total: {
      //分页总数据
      type: [String, Number],
      default: 0
    },
    indexOptions: {
      //序号
      type: Object
    },
    expandOptions: {
      //是否展示下拉
      type: Boolean
    },
    showPagination: {
      //是否展示分页
      type: Boolean,
      default: true
    },
    currentPage: {
      //当前页
      type: Number,
      default: 1
    },
    pageSizes: {
      //当前页数数量
      type: Array,
      default: () => [10, 20, 30, 40]
    },
    pageSize: {
      //当前页数大小
      type: Number,
      default: 10
    },
    loadingOptions: {
      //加载
      type: Object,
      default: () => {
        return {
          text: "",
          icon: "el-icon-loading",
          bgColor: "hsla(0,0%,100%,.9)"
        };
      }
    },
  },
  data() {
    return {};
  },
  components: {},
  methods: {
    //改变
    handleSizeChange(val) {
      this.$emit("handleSizeChange", val);
    },
    handleCurrentChange(val) {
      this.$emit("handleCurrentChange", val);
    },
  },
  mounted() {},
  watch: {},
  computed: {}
};
</script>

<style scoped lang='scss'>
</style>

 

显示效果