|
|
@@ -0,0 +1,202 @@
|
|
|
+<template>
|
|
|
+ <el-table
|
|
|
+ v-el-table-infinite-scroll="load"
|
|
|
+ :row-key="props.tableProperty.rowKey?props.tableProperty.rowKey:tablePropertyDefault.rowKey"
|
|
|
+ :row-style="rowStyle"
|
|
|
+ :data="props.tableData"
|
|
|
+ :height="props.tableProperty.height?props.tableProperty.height:tablePropertyDefault.height"
|
|
|
+ :max-height="props.tableProperty.maxHeight?props.tableProperty.maxHeight:tablePropertyDefault.maxHeight"
|
|
|
+ :stripe="props.tableProperty.stripe?props.tableProperty.stripe:tablePropertyDefault.stripe"
|
|
|
+ :border="props.tableProperty.border?props.tableProperty.border:tablePropertyDefault.border"
|
|
|
+ :highlight-current-row="props.tableProperty.highlightCurrentRow?props.tableProperty.highlightCurrentRow:tablePropertyDefault.highlightCurrentRow"
|
|
|
+ :header-cell-class-name="props.tableProperty.headerRowClassName?props.tableProperty.headerRowClassName:tablePropertyDefault.headerRowClassName"
|
|
|
+ :tooltip-effect="props.tableProperty.tooltipEffect?props.tableProperty.tooltipEffect:tablePropertyDefault.tooltipEffect"
|
|
|
+ :show-summary="props.tableProperty.showSummary?props.tableProperty.showSummary:tablePropertyDefault.showSummary"
|
|
|
+ :row-class-name="tableRowClassName"
|
|
|
+ :cell-class-name="cellClassName"
|
|
|
+ >
|
|
|
+ <!-- label-class-name 可通过 tableHeader中传入class来修改某一个或某一类表头的样式-->
|
|
|
+ <el-table-column
|
|
|
+ class="infinite-list-item"
|
|
|
+ v-for="(items, index) in props.tableHeader"
|
|
|
+ :key="index"
|
|
|
+ :label="items.label"
|
|
|
+ :prop="items.key"
|
|
|
+ :width="props.tableColumnProperty.width"
|
|
|
+ :sortable="items.sortable ? items.sortable : props.tableColumnProperty.sortable"
|
|
|
+ :show-overflow-tooltip="props.tableColumnProperty.showOverflowTooltip"
|
|
|
+ :align="items.align ? items.align : props.tableColumnProperty.align"
|
|
|
+ :header-align="items.headerAlign ? items.headerAlign : props.tableColumnProperty.headerAlign"
|
|
|
+ :label-class-name="items.lableClass?items.lableClass:''"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ {{ scope.row[items.key] }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column v-if="props.tableBtnGroup.length" label="操作" :align="props.tableColumnProperty.align">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button v-for="(btn, index) in props.tableBtnGroup"
|
|
|
+ :key="index" size="small"
|
|
|
+ @click="handleClick(scope.$index, scope.row, btn.param)"
|
|
|
+ :class="btn.className"
|
|
|
+ >{{btn.name}}</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!-- <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
|
|
|
+ <li v-for="i in count" :key="i" class="infinite-list-item">{{ i }}</li>
|
|
|
+ </ul> -->
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+//表格参数
|
|
|
+const tablePropertyDefault={
|
|
|
+ height: "100%",
|
|
|
+ maxHeight: "100%",
|
|
|
+ stripe: true,
|
|
|
+ border: true,
|
|
|
+ highlightCurrentRow: false,
|
|
|
+ rowClassName: "rowClass",
|
|
|
+ headerRowClassName: "headerRowClass",
|
|
|
+ tooltipEffect: "light",
|
|
|
+ showSummary: false,
|
|
|
+ rowKey:""
|
|
|
+}
|
|
|
+const props = defineProps({
|
|
|
+ //表头参数数组
|
|
|
+ tableHeader: {
|
|
|
+ type: Array,
|
|
|
+ default: [],
|
|
|
+ },
|
|
|
+ //表格参数
|
|
|
+ tableProperty: {
|
|
|
+ type: Object,
|
|
|
+ default: {
|
|
|
+ height: "100%",
|
|
|
+ maxHeight: "100%",
|
|
|
+ stripe: true,
|
|
|
+ border: true,
|
|
|
+ highlightCurrentRow: false,
|
|
|
+ rowClassName: "rowClass",
|
|
|
+ headerRowClassName: "headerRowClass",
|
|
|
+ tooltipEffect: "light",
|
|
|
+ showSummary: false,
|
|
|
+ rowKey:""
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //公共表头参数
|
|
|
+ tableColumnProperty: {
|
|
|
+ type: Object,
|
|
|
+ default: {
|
|
|
+ width: "",
|
|
|
+ fixed: "",
|
|
|
+ sortable: false,
|
|
|
+ showOverflowTooltip: false,
|
|
|
+ align: "center",
|
|
|
+ headerAlign: "",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ tableBtnGroup:{
|
|
|
+ type:Array,
|
|
|
+ default:[
|
|
|
+ // {
|
|
|
+ // name:"编辑", //按钮名称
|
|
|
+ // className:"editBtn", //按钮class样式 可以在父组件中定义好此class样式
|
|
|
+ // param:2 //按钮类型参数
|
|
|
+ // }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ //表格数据
|
|
|
+ tableData: {
|
|
|
+ type: Array,
|
|
|
+ default: [],
|
|
|
+ },
|
|
|
+});
|
|
|
+//向父组件传参 btnClick：点击按钮后 load 触发下拉加载
|
|
|
+const emit = defineEmits(["btnClick","load"]);
|
|
|
+//按钮点击index为当前行序号 row 为当前行 param按钮类型判断参数由父组件传过来
|
|
|
+const handleClick =(index: number, row:Object , param:number) => {
|
|
|
+ emit("btnClick",row,param)
|
|
|
+}
|
|
|
+
|
|
|
+const rowStyle = (row:Object,rowIndex:number) => {
|
|
|
+ let styleJson:Object={
|
|
|
+ height:'50px',
|
|
|
+ fontSize:"14px",
|
|
|
+ color:"#101116"
|
|
|
+ };
|
|
|
+ return styleJson
|
|
|
+}
|
|
|
+
|
|
|
+//表格行class样式 可通过父组件直接传class名称修改当前行样式
|
|
|
+const tableRowClassName = (row:Object,rowIndex:number) => {
|
|
|
+ if (row.row.rowClass) {
|
|
|
+ return row.row.rowClass
|
|
|
+ }
|
|
|
+ return ''
|
|
|
+}
|
|
|
+
|
|
|
+const cellClassName= (row:Object) => {
|
|
|
+ // console.log(row.row)
|
|
|
+ // console.log(row.column)
|
|
|
+ // console.log(row.rowIndex)
|
|
|
+ // console.log(row.columnIndex)
|
|
|
+}
|
|
|
+//滚动分页加载
|
|
|
+const load = () => {
|
|
|
+ emit("load",true)
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.infinite-list {
|
|
|
+ height: 300px;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ list-style: none;
|
|
|
+}
|
|
|
+.infinite-list .infinite-list-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 50px;
|
|
|
+ background: var(--el-color-primary-light-9);
|
|
|
+ margin: 10px;
|
|
|
+ color: var(--el-color-primary);
|
|
|
+}
|
|
|
+.infinite-list .infinite-list-item + .list-item {
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+::v-deep.el-table .rowClass {
|
|
|
+ height: 40px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #101116;
|
|
|
+}
|
|
|
+::v-deep.el-table .headerRowClass {
|
|
|
+ height: 40px;
|
|
|
+ background: #ffffff;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #101116;
|
|
|
+}
|
|
|
+::v-deep.el-table .editBtn {
|
|
|
+ background: #FFFFFF;
|
|
|
+ border: 1px solid #F79EC6;
|
|
|
+ box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.06);
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #AC014D;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep.el-table .delBtn {
|
|
|
+ background: #EB2F3B;
|
|
|
+ box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.06);
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+</style>
|
