通過vNode實現給列表欄位打標籤
問題
如何給列表數據打標籤?類似下面這種樣子👇
思路
- 數模轉化(對介面請求回來的數據進行過濾標記,返回新的數據)
- 渲染新的數據模型
實現
1、過濾數據,需要打標籤的採用jsx
寫法
業務數據的處理我封裝在 mixins
裡面
// 存放全局的mixin, 可拆分到模組獨享
import { mapGetters } from 'vuex'
import { fetchListData } from '@/api/global/api.js'
export default {
data() {
return {
p_category: [],
listdata: [],
p_total: 0,
p_loading: false,
}
},
computed: {
// ...mapGetters(['productLevel', 'productLevelInfo']),
p_listdata() {
const data = this.listdata;
data.forEach((item) => {
// ...
// jsx 方式,打標籤
if (item.status === 2 || item.status === 3) {
item.status = <span style={{color: '#999'}}>停售</span>
} else {
item.status = item.status
}
if (item.age <= 25) {
item.age = <span class="badge_info">{item.age}</span>
}
if (item.sex === 'Man') {
item.sex = <span class="badge_default">{item.sex}</span>
}
})
return data;
}
},
methods: {
async getProductList(params = {}) {
try {
this.p_loading = true
this.listdata = []
const res = await fetchListData(params)
if (res.code === 0) {
const { data = [], total = 0 } = res || {}
if (Array.isArray(data)) {
this.listdata = [...data]
this.p_total = total
} else {
this.listdata = []
this.p_total = 0
}
} else {
this.listdata = []
this.p_total = 0
this.$message.error(res.message || '出錯了')
}
this.p_loading = false;
} catch (err) {
this.p_loading = false
this.listdata = []
this.p_total = 0
console.log(err);
}
}
}
}
base.less
定義標籤樣式
.badge_info {
color: #4760f0;
background: #1C84C6;
padding: 5px 8px;
color: #fff;
border-radius: 5px;
}
.badge_default {
color: #4760f0;
background: #4760f0;
padding: 5px 8px;
color: #fff;
border-radius: 5px;
}
2、封裝列表渲染組件
<template>
<ul class="listV2">
<li class="listV2_row-title">
<span v-for="(col, index) in fieldList" :key="index" class="listV2_cell ellipsis" :name="col.fieldName">
{{col.fieldLabel}}
</span>
</li>
<!-- 行 -->
<div v-if="tableData.length === 0" class="nodata">暫無數據</div>
<li v-for="(row, index) in tableData" :key="index" class="listV2_row pointer" @click="rowClickToDetail(row)">
<!-- 單元格-列 -->
<span v-for="(col, index) in fieldList" :key="index" class="listV2_cell ellipsis" :name="col.fieldName">
<RenderDom :vNode="row[col.fieldName] || '-'"></RenderDom>
</span>
</li>
</ul>
</template>
<script>
import RenderDom from "./renderDom";
export default {
name: 'TableList',
props: {
tableData: {
type: Array,
required: true,
},
fieldList: {
type: Array,
required: true,
},
align: {
type: String,
default: 'left',
},
},
components: {
RenderDom,
},
data() {
return {}
},
computed: {},
watch: {},
created() { },
mounted() { },
methods: {},
updated() { },
beforeDestroy() { },
}
</script>
<style lang='less' rel='stylesheet/less' scoped>
@import "./index.less";
</style>
3、封裝渲染vNode的方法
const renderDom = {
props: {
vNode: {
type: [Array, String, Object,Number],
},
},
render(h) {
// jsx - vNode 直接返回,交給框架處理(js語法帶來很多可能,列表打標籤功能)
if (typeof this.vNode === 'object') {
return this.vNode;
}
// 普通數據,直接包一層div,然後返回給頁面
return h(
'div',
{
class: 'ellipsis',
},
this.vNode
)
}
}
4、頁面組件調用
<template>
<div class="customer">
<table-list v-loading="p_loading" :tableData="p_listdata" :fieldList="fieldList"></table-list>
</div>
</template>
<script>
import TableList from '@/basecomponents/TableList/index'
import $_pMixins from "@/mixins/product.js";
import enums from './enum.js'
export default {
name: 'Customer',
props: {},
components: {
'table-list': TableList,
},
mixins: [$_pMixins],
data() {
return {
tableData: [],
fieldList: Object.freeze(enums.Enum_customerFieldList),
}
},
computed: {},
watch: {},
created() {
},
mounted() {
this.initData()
},
methods: {
initData() {
this.getProductList()
}
},
updated() { },
beforeDestroy() { },
}
</script>
<style lang='less' rel='stylesheet/less' scoped>
@import "./index.less";
</style>
效果展示
我是 甜點cc
熱愛前端,也喜歡專研各種跟本職工作關係不大的技術,技術、產品興趣廣泛且濃厚,等待著一個創業機會。主要致力於分享實用技術乾貨,希望可以給一小部分人一些微小幫助。
我排斥「新人迷茫,老人看戲」的現象,希望能和大家一起努力破局。營造一個良好的技術氛圍,為了個人、為了中國的數字化轉型、互聯網物聯網技術、數字經濟發展做一點點貢獻。數風流人物還看中國、看今朝、看你我。