Element Plus组件根据变量添加属性的问题

cqwcns · 发表于 2022-10-3 21:43

本帖最后由 cqwcns 于 2022-10-3 21:44 编辑

以下Demo，我创建了一个table，字段名循环自数组tableTitle。
我现在的需求是第一列（index为0）固定左侧（官方文档方法是添加fixed属性）、最后一列（index为10）固定再右侧（官方文档方法是添加fixed="right"属性）。
我的问题是循环渲染tableTitle时，怎样能通过index为0或10时，添加fixed属性？
应该这么写？
请大佬指教，感谢。

附官方文档地址：https://element-plus.gitee.io/zh-CN/component/table.html

完整代码：

[JavaScript] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <head>
        <!-- Import style -->
        <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
        <!-- Import Vue 3 -->
        <script src="//unpkg.com/vue@3"></script>
        <!-- Import component library -->
        <script src="//unpkg.com/element-plus"></script>
    </head>
</head>

<body>
    <div id="app" style="width: 600px;">
        <el-table :data="tableData">
            <el-table-column v-for="(title,index) in tableTitle" :prop="title" :label="title" />
            </el-table-column>

        </el-table>
    </div>
    <script>

        let that = null,
            App = {
                data() {
                    return {
                        tableTitle: ['date', 'name', 'address', 'phone', 'son', 'fd', 'md', 'wi', 'ko', 'li', 'vw'],
                        tableData: [
                            {
                                date: '2016-05-03',
                                name: 'Tom',
                                address: 'No. 189, Grove St, Los Angeles',
                                phone: '123456789',
                                son: 'slifjoewfijewoghdlsfdsf',
                                fd: 'sdoiewfpojifedisfjsdf',
                                md: 'ksuoehgfowegidjshnogsgho',
                                wi: 'lshifowheoewdsfsdfsdff',
                                ko: 'suiofwegfihosfhpsfeewewggewe',
                                li: 'kuhofefwhoehfowehfioehfewf',
                                vw: 'joidhsfoweshfoefhdfsfsdfeef'
                            },
                            {
                                date: '2016-05-02',
                                name: 'Tom',
                                address: 'No. 189, Grove St, Los Angeles',
                                phone: '123456789',
                                son: 'slifjoewfijewoghdlsfdsf',
                                fd: 'sdoiewfpojifedisfjsdf',
                                md: 'ksuoehgfowegidjshnogsgho',
                                wi: 'lshifowheoewdsfsdfsdff',
                                ko: 'suiofwegfihosfhpsfeewewggewe',
                                li: 'kuhofefwhoehfowehfioehfewf',
                                vw: 'joidhsfoweshfoefhdfsfsdfeef'
                            },
                            {
                                date: '2016-05-04',
                                name: 'Tom',
                                address: 'No. 189, Grove St, Los Angeles',
                                phone: '123456789',
                                son: 'slifjoewfijewoghdlsfdsf',
                                fd: 'sdoiewfpojifedisfjsdf',
                                md: 'ksuoehgfowegidjshnogsgho',
                                wi: 'lshifowheoewdsfsdfsdff',
                                ko: 'suiofwegfihosfhpsfeewewggewe',
                                li: 'kuhofefwhoehfowehfioehfewf',
                                vw: 'joidhsfoweshfoefhdfsfsdfeef'
                            },
                            {
                                date: '2016-05-01',
                                name: 'Tom',
                                address: 'No. 189, Grove St, Los Angeles',
                                phone: '123456789',
                                son: 'slifjoewfijewoghdlsfdsf',
                                fd: 'sdoiewfpojifedisfjsdf',
                                md: 'ksuoehgfowegidjshnogsgho',
                                wi: 'lshifowheoewdsfsdfsdff',
                                ko: 'suiofwegfihosfhpsfeewewggewe',
                                li: 'kuhofefwhoehfowehfioehfewf',
                                vw: 'joidhsfoweshfoefhdfsfsdfeef'
                            },
                        ]
                    }
                }
            }
        const app = Vue.createApp(App);
        app.use(ElementPlus);
        app.mount("#app");
    </script>
</body>

</html>

