基于elementUI豎向表格、和并列的案例
更新時間：2020年10月26日 11:48:09 作者：小李是個前端菜鳥
這篇文章主要介紹了基于elementUI豎向表格、和并列的案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
效果圖如下
代碼
<template>
<div>
<section>
<el-table
:show-header="false"
:data="tableData"
:span-method="objectSpanMethod"
border
:cell-style="columnStyle"
style="width: 100%; margin-top: 20px"
>
<el-table-column prop="id" label="ID" width="240">
<template slot-scope="scope">
<div>
<img :src="scope.row.id|setPicUrl" />
</div>
</template>
</el-table-column>
<el-table-column width="180" prop="name"></el-table-column>
<el-table-column prop="amount1"></el-table-column>
<el-table-column width="180" prop="amount2"></el-table-column>
<el-table-column prop="amount3"></el-table-column>
</el-table>
</section>
</div>
</template>
<script>
export default {
name: "mallMember-detail",
data() {
return {
//請求回來的數(shù)據(jù)
dataForm: {},
};
},
computed: {
//因?yàn)閿?shù)據(jù)用到了dataform中的數(shù)據(jù)，所以寫在了computed中
tableData() {
return [
{
id: this.dataForm.headImg,
name: "用戶ID",
amount1: this.dataForm.id,
amount2: "注冊時間",
amount3: this.dataForm.createDate
},
{
id: this.dataForm.headImg,
name: "微信昵稱",
amount1: this.dataForm.nickName,
amount2: "手機(jī)號碼",
amount3: this.dataForm.phone
},
{
id: this.dataForm.headImg,
name: "會員名稱",
amount1: this.dataForm.gradeName,
amount2: "會員等級",
amount3: this.dataForm.gradeCode
},
{
id: this.dataForm.headImg,
name: "用戶來源",
amount1: this.dataForm.channel,
amount2: "常住地",
amount3:
this.dataForm.provinceName +
this.dataForm.cityName +
this.dataForm.districtName
}
];
}
},
methods: {
// 自定義列背景色
columnStyle({ row, column, rowIndex, columnIndex }) {
if (columnIndex == 0 || columnIndex == 1 || columnIndex == 3) {
//第三第四列的背景色就改變了2和3都是列數(shù)的下標(biāo)
return "background:#f3f6fc;";
}else{
return "background:#ffffff;";
}
},
// 和并列
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex % 4 === 0) {
return {
rowspan: 4,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
},
}
};
</script>
補(bǔ)充知識：基于Vue element-ui實(shí)現(xiàn)支持多級縱向動態(tài)表頭的仿表格布局
需求圖示如下，多級縱向動態(tài)表頭表格：
我的思路是用element-ui的layout實(shí)現(xiàn)，做出一個仿造表格，能夠支持動態(tài)的、多級的、縱向的表頭：
<template>
<div>
<!--按設(shè)備系統(tǒng)統(tǒng)計(jì)-->
<div style="text-align:left">
<h1>{{tableName}}</h1>
</div>
<!--縱向表格設(shè)計(jì)-->
<el-row>
<!--縱向表頭設(shè)計(jì)-->
<el-col :span="6">
<el-row>
<div :style="projectDivStyle">
<p>項(xiàng)目名</p>
</div>
</el-row>
<el-row v-if="ifAndroid">
<el-col :span="12">
<div :style="wordOfMouthAndroidDivStyle">
<p>Android口碑指數(shù)</p>
</div>
</el-col>
<el-col :span="12">
<el-row v-for="(chl, i) in tableData.ratingChls"
:key="i">
<div :style="ratingSubDivStyle">
<p>{{chl}}</p>
</div>
</el-row>
</el-col>
</el-row>
<el-row v-else>
<div :style="wordOfMouthIOSDivStyle">
<p>AppStore口碑指數(shù)</p>
</div>
</el-row>
<el-row>
<el-col :span="12">
<div :style="ratingDivStyle">
<p>評分</p>
</div>
</el-col>
<el-col :span="12">
<el-row v-for="(chl, i) in tableData.ratingChls"
:key="i">
<div :style="ratingSubDivStyle">
<p>{{chl}}</p>
</div>
</el-row>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div :style="rankDivStyle">
<p>排名</p>
</div>
</el-col>
<el-col :span="12">
<el-row v-for="(chl,i) in tableData.rankChls"
:key="i">
<div :style="rankSubDivStyle">
<p>{{chl}}</p>
</div>
</el-row>
</el-col>
</el-row>
<el-row>
<div :style="topModuleDivStyle">
<p>TOP3好評關(guān)鍵詞</p>
</div>
</el-row>
<el-row>
<div :style="topModuleDivStyle">
<p>TOP3差評關(guān)鍵詞</p>
</div>
</el-row>
</el-col>
<!--縱列數(shù)據(jù)遍歷-->
<el-col :span="colSpan"
v-for="(col,i) in tableData.cols"
:key="i">
<!--項(xiàng)目名數(shù)據(jù)-->
<el-row>
<div :style="projectDivStyle">
<p>{{col.name}}</p>
</div>
</el-row>
<!--口碑?dāng)?shù)據(jù) 區(qū)分Android和iOS視圖顯示邏輯-->
<el-row v-if="ifAndroid">
<el-col :span="24">
<el-row v-for="(each, i) in col.wordOfMouth"
:key="i">
<div :style="ratingSubDivStyle">
<p>
{{each}}
</p>
</div>
</el-row>
</el-col>
</el-row>
<el-row v-else>
<div :style="wordOfMouthIOSDivStyle">
<p>{{col.wordOfMouth[0]}}</p>
</div>
</el-row>
<!--評分?jǐn)?shù)據(jù)-->
<el-row>
<el-col :span="24">
<el-row v-for="(each, i) in col.ratingInfo"
:key="i">
<div :style="ratingSubDivStyle">
<p>
{{each.info}}
</p>
<el-rate :value='Number(each.rating)'
disabled
show-score
text-color="#ff9900"
score-template="{value}">
</el-rate>
</div>
</el-row>
</el-col>
</el-row>
<!--排名數(shù)據(jù)-->
<el-row>
<el-col :span="24">
<el-row v-for="(each,i) in col.rankInfo"
:key="i">
<div :style="rankSubDivStyle">
<p>{{each.rank}} {{each.info}}</p>
</div>
</el-row>
</el-col>
</el-row>
<el-row>
<div :style="topModuleDivStyle">
<p v-for="(_module,i) in modules(col.topGoodModule)"
:key="i">
{{_module}}
</p>
</div>
</el-row>
<el-row>
<div :style="topModuleDivStyle">
<p v-for="(_module,i) in modules(col.topBadModule)"
:key="i">
{{_module}}
</p>
</div>
</el-row>
</el-col>
</el-row>
</div>
</template>
<style scoped>
/*
通過布局el-row來完成表格邊界樣式替代式設(shè)計(jì)
*/
.el-row {
margin-bottom: 0px; /*去除el-row之間的間距*/
border: 1px solid #e6e6e6;
margin: -1px -1px -1px -1px; /*解決相鄰邊框重疊問題就靠這行代碼*/
&:last-child {
margin-bottom: 0px;
}
}
.bg-purple {
}
.bg-purple-light {
background: #121927;
}
.grid-content {
border: 0px solid rgb(0, 0, 0);
min-height: 50px;
}
.grid-content-sub {
border: 0px solid rgb(0, 0, 0);
padding: 20px;
}
.grid-content-large {
border: 0px solid rgb(0, 0, 0);
padding: 70px;
height: 60px;
}
.grid-content-large-sub {
border: 0px solid rgb(0, 0, 0);
padding: 20px;
height: 57.5px;
}
</style>
<script>
import { getFeedbackCompetitorData } from '@/api/feedbacks'
import { EventBus } from '@/bus.js'
export default {
data () {
return {
myProjectId: this.$route.query.feedbackProject,
largeDivHeight: 120,
smallDivHeight: 80,
miniDivHeight: 50,
ratingSubDivHeight: 80,
rankSubDivHeight: 80,
tableName: '',
tableData: [],
shadowCss: 'border-radius: 15px;box-shadow: 5px 5px 2px #888888',
borderStyle: ''
}
},
methods: {
getFbCompetitorData () {
getFeedbackCompetitorData(this.myProjectId).then(fbCpInfo => {
this.tableName = fbCpInfo.competitorTable.tableName
this.tableData = fbCpInfo.competitorTable.tableData
})
},
modules (someArray) {
var newArray = []
for (var i = 0; i < someArray.length; i++) {
var count = someArray[i]['cou']
var word = someArray[i]['word']
newArray.push(word + ':' + count)
}
return newArray
}
},
computed: {
ifAndroid: function () {
if (this.tableData.wordOfMouthChls[0] === 'AppStore') {
return false
} else {
return true
}
},
colSpan: function () {
var count = this.tableData.cols.length
if (count > 5) {
return 18 / count
} else if (count < 4) {
return 6
}
},
commonDivStyle: function () {
var height = this.smallDivHeight
return `padding: 20px;height: ${height}px`
},
projectDivStyle: function () {
var height = this.miniDivHeight
return `background: #E8F8F5;padding: 20px;height: ${height}px`
},
wordOfMouthAndroidDivStyle: function () {
var height = this.miniDivHeight
return `margin-top:50%;padding: 20px;height: ${height}px`
},
wordOfMouthIOSDivStyle: function () {
var height = this.miniDivHeight
return `padding: 20px;height: ${height}px`
},
topModuleDivStyle: function () {
var height = this.largeDivHeight
return `padding: 20px;height: ${height}px`
},
ratingDivStyle: function () {
var height = this.ratingSubDivHeight
// 區(qū)分Android和iOS樣式
if (this.ifAndroid) {
var margin = 'margin-top:50%'
}
return `${margin};padding: 20px;height: ${height}px`
},
ratingSubDivStyle: function () {
var height = this.ratingSubDivHeight
return `padding: 20px;height: ${height}px`
},
rankDivStyle: function () {
var height = this.rankSubDivHeight
return `margin-top:30%;padding: 20px;height: ${height}px`
},
rankSubDivStyle: function () {
var height = this.rankSubDivHeight
return `padding: 20px;height: ${height}px`
}
},
created () {
let _this = this
EventBus.$on('projectId', projectId => {
_this.myProjectId = projectId
})
},
mounted () {
this.getFbCompetitorData()
},
watch: {
myProjectId: {
immediate: false,
handler: function (val) {
this.getFbCompetitorData()
}
}
}
}
</script>
實(shí)現(xiàn)圖如下
以上這篇基于elementUI豎向表格、和并列的案例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue框架TypeScript裝飾器使用指南小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
Nuxt3?使用?Vue.js?作為視圖引擎，Nuxt3?中提供了所有?Vue?3?功能，所以我們創(chuàng)建的Nuxt項(xiàng)目其實(shí)也是vue3項(xiàng)目，這篇文章主要介紹了Nuxt3重點(diǎn)特性使用舉例記錄,需要的朋友可以參考下2022-12-12
vue2中使用echarts實(shí)現(xiàn)中國地圖、在中國地圖上標(biāo)注坐標(biāo)散點(diǎn)圖的操作代碼
這篇文章主要介紹了vue2中使用echarts實(shí)現(xiàn)中國地圖、在中國地圖上標(biāo)注坐標(biāo)散點(diǎn)圖,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
vue+webrtc(騰訊云) 實(shí)現(xiàn)直播功能的實(shí)踐
本文主要介紹了vue+webrtc(騰訊云) 實(shí)現(xiàn)直播功能的實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了淺談Vue SSR中的Bundle的具有使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
在vue項(xiàng)目中開發(fā)環(huán)境的樣式?jīng)]問題,但是打包上線后,樣式不生效,下面這篇文章主要給大家介紹了關(guān)于Vue打包上線之后部分CSS不生效問題的解決辦法,需要的朋友可以參考下2022-12-12
vue通過elementUI組件實(shí)現(xiàn)圖片預(yù)覽效果
我們在開發(fā)中經(jīng)常會遇到通過點(diǎn)擊某個按鈕或者文字實(shí)現(xiàn)圖片的預(yù)覽功能,這里我們分別介紹vue2和vue3里面如何實(shí)現(xiàn)圖片預(yù)覽方法,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue 手機(jī)物理監(jiān)聽鍵+退出提示代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了vite如何支持cjs方案示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Vue數(shù)據(jù)驅(qū)動模擬實(shí)現(xiàn)1
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動模擬實(shí)現(xiàn)的相關(guān)資料，允許采用簡潔的模板語法聲明式的將數(shù)據(jù)渲染進(jìn)DOM，且數(shù)據(jù)與DOM綁定在一起，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01