el-table封装（vue2和vue3）

已于 2023-08-23 17:45:12 修改
阅读量2.3k 收藏 6
点赞数 1
文章标签： vue elementui
于 2023-06-08 16:34:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46899191/article/details/131110825
版权

一、vue2

1，使用组件
<!-- 使用封装的表格组件 -->
<template>
	<div>
		<!-- 
		config  配置
		loading 加载
		tableData 数据
		tableHeader 表头
		rowClassName 背景色
		handleSummaryMethod 共计
		handleRowClick 行点击
		handleSortChange 排序
		handleSpanMethod 合并单元格
		handleSelectionClick 选择
			:loading='loading' 
			:tableData="tableData"
		 -->
		<r-table 
			ref='tableRef' 
			:config="config" 
			v-loading="loading"
      		:data="tableData"
			:tableHeader="tableHeader" 
			:row-class-name="rowClassName" 
			:span-method="handleSpanMethod"
			:summary-method="handleSummaryMethod"
			@row-click='handleRowClick' 
			@link-click='handleLinkClick' 
			@sort-change='handleSortChange'
			@selection-change='handleSelectionClick'>
			<template slot="age" slot-scope="scope">
				<span @click.stop='onClick(scope.row)'>else</span>
			</template>
		</r-table>
	</div>
