Element Plus组件根据变量添加属性的问题
本帖最后由 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
完整代码：
<!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>
<!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}}
</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>
主要就是模板循环和判断当前索引的值，给fixed不同的属性 一句代码就可以搞定了，直接循环时判断索引即可
主要核心一句代码，四目表达式
```
: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: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'
},
....
]
``` jiuxuan00 发表于 2022-10-3 23:32
http://e.anyoupin.cn/ceshi/jstest/element/fix.php
这个好像 表头标题 是空白？ 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>
页:
[1]