ele之Table表格的封装

最新推荐文章于 2024-04-09 16:43:28 发布
最新推荐文章于 2024-04-09 16:43:28 发布
阅读量711 收藏 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
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【ele-pro-table】表格一些常用方法
pmywy的博客
05-24 2892
【ele-pro-table】表格一些常用方法
vue中使用ele组件table实现动态列
wch19960518的博客
03-14 770
vue3中table拼接动态列
element-UI：el-table 表格排序
最新发布
qq_45927262的博客
04-09 341
3、声明sortChange方法，其中column.prop指的是字段列名称prop值，column.order指的是排序方式，有三种值ascending、descending和null。注意：前端接口联调时传的参数是array数组形式处理，要确定后端使用什么注解。4、给后端接口getReportsData传了个数组参数。
解决ele ui 表格表头太长问题的实现
01-19
设计图是这样： 可是做出来是这样： 出现了一行连着。。要知道工作上总有些ui没事做喜欢指指点点。 后来翻查官方手册发现了这个参数： 附上网址:https://element.eleme.cn/#/zh-CN/component/table 首先，我们要知道h是vue封装的一个方法。叫$createelement,大意是创建一个节点（猜的，，没办法英语一级都没考过.）,然后这方法返回一个column和index，column其实就是这一格子里面的东西。我们来打印看一下。 现在我的动态表头里面添加这个方法： 打印column出来是这个格子里面的所有属性。： 接着我们为了实现设
封装el-table表格
weixin_49035434的博客
12-15 779
<!-- 注释区域 --> <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
南漂一枚
11-24 233
封装el-table
el-table组件封装
qq_42221321的博客
02-23 414
el-table封装
vue3-pro-table:一个基于ElementPlus封装的table列表页组件，将包含搜索、列表、分页等功能的页面封装成一个组件
04-19
vue3-pro-table之前有一个是基于 vue2 开发的vue3-pro-table 是基于 vue3 开发一个基于 ElementPlus 封装的 table 列表页组件，将包含搜索、列表、分页等功能的页面封装成一个组件特性将搜索、列表、分页三者的交互...
几种实用table样式
03-29
几种实用table样式
Vue 自适应高度表格的实现方法
11-20
前言 示例版本为 Element-ui 2.13.1 + Vue 2.6.11 本人是做后台开发的，由于公司业务要求需要将前后台模块进行分离，两年...Element-UI 中的 el-table 提供了设置高度的选项，在代码中设置 height 属性就可以现在表格
运动的封装
01-08
以下是运动的简单封装 带有px的css属性和透明度，可以运动 背景色不可以 // 参数2被修改成了对象，那么在使用之前需要解析（遍历） function move(ele,obj,cb){ clearInterval(ele.t); ele.t = setInterval(() => ...
对于elementui中table表格的封装
不上班老板怎么买房买车
03-22 878
对于elementui中table表格的封装
二次封装 - 表格el-table
BlackStar的博客
12-11 378
组件二次封装、二次封装el-table，封装表格
仿avuejs对el-table封装(vue3+element plus)
qq_41972562的博客
04-03 324
仿avuejs对el-table封装(vue3+element plus)
el-table二次封装表格组件
m0_58403721的博客
03-30 1616
基于elementUI中的el-table二次封装组件(动态数据，单选框，开关，操作栏，使用formatter解析部分参数)
仿el-table实现表格控件（内含作用域插槽访问数据， JSX， render）
qq_34295211的博客
01-03 2115
前阵子看了饿了么的el-table源码，自己动手封装了一个具有下拉加载功能的表格控件，其中涉及到的知识有JSX，render渲染函数，组件间的状态管理等等。该组件实现了下拉加载，作用域插槽访问数据，加载动画，和宽度自适应这些主要效果，以及一些el-table常用的属性。下面是实现的效果动态图，点击大图查看效果更好： 由于gif动态图不太清晰，下面放送两张...
el-table二次封装一个表格
anny_mei的博客
01-05 425
效果如下 封装代码 <template> <div> <el-table style="width: 100%" class="table" ref="table" :data="data" stripe :header-cell-style="options.headerCellStyle || {}" :cell-style="options.cellStyle || {}"
ele table 多选 轮子
qq_32265719的博客
12-18 105
ele table 多选 @selection-change="handleSelectionChange" @click="toggleSelection([tableData[1], tableData[2]]) // 切换 @click="toggleSelection() // 取消选择 { data(){return{ multipl...
vue2eleui的table表格怎么根据值不同返回不同的字
05-31
可以使用 Vue.js 中的条件渲染来实现根据值不同返回不同的字。具体做法是在表格中定义一个 slot，然后根据数据的值在 slot 中渲染不同的字。 示例代码如下： ```html <template> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="score" label="分数"> <template slot-scope="scope"> <span v-if="scope.row.score > 90">优秀</span> <span v-else-if="scope.row.score > 60">良好</span> <span v-else>及格</span> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', score: 85 }, { name: '李四', score: 72 }, { name: '王五', score: 96 }, { name: '赵六', score: 53 }, ], }; }, }; </script> ``` 在上面的示例代码中，我们定义了一个表格，其中有两列，分别是“姓名”和“分数”。在“分数”这一列中，我们定义了一个 slot，并在 slot 中根据数据的值渲染不同的字，如果分数大于 90 分，则显示“优秀”，如果大于 60 分，则显示“良好”，否则显示“及格”。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值