</template>
<script>
	import rTable from '@/components/rTable';
	
    export default {
		components: {
			rTable
		},
		data() {
			return {
				config: {
					isSelection: true,       //显示复选框
					isRowClick: false,       //使用行点击
					isStripe: false,         //隐藏斑马纹，与背景色不可同时用
					tableHeight: 500,        //表格高度
					isShowSummary: true,     //显示共计
					isIndex:false,           //自定义序号
				},
				tableHeader: [
					{
						prop: 'serialNo',       
						colWidth: '55',    
						title: '编码',       
						type: 'customIndex',      
						isSort:false, 
					},
					{
						prop: 'name',       //字段
						colWidth: '140',    //宽度
						title: '名称',       //表头
						isSort:false,       //是否排序
						type: 'link',       //link:跳转,
					},						// button:文字按钮,
											// tag:标签,
											// process:进度条,
											// slot:插槽, 
											// price:三位隔开, 
											// priceLink:三位隔开&&跳转, 
											// customIndex:自定义序号, 
											// 无: 普通
					
					{
						prop: '',      
						colWidth: '',  
						title: '其他',    
						type: '',     
						isSort:false,
						children:[          //children  二级
							{
								prop: 'date',
								colWidth: '160',
								title: '日期-c',
								isSort:false
							},
							{
								
								prop: 'address',
								colWidth: '',
								title: '详细地址-c',
								isSort:false
							},
							{
								prop: 'price',
								colWidth: '140',
								title: '价格-c',
								type:'price',  
								isSort:true
							},
							{
								prop: 'price',
								colWidth: '140',
								title: '价格-2-c',
								type:'priceLink',
								isSort:true
							},
						]
					},
					{
						prop: 'age',
						colWidth: '100',
						title: '插槽',
						type: 'slot',  
						isSort:false
					},
					{
						prop: 'status',
						colWidth: '100',
						title: '状态',
						type: 'tag',
						isSort:false
					},
					{
						prop: 'num',
						colWidth: '140',
						title: '进度',
						type: 'process',
						isRide: true,
						isSort:false
					},
					{
						prop: '',
						colWidth: '100',
						title: '详情',
						type: 'button',
						btnText: '查看',
						isSort:false
					}
				],
				loading: false,
				tableData: [
				 {
					id:2,
					date: '2016-06-04',
					name: '王小虎-2',
					address: '上海市普陀区金沙江路 1517 弄',
					status: false,
					num: 0.52,
					price: 10022,
					
				},
				{
					id:1,
					date: '2016-06-02',
					name: '王小虎-1',
					address: '上海市普陀区金沙江路 1518 弄',
					status: false,
					num: 0.7,
					price: 1000,
					color: 'green'
				}, 
				{
					id:1,
					date: '2016-06-02',
					name: '王小虎-1',
					address: '上海市普陀区金沙江路 1518 弄',
					status: false,
					num: 0.7,
					price: 1001,
					color: 'green'
				},
				{
					id:3,
					date: '2016-06-05',
					name: '王小虎-3',
					address: '上海市普陀区金沙江路 1519 弄',
					status: true,
					price: 156789,
					num: 0.67,
				}, {
					id:4,
					date: '2016-06-06',
					name: '王小虎-4',
					address: '上海市普陀区金沙江路 1516 弄',
					status: false,
					num: 0.43,
					price: 400,
					color: 'orange'
				}],
				spanList:[],  //合并单元格
				spanList2:[],
				orderList: [{ column: '', asc: false }],  // 默认, asc:false 倒序
				queryParams: {
					current: 1,
					size: 20
				},
			}
		},
		mounted() {
			this.getList();
		},
		methods: {
			onClick(row){
				console.log('插槽点击---->',row);
			},
			handleSortChange(value){
				
				//手动只能排序数字，还是需要通接口的
				const params = value.prop;
				if(value.order == 'descending'){
					this.tableData.sort((a,b)=>{
						return b[params] - a[params]
					})
					
				}else if(value.order == 'ascending'){
					this.tableData.sort((a,b)=>{
						return a[params] - b[params]
					})
				}
				this.getList();
				//通接口整理参数
				// switch (value.order) {
				// case 'ascending':
				//   this.orderList[0].column = value.prop;
				//   this.orderList[0].asc = true;
				//   break
				// case 'descending': 
				//   this.orderList[0].column = value.prop;
				//   this.orderList[0].asc = false;
				//   break
			 //  }
			 //  this.getList();
			},
			getList(){
				this.queryParams = this.filterOrderItems( this.queryParams,this.orderList);
				this.getSpanArr(this.tableData);
			},
			getSpanArr(data) {
				this.spanList = [];
				let sIndex = 0;

				// let sIndex2 = 0;
				// this.spanList2 = [];

				for (var i = 0; i < data.length; i++) {
					if (i === 0) {
						this.spanList.push(1);
						
					  	// this.spanList2.push(1);  //另一个字段合并
					} else {
						if (data[i].id === data[i - 1].id) {
							this.spanList[sIndex] ++
							this.spanList.push(0);
						} else {
							this.spanList.push(1);
							sIndex = i;
						}

						//if(data[i].pName == data[i -1 ].pName){
							//this.spanList2[sIndex2]++
							//this.spanList2.push(0);
						//}else{
							//this.spanList2.push(1);
							//sIndex2 = index;
						//}

					}
				}

				//序号值
				let serialNo = 0;
				for(let n in this.spanList){
					if(this.spanList[n] > 0){
					serialNo += 1;
					this.$set(data[n],'serialNo',serialNo);
					}
				}
			},
			handleSpanMethod({row,column,rowIndex,columnIndex}){
				// if (columnIndex != 1 && columnIndex < 7) {
				if (columnIndex < 7 ) {
					const _row = this.spanList[rowIndex];
					const _col = _row > 0 ? 1 : 0;    
					return {
					rowspan: _row,
					colspan: _col
					}
      			}
				//else if (columnIndex == 8) {
					//const _row = this.spanList2[rowIndex];
					//const _col = _row > 0 ? 1 : 0;    
					//return {
					  //rowspan: _row,
					  //colspan: _col
					//}
				//}
			},
			handleSummaryMethod(param) {
				const { columns, data} = param;
				const sums = [];
				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = '合计'
						//只计算倒数第5列、第6列
					} else if (index === columns.length - 5 || index === columns.length - 6) {
						const values = data.map(item => Number(item[column.property]))
						if (!values.every(value => isNaN(value))) {
							sums[index] = values.reduce((prev, curr) => {
								const value = Number(curr)
								if (!isNaN(value)) {
									return prev + curr
								} else {
									return prev
								}
							}, 0)
							sums[index] += '';
						} else {
							sums[index] = '';
						}
					} else {
						sums[index] = '';
					}
				})
				return sums;
			},
			handleLinkClick(row, title) {
				if (title == '名称') {
					console.log('名称跳转====>', row.name);
				} else if (title == '详情') {
					console.log('详情跳转----->', row.name);
				} else if (title == '进度') {
					console.log('进度跳转----->', row.name);
				}else{
					console.log('跳转---->', title);
				}
			},
			handleSelectionClick(selection) {
				console.log('勾选---->', selection);
			},
			handleRowClick(row) {
				console.log('行点击---->', row);
			},
			//注：背景色与斑马纹不能同在
			rowClassName({row,rowIndex}) {
				row.index = rowIndex;
				if (row.color) return row.color + '-bg';
			},
			filterOrderItems(params, list) {
			  for (const key in params) {
			    if (key.indexOf('orders[') > -1) {
			      delete params[key];
			    }
			  }
			  if (list && list.length>0) {
			    for (let i = 0; i < list.length; i++) {
			      for (const key in list[i]) {
			        params['orders[' + i + '].' + key] = list[i][key];
			      }
			    }
			  }
			  return params;
			}
		}

	}
</script>
<style scoped>
	::v-deep .orange-bg {
		background-color: #e6a23c !important;
	}

	::v-deep .green-bg {
		background-color: #4cd964 !important;
	}
	
	::v-deep .red-bg {
		background-color: #f56c6c !important;
	}
</style>
2，封装组件
<!-- 封装表格 -->
<template>
    <!-- :data="tableData" 
    v-loading='loading' -->
