[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>
[复制链接]
发表于 2022-10-3 21:43
