vue+elementUI+table复杂组件封装

·  阅读 925
vue+elementUI+table复杂组件封装

这是我参与8月更文挑战的第4天,活动详情查看:8月更文挑战

1.封装el-table组件

<template>
  <div class="eltable">
    <el-table
        ref="multipleTable"//获取元素的标识
        :height="settings.height"//表格自定义高度
        v-loading="settings.isLoading"//数据加载动画
        @selection-change="(e) => handleClick('select', e)"//当选择项发生变化时会触发该事件
        highlight-current-row//高亮行
        @current-change="handleCurrentChange"//行发生变化时出发
        @cell-click="handleCellclick"//当某个单元格被点击时会触发该事件
        @select="handleSelect"//有勾选框单选
        @select-all="handleSelectall"//有勾选框全选
        :data="data.list"//表格展示数据
        style="width: 100%"//表格宽度
        row-key="id"//折叠表格必填项,行标识
        :expand-row-keys="settings.expandrowkeys"//需要展开行的数组
        :indent="0"//展开行缩紧
        default-expand-all//默认关闭展开行
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"//展开行设置,有children默认就有展开行
    >
      //固定勾选框列,按需设置settings
       <el-table-column
          v-if="settings.isSelection"
          width="55"
          type="selection"
          fixed
       ></el-table-column>
      //固定排序列,按需设置settings
       <el-table-column
         v-if="settings.isIndex"
         type="index"
         :index="1"
         fixed
         label="序号"
         width="60"
       ></el-table-column>
    //默认数据展示
    <template v-for="item in header">
      <template v-if="item.prop !== 'action' && item.column != true">
        <el-table-column
          :key="item.prop"
          :type="item.type"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :fixed="item.fixed"
          :show-overflow-tooltip="true"
    ></el-table-column>
      </template>
      <template v-if="item.column == true">
        //某列数据单独处理插槽
         <slot :name="item.prop"></slot>
      </template>
     </template>
     //操作列之类的插槽
     <slot name="action"></slot>
 </el-table>
 //翻页组件封装
  <el-pagination
    v-if="settings.isPagination"
    background
    style="text-align:right;padding:25px 15px 25px 0"
    @size-change="(e) => handleClick('pageSize', e)"
    @current-change="(e) => handleClick('currentPage', e)"
    :current-page="currentPage"
    :page-sizes="[20, 50, 100, 200]"
    :page-size="20"
    layout="total, sizes, prev, pager, next, jumper"
    :total="settings.total"
  ></el-pagination>
 </div>
</template>

