ele之Table表格的封装

最新推荐文章于 2024-09-06 14:01:02 发布
最新推荐文章于 2024-09-06 14:01:02 发布
阅读量831 收藏 5
点赞数 2
分类专栏： vue 后台组件 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47409897/article/details/120218631
版权

目录

ele之Table表格的封装

ListTable.vue

  • this.$refs.listTable.rowIndex = ‘’; // 清空当前选中的
<template>
  <div class='table-wrap'>
    <el-table
		v-loading='isLoading'
		ref="listTable"
        :class="`list-table`"
        :data="data.tableData"
        border
        stripe
		height="100%"
		:header-row-class-name="headerColor"
		:summary-method="summaryMethod"
        :show-summary="showSummary"
		:span-method="spanMethod"
		:cell-class-name="cellClassName"
        :header-cell-class-name="`list-table-header`"
		@select="handleSelectionChange"
        style="width: 100%"
		@row-click="rowClick"
		:row-class-name="tableRewClassName">
		<el-table-column
			v-if="isSelect"
			type="selection"
			align="center"
			width="50">
		</el-table-column>
		<el-table-column
			v-if="isSerial"
			type="index"
			:label="'序号'"
			width="50">
		</el-table-column>
		<el-table-column
			v-for="(item, index) in data.tableCol"
			:key="index"
			:show-overflow-tooltip="true"
			:align="item.align"
			:prop="item.prop"
			:label="item.label"
			:width="item.width">
			<template slot-scope="scope">
                {{thousand(scope.row[item.prop])}}
              </template>
		</el-table-column>
		<!-- 多级表头插槽  示例:<template v-slot:multistageHeader></template> -->
		<slot name="multistageHeader"></slot>
		<el-table-column :label="operationText" v-if="isOperation">
			<!-- 操作按钮需要放在模板标签里面: 例:"<template scope="scopeVal" v-slot:operation><button @click="edit(scopeVal)">编辑</button></template>"  -->
			<template slot-scope="scope" >
				<slot :scope="scope" name="operation"></slot>
			</template>
		</el-table-column>
    </el-table>
	<!-- 分页 -->
    <div class="clear_fix page-bottom" v-if="pageData">
		<div class="page-wrap">
			<span style="font-size: 14px">第{{serialNumber}}条/总共{{pageData.total}}条</span>
			<el-pagination
				class="page"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="pageData.currentPage"
				:page-sizes="[5, 10, 15, 20]"
				:page-size="pageData.pageSize"
				layout="prev, pager, next, sizes"
				:total="pageData.total">
			</el-pagination>
		</div>
    </div>
  </div>
</template>

