element的el-table-column循环渲染和自定义列

最新推荐文章于 2024-10-21 08:00:00 发布

置顶

xw_1230

最新推荐文章于 2024-10-21 08:00:00 发布

阅读量1.8w

点赞数 10

分类专栏：技术文档文章标签： vue.js

本文链接：https://blog.csdn.net/qq_39842256/article/details/104349015

版权

本文介绍了在Vue.js中使用Element UI时，如何利用el-table-column进行循环渲染以及如何自定义列展示。通过示例代码展示了组件的用法，并预告将探讨如何动态控制表格列的显示与隐藏。

摘要由CSDN通过智能技术生成

直接上代码了

// 自定义组件
<template>
	<div class="x__table>
		<el-table
			v-loading="tableLoading"
			:data="tableData"
			border
			stripe>
			<el-table-column
				v-if="index"
		        type="index"
		        label="序号"
		        align="center"
		        width="50">
				<template slot-scope="scope">
					<span>{
   {
    scope.$index + (page.current - 1) * page.size + 1 }}</span>
				</template>
			</el-table-column>
			<template v-for="(item, index) in tableOption">
		    	<el-table-column
		        	:key="index"
					:prop="item.prop"
					:label="item.label"
					:align="item.align || 'center'"
					:show-overflow-tooltip="item.overHidden || true">
					<template slot-scope="scope">
						// 这里通过插槽实现自定义列
			            <slot
			            	v-if="item.slot"
			            	:name="scope.column.property"
			            	:row="scope.row"
			            	:$index="scope.$index"