<script>
/*传值说明:
    settings:{ 相关配置
        isLoading加载数据时显示动效
        height表格高度
        autoHeight:true 是否自动高度
        isSelection; 是否有多选
        selectionWidth多选的宽度
        isIndex 是否需要序列号,默认不需要
        isBorder:是否加框线,默认添加,
        isPagination:是否添加分页,默认false,
        total: 列表总条数
        currentPage 当前页数
    }
    tableData: { 表格数据}
    tableHeader:{表头字段
        isTemplate 是否使用插槽
        isImagePopover 图片带tooltip
    }
事件说明:
    handleClick
    参数 type 点击的类型,如
    选择select, 多选时
    编辑edit, 按钮为编辑时
    查看show, 按钮为查看时
    删除delete, 按钮为删除时
    当前条数pageSize, 开启分页时
    当前页数currentPage等 开启分页时
    e 选中项
    i 选中索引
*/
export default {
    name: "",
    data() {
      return {};
    },
    props: {
        data: { type: Object, default: () => {} },
        header: { type: Array, required: true },
        settings: {
            type: Object,
            default: () => {
                return {
                    height: null,
                    isBorder: true,
                    isLoading: false,
                    isIndex: false,
                    isSelection: false,
                    isPagination: false,
                    currentPage: 1,
                    total: 20,
                };
            },
        },
    },
    computed: {
        currentPage: function() {
           return this.settings.currentPage;
        },
    },
mounted() {},
watch: {
    settings: {
        handler: function(e) {
            console.log(e);
            if (typeof e.isBorder === "undefined") e.isBorder = true;
            if (typeof e.total === "undefined") e.total = 20;
         },
        immediate: true,
    },
    'settings.expandrowkeys'() {
        //展开行手风琴效果设置
        this.data.list.map((item) => {
            if (this.settings.expandrowkeys[0] != item.id) {
                this.$refs.multipleTable.toggleRowExpansion(item, false)
            }else{
                this.$refs.multipleTable.toggleRowExpansion(item)
            }
        })
    }
},
methods: {
    handleClick(type, e) {
        console.log(e);
        if (type == "select") {
            this.$emit("select", e);
        } else if (type == "pageSize") {
        //一页多少条
            this.$emit("pageSize", e);
        } else {
        //第几页
            this.$emit("currentPage", e);
        }
    },
    handleCurrentChange(val) {
        this.$emit("currentChange", val);
    },
    // handleCellclick(row, column, cell, event) {//下面函数可包含参数
    handleCellclick() {
        //切换选中状态
        // this.$refs.multipleTable.toggleRowSelection(row);
    },
    handleSelect(selection, row) {
        //勾选
        this.$emit("handleSelect", selection);
    },
    handleSelectall(selection) {
        //全选
        this.$emit("handleSelectall", selection);
    },
    },
};
</script>
<style scoped>
//关闭原生组件展开行按钮
.el-table .el-table__expand-icon {
    display: none;
}
//展开行样式单独设置
 .el-table__row--level-1{
    background-color:#F0EDFF;
}
//取消点击行配置
 .el-table__body tr.current-row>td {
    background-color: #fff !important;
}
</style>
复制代码

2,组件引用

//引入组件
import DspTable from "./../../../components/table.vue";
//组件声明
components: { DspTable },

//页面引用
<template>
   <div>
       <dsp-table
            :data="tableData"
            :header="dailyHeader"
            :settings="tableSettings"
            @currentPage="currentPage"
            @pageSize="pageSize"
        >
        //自定义展示列插槽
        <template slot="clickPV">
        <el-table-column prop="clickPV" label="点击量" width='150'>
            <template slot-scope="scope" >
                <div class="det-msg">{{ scope.row["clickTips"] }}</div>
            </template>
        </el-table-column>
        </template>
        //自定义操作列插槽
        <template slot="action">
        <el-table-column
            label="操作"
            align="right"
            width="120px"
            fixed="right"
        >
            <template slot-scope="scope">
                <el-button
                //一级表有按钮,二级表没有按钮
                v-if="scope.row['children']"
                type="text"
                //展开行操作
                @click="handleshowtable(scope.row['id'])"
                >{{ scope.row["click"] ? "收起计划" : "查看计划" }}</el-button>
            </template>
        </el-table-column>
        </template>
      </dsp-table>
   </div>
</template>

<script>
export default {
components: { DspTable },
data() {
    return {
        tableData: { list: [] },
        tableSettings: {
            isPagination: true,
            isLoading: true,
            total: 0,
            expandrowkeys: [],
        },
    };
},
created() {},
mounted() {},
watch: {},
computed: {},
methods: {
    handleshowtable(id) {
        if (this.tableSettings.expandrowkeys[0] == id) {
            this.tableSettings.expandrowkeys = [];
            this.tableData.list.map((item) => {
                if (item.id == id) {
                    item.click = false;
                }
            });
        } else {
            this.tableSettings.expandrowkeys = [id + ""];
            this.tableData.list.map((item) => {
                if (item.id == id) {
                    item.click = true;
                } else {
                    item.click = false;
                }
            });
        }
    },
    currentPage(page) {
        this.obj.pageNum = page;
        this.inittable();
    },
    pageSize(size) {
        this.obj.pageNum = "1";
        this.obj.pageSize = size;
        this.inittable();
    },

};

</script>
复制代码
分类:
前端
标签: