有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

vue table(VUE 编写后台常用的组件(table))

vue 炮渣日记 3周前 (11-15) 17次浏览 已收录 0个评论 扫描二维码

开始


src/components/ElTable.vue.

<template>
	<div>
        <el-table :data="tableData" style="width: 100%;" v-loading="loading">
            <template :key="index" v-for="(vo, index) of tableColums">
                <!-- s 表格选择 -->
                <template v-if="vo.selection">
                    <el-table-column type="selection" :width="vo.width || 55" />
                </template>
                <!-- e 表格选择 -->

                <template v-else>
                    <!-- s 表格slot -->
                    <el-table-column 
                        v-if="vo.slot"
                        :property="vo.key" 
                        :label="vo.name" 
                        :width="vo.width"
                        :min-width="vo.minWidth"
                        :fixed="vo.fixed"
                    >
                        <template #default="scope">
                            <slot :name="vo.key" :row="scope.row"></slot>
                        </template>
                    </el-table-column>

                    <!-- s 其他 -->
                    <el-table-column 
                        v-else
                        :property="vo.key" 
                        :label="vo.name" 
                        :width="vo.width"
                        :min-width="vo.minWidth"
                        :fixed="vo.fixed"
                    />
                </template>

            </template>
        </el-table>
        <el-row class="page" v-if="page">
            <div class="page_total">
                共{{ Math.ceil(page.total / page.pageSize) }}页/{{
                    page.total
                }}条数据
            </div>
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="page.currentPage"
                :page-sizes="[10, 20, 50]"
                :page-size="page.pageSize"
                layout="sizes, prev, pager, next, jumper"
                :total="page.total"
            >
            </el-pagination>
        </el-row>
    </div>  
</template>

js代码

<script>
    import { computed, ref } from 'vue';
    import { useStore } from 'vuex';
    export default {
        emits:["pageChangeSize","pageChangeCurrent"],
        props:{
            tableData:Array, //表格数据
            tableColums:Array, //表格字段
            page: Object, //分页数据,
            loading: Boolean, //loading
        },
        steup(props, context){
        },
        methods:{
            //改变每页数量
            handleSizeChange(val){
                this.page.pageSize=val;
                this.$emit('pageChangeSize', val);
            },
            //currentPage当前页改变时
            handleCurrentChange(val) {
                this.page.currentPage=val;
                this.$emit('pageChangeCurrent', val);
            }
        }
    }
</script>

这样我们的table组件就完成了。下面我们来看看怎么使用吧

#参数
tableData:[{
  name:"这个总公司",
  teamNum:10,
  personNum:20,
  startTime:'2021-10-10',
  endTime:'2021-10-20'
}],
  tableColums:[
    { key: "name", name: "劳务公司名称", minWidth: "150px", selection:true},
    { key: "teamNum", name: "班组数量", minWidth: "80px" },
    { key: "personNum", name: "人员数量", minWidth: "80px" },
    { key: "startTime", name: "开始时间", minWidth: "120px" },
    { key: "endTime", name: "结束时间", minWidth: "120px" },
    { key: "operation",slot:true,name: "操作", minWidth:"230px", fixed:"right"}
  ],
    page:{
      pageSize:10,
        total:2,
          currentPage:1
    },
      loading:false
#使用分成两种情况,一种是带slot一种是不带slot的

#带slot
<ElTable :tableData="tableData" :tableColums="tableColums" :page="page" :loading="loading">
  <template #operation="scope">
    <el-button type="text" icon="el-icon-edit">修改</el-button>
  	<el-button type="text" icon="el-icon-delete">删除</el-button>
  </template>
</ElTable>

#不带slot
<ElTable :tableData="tableData" :tableColums="tableColums" :page="page" :loading="loading"></ElTable>

每天学习一点,进步一点。加油~~

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址