<div>
    <el-table 
        v-bind="$attrs"
        border 
        style="width: 100%"
        :header-cell-style="{ background:'#f5f5f5',height:'40px',color:'#515a6e'}"
        :style="`height:${config.tableHeight}px;width: 100%`" 
        :max-height="config.tableHeight"
        :stripe="config.isStripe"
        :span-method="spanMethod"
        :row-class-name="rowClassName"
        :summary-method="summaryMethod"
        :show-summary='config.isShowSummary'
        @row-click="rowClick"
        @sort-change="sortChange"
        @selection-change="selectionChange">
        <el-table-column align='center' type="selection" width="55" v-if="config.isSelection" />
        <el-table-column align='center' type="index" label="序号" width="55" v-if="config.isIndex"/>
        <el-table-column align='center' 
            v-for='(item,index) in tableHeader' 
            :key='index'
            :prop="item.prop"
            :width="item.colWidth"
            :label="item.title"
            :sortable="item.isSort?'custom':false"
            show-overflow-tooltip>
            <!-- 一级 -->
            <template slot-scope="scope">
                <template v-if="item.type === 'customIndex'">
                    <span>{{scope.row[item.prop]}}</span>
                </template>
                <template v-else-if="item.type === 'link'">
                    <el-link type="primary" @click.stop="linkClick(scope.row,item.title)">{{scope.row[item.prop]}}</el-link>
                </template>
                <template v-else-if="item.type === 'button'">
                    <el-button type="text" size='mini' @click.stop="linkClick(scope.row,item.title)">{{item.btnText}}</el-button>
                </template>
                <template v-else-if="item.type === 'tag'">
                    <el-tag :type="scope.row[item.prop]?'':'danger'">{{scope.row[item.prop]?'是':'否'}}</el-tag>
                </template>
                <template v-else-if="item.type === 'price'">
                    <span>{{ handleNum(Number(scope.row[item.prop])) }}</span>
                </template>
                <template v-else-if="item.type === 'priceLink'">
                    <el-link type="primary" @click.stop="linkClick(scope.row,item.title)">{{ handleNum(Number(scope.row[item.prop])) }}</el-link>
                </template>
                <template v-else-if="item.type === 'process'">
                    <span @click.stop="linkClick(scope.row,item.title)">
                        <!-- 当0.07*100结果是7.000000000000001 -->
                        <el-progress :percentage="item.isRide?Number(scope.row[item.prop])*10/10*100:Number(scope.row[item.prop])*10/10"  :text-inside="true" :stroke-width="13"></el-progress>
                    </span>
                </template>
                 <!-- 插槽 -->
                <slot v-else-if="item.type === 'slot'"  :name="item.prop"  :row="scope.row" :index="scope.$index"></slot>
                <template v-else>
                    <span>{{scope.row[item.prop]}}</span>
                </template>
            </template>
            
            <!-- 二级 子项 -->
            <template v-for='(v,i) in item.children'>
                <el-table-column align='center'
                    :key='i'
                    :prop="v.prop"
                    :width="v.colWidth"
                    :label="v.title"
                    :sortable="v.isSort?'custom':false"
                    show-overflow-tooltip>
                    <template slot-scope="scope" @click.stop>
                        <template v-if="v.type === 'link'">
                            <el-link type="primary" @click.stop="linkClick(scope.row,v.title)">{{scope.row[v.prop]}}</el-link>
                        </template>
                        <template v-else-if="v.type === 'button'">
                            <el-button type="text" size='mini' @click.stop="linkClick(scope.row,v.title)">{{v.btnText}}</el-button>
                        </template>
                        <template v-else-if="v.type === 'tag'">
                            <el-tag :type="scope.row[v.prop]?'':'danger'">{{scope.row[v.prop]?'是':'否'}}</el-tag>
                        </template>
                        <template v-else-if="v.type === 'price'">
                            <span>{{ handleNum(Number(scope.row[v.prop])) }}</span>
                        </template>
                        <template v-else-if="v.type === 'priceLink'">
                            <el-link type="primary" @click.stop="linkClick(scope.row,v.title)">{{ handleNum(Number(scope.row[v.prop])) }}</el-link>
                        </template>
                        <template v-else-if="v.type === 'process'">
                            <span @click.stop="linkClick(scope.row,v.title)">
                                <el-progress :percentage="v.isRide?Number(scope.row[v.prop])*10/10*100:Number(scope.row[v.prop])*10/10"  :text-inside="true" :stroke-width="13"></el-progress>
                            </span>
                        </template>
                        <template v-else>
                            <span>{{scope.row[v.prop]}}</span>
                        </template>
                    </template>
                </el-table-column>	
            </template>
        </el-table-column>
    </el-table>