jiuxuan00 · 发表于 2022-10-3 23:32

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>

		<head>
			<!-- Import style -->
			<link
				rel="stylesheet"
				
			/>
			<!-- Import Vue 3 -->
			<script src="https://unpkg.com/vue@3.2.40/dist/vue.global.js"></script>
			<!-- Import component library -->
			<script src="https://unpkg.com/element-plus@2.2.17/dist/index.full.js"></script>
		</head>
	</head>

	<body>
		<div id="app" style="width: 600px">
			<el-table :data="tableData">
				<template
					v-for="(title,index) in tableTitle"
					:fixed="index==0?'left':false"
					:prop="title"
					:label="title"
				>
					<el-table-column :fixed="handleFixed(index)">
						<template #default="scope">
							{{scope.row[title]}}
						</template>
					</el-table-column>
				</template>
			</el-table>
		</div>
		<script>
			let that = null,
				App = {
					data() {
						return {
							tableTitle: [
								'date',
								'name',
								'address',
								'phone',
								'son',
								'fd',
								'md',
								'wi',
								'ko',
								'li',
								'vw',
							],
							tableData: [
								{
									date: '2016-05-03',
									name: 'Tom',
									address: 'No. 189, Grove St, Los Angeles',
									phone: '123456789',
									son: 'slifjoewfijewoghdlsfdsf',
									fd: 'sdoiewfpojifedisfjsdf',
									md: 'ksuoehgfowegidjshnogsgho',
									wi: 'lshifowheoewdsfsdfsdff',
									ko: 'suiofwegfihosfhpsfeewewggewe',
									li: 'kuhofefwhoehfowehfioehfewf',
									vw: 'joidhsfoweshfoefhdfsfsdfeef',
								},
								{
									date: '2016-05-02',
									name: 'Tom',
									address: 'No. 189, Grove St, Los Angeles',
									phone: '123456789',
									son: 'slifjoewfijewoghdlsfdsf',
									fd: 'sdoiewfpojifedisfjsdf',
									md: 'ksuoehgfowegidjshnogsgho',
									wi: 'lshifowheoewdsfsdfsdff',
									ko: 'suiofwegfihosfhpsfeewewggewe',
									li: 'kuhofefwhoehfowehfioehfewf',
									vw: 'joidhsfoweshfoefhdfsfsdfeef',
								},
								{
									date: '2016-05-04',
									name: 'Tom',
									address: 'No. 189, Grove St, Los Angeles',
									phone: '123456789',
									son: 'slifjoewfijewoghdlsfdsf',
									fd: 'sdoiewfpojifedisfjsdf',
									md: 'ksuoehgfowegidjshnogsgho',
									wi: 'lshifowheoewdsfsdfsdff',
									ko: 'suiofwegfihosfhpsfeewewggewe',
									li: 'kuhofefwhoehfowehfioehfewf',
									vw: 'joidhsfoweshfoefhdfsfsdfeef',
								},
								{
									date: '2016-05-01',
									name: 'Tom',
									address: 'No. 189, Grove St, Los Angeles',
									phone: '123456789',
									son: 'slifjoewfijewoghdlsfdsf',
									fd: 'sdoiewfpojifedisfjsdf',
									md: 'ksuoehgfowegidjshnogsgho',
									wi: 'lshifowheoewdsfsdfsdff',
									ko: 'suiofwegfihosfhpsfeewewggewe',
									li: 'kuhofefwhoehfowehfioehfewf',
									vw: 'joidhsfoweshfoefhdfsfsdfeef',
								},
							],
						}
					},
					methods: {
						handleFixed(index) {
							if (index == 0) {
								return true
							} else if (index === this.tableData.length - 1) {
								return 'right'
							} else {
								return false
							}
						},
					},
				}
			const app = Vue.createApp(App)
			app.use(ElementPlus)
			app.mount('#app')
		</script>
	</body>
</html>

jiuxuan00 · 发表于 2022-10-3 23:33

主要就是模板循环和判断当前索引的值，给fixed不同的属性

Takitooru · 发表于 2022-10-4 00:06

一句代码就可以搞定了，直接循环时判断索引即可

主要核心一句代码，四目表达式

:fixed="index===0?'left':(index===10?'right':false)"

<el-table-column v-for="(title,index) in tableTitle" :fixed="index===0?'left':(index===10?'right':false)" :prop="title" :label="title" />
</el-table-column>

森岛帆高 · 发表于 2022-10-4 02:18

本帖最后由森岛帆高于 2022-10-4 02:23 编辑

一般真实项目中还会进行二次封装啥的，基本是写到一个数组里遍历

template:
<el-table-column v-for="(item,index) in tableFields" :fixed="item.fixed" :prop="item.title" />
</el-table-column>
data:
tableFields:[
   {
     fixed:'left',
     title:'标题1'
   },{
     title:'标题2'
   },
....
]

zpy2 · 发表于 2022-10-4 06:35

jiuxuan00 发表于 2022-10-3 23:32
[mw_shl_code=html,true]

http://e.anyoupin.cn/ceshi/jstest/element/fix.php

这个好像表头标题是空白？

jiuxuan00 · 发表于 2022-10-4 14:42

zpy2 发表于 2022-10-4 06:35
http://e.anyoupin.cn/ceshi/jstest/element/fix.php

这个好像表头标题是空白？

不好意思啊，循环的时候把el-table-column上的属性弄到template上面了
<el-table-column
:prop="title"
:label="title"
:fixed="handleFixed(index)"
>
。。。。。
</el-table-column>
</template>

帐号		自动登录	找回密码
密码			注册[Register]

[求助] Element Plus组件根据变量添加属性的问题

免费评分

免费评分

免费评分

免费评分

免费评分

个人中心