<script>
/**
 * list-table
 *
 * @module components/list-table
 * @desc 表格列表
 * @param data {Object} - tableData 表格内容列表并设置align对齐方式  tableCol 表格标题列表  必传
 * @param isLoading {Boolean} - 请求数据时是显示loading 默认不显示(false)
 * @param isSerial {Boolean} - 是否显示序号 默认不显示(false)
 * @param isRowClick {Boolean} - 是否选显示选中行 高亮红色框默认不显示(false)
 *
 * @param showSummary {Boolean} - 是否在表尾显示合计行 默认不显示(false)
 * @param summaryMethod {Funtion} - 传入一个方法定义自己的合计逻辑
 * @param spanMethod {Funtion} - 传入一个方法定义自己的合并单元格逻辑
 * @param cellClassName {Funtion} - 传入一个方法定义自己的合并单元格后的样式逻辑
 *
 * button
 * @param isOperation {Boolean} - 是否需要操作按钮
 * @param operationText {String} - `操作`标题改
 * Select
 * @param isSelect {Boolean} - 是否需要选择多行数据时使用 Checkbox(false)
 * @param selectData {Array} - selectData 选中的数组 初始化选择
 * @methods tableMultipleSelection 多选方法回调 ((当前操作的数据row, 是否勾选isPick)  )
 * 
import {numStandard} from "@/utils/tool.js"
export default {
	name: 'table-wrap',
	components: {},
	props: {
		data: {
			type: Object,
			required: true
		},
		isLoading: {
			type: Boolean,
			default: false
		},
		isSerial: {
			type: Boolean,
			default: false
		},
		showSummary: {
			type: Boolean,
			default: false
		},
		summaryMethod: {
			type: Function
		},
		spanMethod: {
			type: Function
		},
		cellClassName: {
			type: Function
		},
		isOperation: {
			type: Boolean,
			default: false
		},
		operationText: {
			type: String,
			default: '操作'
		},
		isSelect: {
			type: Boolean,
			default: false
		},
		selectData: {
			type: Array
		},
		pageData: {
			type: Object
		},
		isRowClick:{
			type: Boolean,
			default: false
		}
	},
	computed: {
		serialNumber() {
			let pageData = this.pageData
			return `${(pageData.currentPage - 1) * pageData.pageSize + 1}-${(pageData.currentPage * pageData.pageSize) > pageData.total ? pageData.total: (pageData.currentPage * pageData.pageSize)} `
		}
	},
	watch:{
		data(val, old) {
			this.selectInit()
		}
	},
	data () {
		return {
			rowIndex: '' // 当前选中的  
		};
	},
	methods: {
		thousand(val, type) {
			return typeof(val)=== 'number'? numStandard(val) : val
		},
		headerColor({row, column, rowIndex, columnIndex}){
			if (rowIndex > 0) return 'header-color'
		},
		handleSizeChange(val) {
			this.$emit('changSize', val)
		},
		handleCurrentChange(val) {
			this.$emit('changeCurrent', val)
		},
		handleSelectionChange(val, row) {
			let isPick = val.findIndex(oo => oo.id === row.id) > -1;
			this.$emit("tableMultipleSelection", row, isPick);
		},
		selectInit() {
			let that= this
			if (this.selectData) {
				setTimeout(() => {
					this.data.tableData.map(item => {
						let hasPicked = this.selectData.findIndex(it => it.id === item.id) > -1;
						if (hasPicked) {
							that.$refs.listTable.toggleRowSelection(item);
						}
					})
				})
			}
		},
		tableRewClassName({row, rowIndex}){
			if (!this.isRowClick) return
			row.index = rowIndex
			if (this.rowIndex === rowIndex ) return 'row-style'
		},
		rowClick(row){
			if (!this.isRowClick) return
			this.rowIndex = row.index;
			this.$emit("rowClick", row)
		}
	},
	mounted () {
		this.selectInit()
	}
}

</script>
<style  lang="scss" scoped>
.table-wrap{
	width: 100%;
	height: 100%;
	.page-bottom{
		margin-top: 8px;
	}
	.page-wrap{
		float: right;
		display: flex;
		line-height: 32px;
		::v-deep .el-pager li.active {
			color: #e82323;
			border: solid 1px #e82323;
		}
		::v-deep .el-pager li {
			border: solid 1px transparent;
			border-radius: 2px;
			font-weight: 400;
			color: #1a1a1e;
			margin: 0 4px;
			font-size: 14px;
			min-width: 20px;
		}
	}
	.list-table{
		height: calc(100% - 50px);
		overflow: auto;

	}
	::v-deep .row-style {
		position: relative;
		&::after {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			z-index: 100;
			width: 100%;
			height: 100%;
			border: 1px solid #e82323;
		}
		// border: 1px solid #ff0;
		// box-shadow: inset 0px 0px 6px 0px rgba(255, 0, 0, .6);
	}
    ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td{
		background: #d5dffc;
	}
	::v-deep .list-table-header{
		background: #e82323;
		color: #fff ;
		text-align: center;
		// text-align: center ;
	}
	::v-deep .header-color{
		.list-table-header{
			background: #133891;
		}
	}
	::v-deep .el-table__row--striped td{
		background: #d5dffc;
	}
	::v-deep .has-gutter {
		font-weight: bold;
	}
	::v-deep .el-table .cell{
		line-height: 15px;
	}
}
</style>

简单的使用

在这里插入图片描述

<template>
  <div style="height: 100%">
    <div class="tab_sec"> 
      <list-table :data="TestData" isSerial isSelect />
</template>

<script>
  import listTable from "@/components/commom/conTable/listTable.vue";
  export default {
    components:{
      listTable
    },
    data() {
      return {
        TestData:{
          tableData: [{
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }
          ],
          tableCol : [
            {
              label: "姓名",
              prop: "name",
              showOverFlowTooltip: true,
            },
            {
              label: "日期",
              prop: "date",
              showOverFlowTooltip: true,
            },
            {
              label: "地址",
              prop: "address",
              // width: "163",
              align: "right",
              showOverFlowTooltip: true,
            }
          ]
        },
    }
   };
</script>

带有操作按钮的table

在这里插入图片描述

<template>
  <div style="height: 100%">
    <div class="tab_sec"> 
      <list-table :data="TestData" isSerial isSelect  isOperation operationText="操作" >
        <template  v-slot:operation="scopeVal">
          <button class="blue" @click="view(scopeVal.scope.row)">详情</button>
          <button class="blue" @click="edit(scopeVal.scope.row)">编辑</button>
        </template>
      </list-table>
    </div>
  </div>
</template>

<script>
  import listTable from "@/components/commom/conTable/listTable.vue";
  export default {
    name: "TestTable",
    components:{
      listTable
    },
    data() {
      return {
        TestData:{
          tableData: [{
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }
          ],
          tableCol : [
            {
              label: "姓名",
              prop: "name",
              showOverFlowTooltip: true,
            },
            {
              label: "日期",
              prop: "date",
              showOverFlowTooltip: true,
            },
            {
              label: "地址",
              prop: "address",
              // width: "163",
              align: "right",
              showOverFlowTooltip: true,
            }
          ]
        },
      }
    },
    methods: {
    },
  };
</script>

<style lang="scss" scoped>
.blue { 
  padding: 5px 8px;
  background: #E82323;
  margin-right: 20px;
}
</style>

多行表头table

在这里插入图片描述

<template>
  <div style="height: 100%">
    <div class="tab_sec">
      <list-table
        :data="TestData"
        isSerial
        isSelect
        isOperation
        operationText="操作"
      >
        <template v-slot:multistageHeader>
          <el-table-column label="菜鸡" width="120">
            <el-table-column prop="province" label="省份" width="120">
            </el-table-column>
            <el-table-column prop="city" label="市区" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="300">
            </el-table-column>
          </el-table-column>
        </template>
        <template v-slot:operation="scopeVal">
          <button class="blue" @click="view(scopeVal.scope.row)">详情</button>
          <button class="blue" @click="edit(scopeVal.scope.row)">编辑</button>
        </template>
      </list-table>
    </div>
  </div>
</template>

<script>
import listTable from "@/components/commom/conTable/listTable.vue";
export default {
  name: "TestTable",
  components: {
    listTable,
  },
  data() {
    return {
      TestData: {
        tableData: [
          {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
            province:"广东省",
            city:"深圳市"
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
            province:"广东省",
            city:"广州市"
          },
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
            province:"广东省",
            city:"佛山市"
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
            province:"广东省",
            city:"惠州市"
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
        ],
        tableCol: [
          {
            label: "姓名",
            prop: "name",
            showOverFlowTooltip: true,
          },
          {
            label: "日期",
            prop: "date",
            showOverFlowTooltip: true,
          },
          {
            label: "地址",
            prop: "address",
            // width: "163",
            align: "right",
            showOverFlowTooltip: true,
          },
        ],
      },
    };
  },
  methods: {
    view(row){
      console.log("view", row);
    },
    edit(row){
      console.log("edit", row);
    },
  },
};
</script>

<style lang="scss" scoped>
.blue {
  padding: 5px 8px;
  background: #e82323;
  margin-right: 20px;
}
</style>

选中某一个行

在这里插入图片描述

<template>
  <div style="height: 100%">
    <div class="tab_sec">
      <list-table
        :data="TestData"
        isSerial
        isOperation
        operationText="操作"
        isRowClick
        @rowClick="rowClick"
      >
        <template v-slot:operation="scopeVal">
          <button class="blue" @click="view(scopeVal.scope.row)">详情</button>
          <button class="blue" @click="edit(scopeVal.scope.row)">编辑</button>
        </template>
      </list-table>
    </div>
  </div>
</template>

<script>
import listTable from "@/components/commom/conTable/listTable.vue";
export default {
  name: "TestTable",
  components: {
    listTable,
  },
  data() {
    return {
      TestData: {
        tableData: [
          {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
          },
        ],
        tableCol: [
          {
            label: "姓名",
            prop: "name",
            showOverFlowTooltip: true,
          },
          {
            label: "日期",
            prop: "date",
            showOverFlowTooltip: true,
          },
          {
            label: "地址",
            prop: "address",
            // width: "163",
            align: "right",
            showOverFlowTooltip: true,
          },
        ],
      },
    };
  },
  methods: {
    view(row){
      console.log("view", row);
    },
    edit(row){
      console.log("edit", row);
    },
    rowClick( row ) {
      console.log("rowClick", row);
    }
  },
};
</script>

<style lang="scss" scoped>
.blue {
  padding: 5px 8px;
  background: #e82323;
  margin-right: 20px;
}
</style>
小小liang
关注
专栏目录
el-table组件封装
qq_42221321的博客
02-23 478
el-table封装
elementUI之table组件封装
知迷鸟的博客
04-20 2909
elementUI之table组件封装
封装el-table表格
weixin_49035434的博客
12-15 802
<!-- 注释区域 --> <template> <div class="y_table" :class="{ y_table_moving: dragState.dragging }"> <el-table :data="data" resizable :stripe='option.stripe' size='small' :show-summary="option.showSumm.
el-table 封装表格（完整代码-实时更新）
CMDN123456的博客
09-06 687
el-table 封装表格（完整代码-实时更新）
封装el-table
南漂一枚
11-24 254
封装el-table
el-table-column 表格列自适应宽度的组件封装说明
前端，请指教
04-27 1232
针对组件业务上的需求，需要给 el-table-column 加上限制，需保证表头在一行展示，部分列的内容要一行展示，自适应单项列的宽度；
基于Vue与element 封装Table 表格
Joe
03-22 416
避免重复代码，简化界面，统一配置引用,达到一次注册、全局使用,提升开发维护效率和界面统一的效果
vue 二次封装ElementUI table表格组件
q1ngqingsky的博客
12-07 3902
el-table表格封装 formatter：这个属性在列中如果使用插槽就会失效，所以我设置了两个列，如果有render方法说明单元格要内嵌代码，就是用特殊列，反之就是正常列，所以formatter和render不能同时使用 ...
解决ele ui 表格表头太长问题的实现
01-19
首先，我们要知道h是vue封装的一个方法。叫$createelement,大意是创建一个节点（猜的，，没办法英语一级都没考过.）,然后这方法返回一个column和index，column其实就是这一格子里面的东西。我们来打印看一下。 现在...
vue2 + element-ui 表格的封装
vip66611的博客
07-27 946
element-ui项目的表格封装
对于elementui中table表格的封装
不上班老板怎么买房买车
03-22 916
对于elementui中table表格的封装
二次封装 - 表格el-table
BlackStar的博客
12-11 440
组件二次封装、二次封装el-table，封装表格
仿avuejs对el-table封装(vue3+element plus)
qq_41972562的博客
04-03 371
仿avuejs对el-table封装(vue3+element plus)
el-table二次封装表格组件
m0_58403721的博客
03-30 1904
基于elementUI中的el-table二次封装组件(动态数据，单选框，开关，操作栏，使用formatter解析部分参数)
基于ele封装表格（Vue2）
a52104的博客
04-22 1297
el-table-column v-if="indexIsShow" label="序号" type="index" show-overflow-tooltip width="60"><el-table-column v-if="showHandleButton" fixed="right" label="操作" :width="handleColWidth">* @param showHandleButton 是否显示操作列。* @param indexIsShow 是否显示索引列。
仿el-table实现表格控件（内含作用域插槽访问数据， JSX， render）
qq_34295211的博客
01-03 2245
前阵子看了饿了么的el-table源码，自己动手封装了一个具有下拉加载功能的表格控件，其中涉及到的知识有JSX，render渲染函数，组件间的状态管理等等。该组件实现了下拉加载，作用域插槽访问数据，加载动画，和宽度自适应这些主要效果，以及一些el-table常用的属性。下面是实现的效果动态图，点击大图查看效果更好： 由于gif动态图不太清晰，下面放送两张...
记录：element-ui之＜ele-table＞＜/ele-table＞不显示的问题！
qq_73463251的博客
12-16 771
最新的当时好像是2.15.2，先把原来的node_modules文件删掉，然后重新手写降级。比如2.9.1或者其他任意的较低版本（别太低）数据能获取到，并且给把数据给赋值上了，但就是没有显示，页面依旧空白。降级命令无非就加个@：npm install element-ui@2.9.1。原因就是element-ui的版本太高了。
vue中使用ele组件table实现动态列
wch19960518的博客
03-14 1950
vue3中table拼接动态列
ele-table表格数据重复
最新发布
10-11
在ECharts Table (ele-table)组件中，数据重复通常意味着表格中的某一行或多行数据出现了相同的值，在列属性`repeat`设置为`true`的情况下，默认会合并显示相同的行。如果你想避免数据重复，可以采取以下几个步骤： 1. **检查数据源**：确保你在初始化表格时传入的数据源(`data`)中没有重复的记录。 2. **去重处理**：在将数据放入表格前，你可以对数据进行预处理，例如使用JavaScript的`Array.prototype.filter()`、`Set`或者自定义函数来去除重复项。 ```javascript let uniqueData = data.filter((item, index, self) => { return self.findIndex(i => i[keyToCompare] === item[keyToCompare]) === index; }); ``` 这里`keyToCompare`是你想基于哪一列进行去重的关键字。 3. **配置repeat属性**：如果你确实需要展示重复数据，并希望以某种形式合并它们，可以在列配置中设置`repeat`为`true`，然后使用`repeatCell`属性来定制重复单元格的内容和样式。 4. **使用ag-Grid或其他库**：如果ECharts Table无法满足复杂的重复数据需求，考虑使用其他专门用于表格操作的库，如ag-Grid，它有更好的重复数据处理机制。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值