</div>
</template>
<script>
export default {
    name: "Table",
    props: {
        config:{},
        rowClassName: { 
            type: Function
        },
        summaryMethod:{
            type: Function
        },
        spanMethod:{
            type: Function
        },
        tableHeader:{
            type: Array,
            default: () => [],
        },
        loading: Boolean,
        tableData:{
            type: Array,
            default: () => [],
        },
        
      },
    data() {
        return {
            
        }
    },
    mounted() {

    },
    methods: {
        linkClick(row,title){
            this.$emit('link-click', row, title);
        },
        selectionChange(selection) {
           this.$emit('selection-change', selection);
        },
        rowClick(row) {
            if(this.config.isRowClick) this.$emit('row-click', row);
        },
        sortChange(value) {
            if(value.order) this.$emit('sort-change', value);
        },
        handleNum(num){
             //(1)保留两位小数
            var dot = String(num).indexOf(".");
            if(dot != -1){
            var dotCnt = String(num).substring(dot+1,num.length);
                if(dotCnt.length > 2)  num = num.toFixed(2);
            }
            //(2)四舍五入取整数
             // num = Math.round(num)
             //三位隔开
            return String(num).replace(/\d+/, function(n) {
                return  n.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
            });
        }
        
    }

}
</script>

二、vue3

1，使用组件
<template>
	<div>
		<div class="long-text-box">
     		<span class="text">13993199751_18037893546_101aaa</span>
    	</div>
		<!-- 
		config  配置
		loading 加载
		tableData 数据
		tableHeader 表头
		rowClassName 背景色
		handleSummaryMethod 共计
		handleRowClick 行点击
		handleSortChange 排序
		handleSpanMethod 合并单元格
		handleSelectionClick 选择
		 -->
		<r-table 
			ref='tableRef' 
			:config="state.config" 
			v-loading='state.loading' 
			:data="state.tableData"
			:tableHeader="state.tableHeader" 
			:row-class-name="rowClassName" 
			:span-method="handleSpanMethod"
			:summary-method="handleSummaryMethod"
			@row-click='handleRowClick' 
			@link-click='handleLinkClick' 
			@sort-change='handleSortChange'
			@selection-change='handleSelectionClick'>
			<template v-slot:age slot-scope="scope">
				<span @click.stop='onClick(scope.row)'>else</span>
			</template>
		</r-table>
		<div>计算器{{ count }}</div>
	</div>
</template>
<script setup lang="ts" name="index">
// 引入
import { defineAsyncComponent, reactive, onMounted,ref,watch } from 'vue';

const count = ref(0);
//watch 监听一个响应式数据
watch(count, () => {
    console.log("count改变了");
});
setTimeout(() => {
    count.value++;
}, 2000);

const user = reactive({
    name: "tom",
    info: {
        gender: "男",
        age: 18,
    }
})
//watch 监听多个数据
watch([count, user], () => {
    console.log("监听多个数据");
});
setTimeout(() => {
    count.value++;
}, 2000);
setTimeout(() => {
    user.info.age++;
}, 4000);

// 引入组件
const rTable = defineAsyncComponent(() => import('/@/components/table/table.vue'));

const state = reactive({
	config: {
		isSelection: true,       //显示复选框
		isRowClick: false,       //使用行点击
		isStripe: false,         //隐藏斑马纹，与背景色不可同时用
		tableHeight: 500,        //表格高度
		isShowSummary: false,    //显示共计
		isIndex: false,   		 //自定义序号
	},
	tableHeader: [
		{
			prop: 'serialNo',       
			colWidth: '55',    
			title: '编码',       
			type: 'customIndex',      
			isSort:false, 
		},
		{
			prop: 'name',       //字段
			colWidth: '140',    //宽度
			title: '名称',       //表头
			isSort:false,       //是否排序
			type: 'link',       //link:跳转,
		},						// button:文字按钮,
								// tag:标签,
								// process:进度条,
								// slot:插槽, 
								// price:三位隔开, 
								// priceLink:三位隔开&&跳转, 
								// customIndex:自定义序号, 
								// 无: 普通
		{
			prop: '',      
			colWidth: '',  
			title: '其他',    
			type: '',     
			isSort:false,
			children:[          //children  二级
				{
					prop: 'date',
					colWidth: '160',
					title: '日期-c',
					isSort:false,
					type: '', 
				},
				{
					
					prop: 'address',
					colWidth: '',
					title: '详细地址-c',
					isSort:false,
					type: '', 
				},
				{
					prop: 'price',
					colWidth: '140',
					title: '价格-c',
					type:'price',  
					isSort:true,
				},
				{
					prop: 'price',
					colWidth: '140',
					title: '价格-2-c',
					type:'priceLink',
					isSort:true
				},
			]
		},
		{
			prop: 'age',
			colWidth: '100',
			title: '插槽',
			type: 'slot',  
			isSort:false
		},
		{
			prop: 'status',
			colWidth: '100',
			title: '状态',
			type: 'tag',
			isSort:false
		},
		{
			prop: 'num',
			colWidth: '140',
			title: '进度',
			type: 'process',
			isRide: true,
			isSort:false
		},
		{
			prop: '',
			colWidth: '100',
			title: '详情',
			type: 'button',
			btnText: '查看',
			isSort:false
		}
	],
	loading: false,
	tableData: [
		{
		id:2,
		date: '2016-06-04',
		name: '王小虎-2',
		address: '上海市普陀区金沙江路 1517 弄',
		status: false,
		num: 0.52,
		price: 10022,
		
	},
	{
		id:1,
		date: '2016-06-02',
		name: '王小虎-1',
		address: '上海市普陀区金沙江路 1518 弄',
		status: false,
		num: 0.7,
		price: 1000,
		color: 'green'
	}, 
	{
		id:1,
		date: '2016-06-02',
		name: '王小虎-1',
		address: '上海市普陀区金沙江路 1518 弄',
		status: false,
		num: 0.7,
		price: 1001,
		color: 'green'
	},
	{
		id:3,
		date: '2016-06-05',
		name: '王小虎-3',
		address: '上海市普陀区金沙江路 1519 弄',
		status: true,
		price: 156789,
		num: 0.67,
	}, {
		id:4,
		date: '2016-06-06',
		name: '王小虎-4',
		address: '上海市普陀区金沙江路 1516 弄',
		status: false,
		num: 0.43,
		price: 400,
		color: 'orange'
	}],
	spanList:[],  //合并单元格
	orderList: [{ column: '', asc: false }],  // 默认, asc:false 倒序
	queryParams: {
		current: 1,
		size: 20
	},
})
const onClick = (row:Object)=>{
	console.log('插槽点击---->',row);
}
const handleSortChange=(value:Object)=>{
				
	//手动只能排序数字，还是需要通接口的
	const params = value.prop;
	if(value.order == 'descending'){
		state.tableData.sort((a,b)=>{
			return b[params] - a[params]
		})
		
	}else if(value.order == 'ascending'){
		state.tableData.sort((a,b)=>{
			return a[params] - b[params]
		})
	}
	getList()
	
	//通接口整理参数
	// switch (value.order) {
	// case 'ascending':
	//   this.orderList[0].column = value.prop;
	//   this.orderList[0].asc = true;
	//   break
	// case 'descending': 
	//   this.orderList[0].column = value.prop;
	//   this.orderList[0].asc = false;
	//   break
	//  }
	//  this.getList();
}
const handleSelectionClick = (selection:Array)=>{
	console.log('勾选---->', selection);
}
const handleRowClick = (row:Object) => {
	console.log('行点击---->', row);
}
//注：背景色与斑马纹不能同在
const rowClassName = ({row,rowIndex})=>{
	row.index = rowIndex;
	if (row.color) return row.color + '-bg';
}
const handleLinkClick = (row:Object, title:String)=>{
	if (title == '名称') {
		console.log('名称跳转====>', row.name);
	} else if (title == '详情') {
		console.log('详情跳转----->', row.name);
	} else if (title == '进度') {
		console.log('进度跳转----->', row.name);
	}else{
		console.log('跳转---->', title);
	}
}
const handleSummaryMethod = (param:Object)=>{
	const { columns, data} = param;
	const sums = [];
	columns.forEach((column, index) => {
		if (index === 0) {
			sums[index] = '合计';
			//只计算倒数第2列
		} else if (index === columns.length - 2) {
			const values = data.map(item => Number(item[column.property]))
			if (!values.every(value => isNaN(value))) {
				sums[index] = values.reduce((prev, curr) => {
					const value = Number(curr)
					if (!isNaN(value)) {
						return prev + curr
					} else {
						return prev
					}
				}, 0)
				sums[index] += '';
			} else {
				sums[index] = '';
			}
		} else {
			sums[index] = '';
		}
	})
	return sums;
}
const handleSpanMethod = ({row,column,rowIndex,columnIndex}) => {
	// if (columnIndex != 1 && columnIndex < 7) {
	if (columnIndex < 7 ) {
		const _row = state.spanList[rowIndex];
		const _col = _row > 0 ? 1 : 0;    
		return {
		rowspan: _row,
		colspan: _col
		}
	}
	//else if (columnIndex == 8) {
		//const _row = state.spanList2[rowIndex];
		//const _col = _row > 0 ? 1 : 0;    
		//return {
			//rowspan: _row,
			//colspan: _col
		//}
	//}
}

const getList = () =>{
	// this.queryParams = this.filterOrderItems( this.queryParams,this.orderList);
	getSpanArr(state.tableData);
}
const getSpanArr = (data) => {
	state.spanList = [];
	let sIndex = 0;

	// let sIndex2 = 0;
	// this.spanList2 = [];

	for (var i = 0; i < data.length; i++) {
		if (i === 0) {
			state.spanList.push(1);
			
			// this.spanList2.push(1);  //另一个字段合并
		} else {
			if (data[i].id === data[i - 1].id) {
				state.spanList[sIndex] ++
				state.spanList.push(0);
			} else {
				state.spanList.push(1);
				sIndex = i;
			}

			//if(data[i].pName == data[i -1 ].pName){
				//this.spanList2[sIndex2]++
				//this.spanList2.push(0);
			//}else{
				//this.spanList2.push(1);
				//sIndex2 = index;
			//}
		}
	}

	//序号值
	let serialNo = 0;
	for(let n in state.spanList){
		if(state.spanList[n] > 0){
			serialNo += 1;
			data[n].serialNo = serialNo;	
		}
	}
}

onMounted(() => {
	getList();
});
</script>
<style scoped>
	::v-deep .orange-bg {
		background-color: #e6a23c !important;
	}

	::v-deep .green-bg {
		background-color: #4cd964 !important;
	}
	
	::v-deep .red-bg {
		background-color: #f56c6c !important;
	}
	.long-text-box {
		width:120px;
		padding:4px 6px;
		border: 1px solid #c0c0cc;
		border-radius: 4px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		direction: rtl;
  	}
	.long-text-box .text {
		direction: ltr;
		unicode-bidi: bidi-override; 
	};
</style>
2，封装组件
<!-- 封装组件 -->
<template>
  <div>
    <el-table 
      style="width: 100%" 
      :style="`height:${config.tableHeight}px;`" 
      :max-height="config.tableHeight"
      border 
      v-bind="$attrs" 
      @row-click="rowClick" 
      :stripe="config.isStripe" 
      :show-summary='config.isShowSummary'
      @sort-change="sortChange" 
      @selection-change="selectionChange"
    >
      <el-table-column align='center' type="selection" width="55" v-if="config.isSelection" />
      <el-table-column align='center' type="index" label="序号" width="55" v-if="config.isIndex"/>
      <el-table-column align='center' v-for='(item, index) in tableHeader' :key='index' :prop="item.prop"
        :width="item.colWidth" :label="item.title" :sortable="item.isSort ? 'custom' : false" show-overflow-tooltip>
        <!-- 一级 v-slot="scope"-->
        <template v-slot="scope" @click.stop>
          <template v-if="item.type === 'customIndex'">
              <span>{{scope.row[item.prop]}}</span>
          </template>
          <template v-else-if="item.type === 'link'">
            <el-link type="primary" @click.stop="linkClick(scope.row, item.title)">{{ scope.row[item.prop]
            }}</el-link>
          </template>
          <template v-else-if="item.type === 'button'">
            <el-button type="text" size='mini' @click.stop="linkClick(scope.row, item.title)">{{ item.btnText
            }}</el-button>
          </template>
          <template v-else-if="item.type === 'tag'">
            <el-tag :type="scope.row[item.prop] ? '' : 'danger'">{{ scope.row[item.prop] ? '是' : '否' }}</el-tag>
          </template>
          <template v-else-if="item.type === 'price'">
            <span>{{ handleNum(Number(scope.row[item.prop])) }}</span>
          </template>
          <template v-else-if="item.type === 'priceLink'">
            <el-link type="primary" @click.stop="linkClick(scope.row, item.title)">{{
              handleNum(Number(scope.row[item.prop])) }}</el-link>
          </template>
          <template v-else-if="item.type === 'process'">
            <span @click.stop="linkClick(scope.row, item.title)">

              <el-progress
                :percentage="item.isRide ? Number(scope.row[item.prop]) * 10 / 10 * 100 : Number(scope.row[item.prop]) * 10 / 10"
                :text-inside="true" :stroke-width="13"></el-progress>
            </span>
          </template>
          <!-- 当0.07*100结果是7.000000000000001 -->
          <!-- 插槽 -->
          <slot v-else-if="item.type === 'slot'" :name="item.prop" :row="scope.row" :index="scope.$index"></slot>
          <template v-else>
            <span>{{ scope.row[item.prop] }}</span>
          </template>

          <!-- 二级 子项 -->
          <template v-for='(v, i) in item.children' :key='i'>
            <el-table-column align='center' :prop="v.prop" :width="v.colWidth" :label="v.title"
              :sortable="v.isSort ? 'custom' : false" show-overflow-tooltip>
              <template v-slot="scope" @click.stop>

                <template v-if="v.type === 'link'">
                  <el-link type="primary" @click.stop="linkClick(scope.row, v.title)">{{ scope.row[v.prop]
                  }}</el-link>
                </template>
                <template v-else-if="v.type === 'button'">
                  <el-button type="text" size='mini' @click.stop="linkClick(scope.row, v.title)">{{
                    v.btnText }}</el-button>
                </template>
                <template v-else-if="v.type === 'tag'">
                  <el-tag :type="scope.row[v.prop] ? '' : 'danger'">{{ scope.row[v.prop] ? '是' : '否'
                  }}</el-tag>
                </template>
                <template v-else-if="v.type === 'price'">
                  <span>{{ handleNum(Number(scope.row[v.prop])) }}</span>
                </template>
                <template v-else-if="v.type === 'priceLink'">
                  <el-link type="primary" @click.stop="linkClick(scope.row, v.title)">
                    {{ handleNum(Number(scope.row[v.prop])) }}
                  </el-link>
                </template>
                <template v-else-if="v.type === 'process'">
                  <span @click.stop="linkClick(scope.row, v.title)">
                    <el-progress
                      :percentage="v.isRide ? Number(scope.row[v.prop]) * 10 / 10 * 100 : Number(scope.row[v.prop]) * 10 / 10"
                      :text-inside="true" :stroke-width="13"></el-progress>
                  </span>
                </template>
                <template v-else>
                  <span>{{ scope.row[v.prop] }}</span>
                </template>
              </template>
            </el-table-column>
          </template>
        </template>

      </el-table-column>
    </el-table>
  </div>
</template>
<script setup lang="ts" name="elementTable">

const props = defineProps({
  config: {
    type: Object,
    default: () => { },
  },
  tableHeader: {
    type: Array,
    default: () => [],
  },
  tableData: {
    type: Array,
    default: () => [],
  }
});

// 定义子组件向父组件传值/事件
const emit = defineEmits(['link-click', 'selection-change', 'row-click', 'sort-change']);

const linkClick = (row: Object, title: String) => {
  emit('link-click', row, title);
};
const selectionChange = (selection: Array) => {
  emit('selection-change', selection);
};
const rowClick = (row: Object) => {
  if (props.config.isRowClick) emit('row-click', row);
};
const sortChange = (value: Object) => {
  if (value.order) emit('sort-change', value);
};
const handleNum = (num: number) => {
  //(1)保留两位小数
  var dot = String(num).indexOf('.');
  if (dot != -1) {
    var dotCnt = String(num).substring(dot + 1, num.length);
    if (dotCnt.length > 2) num = num.toFixed(2);
  }
  //(2)四舍五入取整数
  // num = Math.round(num)
  //三位隔开
  return String(num).replace(/\d+/, function (n) {
    return n.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
  });
};
</script>
暖风阵阵
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue3-pro-table:一个基于ElementPlus封装的table列表页组件，将包含搜索、列表、分页等功能的页面封装成一个组件
04-19
vue3-pro-table 之前有一个是基于 vue2 开发的 vue3-pro-table 是基于 vue3 开发 一个基于 ElementPlus 封装的 table 列表页组件，将包含搜索、列表、分页等功能的页面封装成一个组件 特性 将搜索、列表、分页三者的交互逻辑封装到组件中，节省开发者代码量 配置化的请求函数，自动发送请求，自动获取请求参数，自动显示 loading 效果 配置化的表格项，跟 el-table-column 的配置属性类似 配置化的搜索表单，支持大部分表单元素 配置化的分页，跟 el-pagination 的配置属性类似 自定义是否显示搜索和分页 自定义标题栏和工具栏 丰富的插槽提供功能扩展 使用 安装和引入 安装 // npm npm install vue3-pro-table // yarn yarn add vue3-pro-table 引入 该组件依赖
组件化页面：封装el-table
weixin_34387468的博客
05-08 3097
项目做的越来越多，重复的东西不断的封装成了组件，慢慢的，页面就组件化了，只需要定义组件配置数据，使用就好了，这是一件非常舒服的事情，这篇文章主要和大家讲讲如何对element-ui中的el-table进行二次封装。 分析需求 公有组件，可以被任何页面调用，首先要保证组件不和外部业务发生耦合，其次就是要设计合理的字段，使用时通过不同的配置即可使用。 那先大致来分析以下可能有的需求： 动态表头 嵌套...
推荐一款优秀的Vue组件库：Vuetable-2
最新发布
gitblog_00021的博客
03-23 368
推荐一款优秀的Vue组件库：Vuetable-2 项目地址:https://gitcode.com/ratiw/vuetable-2 Vuetable-2 是一个基于 Vue.js 的数据表格组件，它能够轻松地将动态数据展示为清晰、可操作的表格形式。该项目由 Ratiw 制作并维护，提供了一种简洁高效的方式来处理和展示数据。 技术分析 Vuetable-2 基于 Vue 2.x 构建，充分利用了 ...
Element表格（el-table）如何封装
u014197593的博客
12-12 608
vue2搭配使用的框架基本都是Element-ui，如何开发时每次都过去复制，需要删除一部分，增加一部分，如果碰到的是表单类型的table表格，那更麻烦。因此在符合公司应用场景下面对Element的el-table表格进行了二次封装。
el-table封装，elementtable封装，eltable封装详解(含分页）
热门推荐
一只程序猿
04-09 1万+
前言：个人理解所谓封装，就是把经常都要公用的东西，拿出来，可以多次复用。公用方法，公用页面都可以封装。 其实封装也并不是有多难，思路也很简单，就是用JS来控制页面。页面动态性越强，组件越灵活，适用范围越广。 就vue+element的组件封装而言，先把所有功能在子页面实现。然后把js里面的动态值，拿到父组件里面去传过来，就完成了，其中技术也就掌握父子组件传值而已。 1、下面就是el-table的一个简单封装： <!-- @author Zou Tiancong @version 创建时间：
vue 封装组件 （例子table组件）
假装是个web dog
04-28 6596
封装组件的步骤 　　建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。　　　　 　　准备好组件的数据输入。即分析好逻辑，定好 props 里面的数据、类型。(后面详解) 　　准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的方法。（后面详解） 　　封装完毕了，直接调用即可。 我写table组件的思路： 1.样式定义 内容间距(innerSpacing):big(16p...
对element的table组件进行了封装更方便地使用elmentui的eltable组件
08-10
对element的table组件进行了封装，更方便地使用elment ui的el-table组件
el-table封装
pleasantsheep_的博客
08-19 2044
el-table封装，el-table-column循环渲染以及自定义列
封装el-table
weixin_44968219的博客
03-28 370
封装组件 <template> <!-- 表格分页 --> <div class="table_box"> <el-table :data="tableData" style="width: 100%" :border="border" :header-cell-style="{background:'#f6f9ff'}" :cell-class-name="cellStyle"> <el-table-column type=
vue3企业级项目二次封装el-table、分页
06-28
2、项目选型：vite + ts + vue3 3、全篇采用语法糖形式 4、通过带着读者手写简化版 封装技巧，了解 核心原理。全文极简备注！在书写的过程中会摘取整体框架中的核心逻辑，简化代码实现过程，保留核心功能，例如：...
el-table，el-form在vue中封装组件化，含操作按钮和插槽.pdf
12-16
el-table，el-form在vue中封装组件化，含操作按钮和插槽
基于Vue+element-ui 的Table二次封装的实现
12-29
公司做的数据管理系统所以离不开表格了 然后表格样式统一啥的就想到封装一个element-ui 里面的table+Pagination了 效果图 表格组件的引入与使用 监测数据 v-model=tableData4 selection-change=...
el-table组件的封装
Achong999的博客
10-10 852
【代码】el-table组件的封装。
el-table的封装。
全栈科学家的博客
03-29 589
【代码】el-table的封装。
el-table表格封装(包括switch，操作栏，元素带点击事件，区分颜色显示，分页，暂无数据等)
leng0920的博客
04-24 681
el-table表格封装(包括switch，操作栏，元素带点击事件，区分颜色显示，分页，暂无数据等)
el-table组件封装
qq_42221321的博客
02-23 410
el-table封装
Vue3-Element表格组件（el-table）的简单封装
m0_54731428的博客
07-19 1405
饿了么表格组件el-table的简单封装，支持指定列自定义元素布局，待完善
封装table组件
05-26
封装Table组件可以使代码更加简洁、易读，并且可以复用。以下是一个简单的封装Table组件的示例： ``` import React from 'react'; import PropTypes from 'prop-types'; import { Table } from 'antd'; const CustomTable = ({ columns, dataSource, loading, pagination }) => { return ( <Table columns={columns} dataSource={dataSource} loading={loading} pagination={pagination} /> ); }; CustomTable.propTypes = { columns: PropTypes.array.isRequired, dataSource: PropTypes.array.isRequired, loading: PropTypes.bool.isRequired, pagination: PropTypes.object.isRequired, }; export default CustomTable; ``` 在这个示例中，我们使用了Ant Design的Table组件，并将其封装为CustomTable组件。CustomTable组件接收四个props：columns（表格列的配置描述）、dataSource（表格数据）、loading（表格是否正在加载）和pagination（分页器的配置项）。这些props都是必需的，并且我们使用PropTypes对其进行了类型检查。 使用CustomTable组件时，只需要像下面这样传入props即可： ``` import React from 'react'; import CustomTable from './CustomTable'; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Age', dataIndex: 'age', key: 'age', }, ]; const dataSource = [ { key: '1', name: 'John Brown', age: 32, }, { key: '2', name: 'Jim Green', age: 42, }, ]; const pagination = { pageSize: 10, }; const Example = () => { return ( <CustomTable columns={columns} dataSource={dataSource} loading={false} pagination={pagination} /> ); }; export default Example; ``` 以上就是一个简单的封装Table组件的示例。根据实际需求，可以在CustomTable组件中添加更多的props和配置项。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值