封装table
<template>
<div class="table-main">
<div class="header">
<div v-for="(value, key) in tableHeader">{{ value }}</div>
</div>
<ul>
<li v-for="item in tableData">
<div v-for="(val, key) in tableHeader">
<div v-for="(v, k) in item" v-if="key == k" :title="item[k]">
{{ item[k] | isEmptyStr }}
</div>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
tableHeader: {
type: Object,
default: () => {
return {};
},
},
tableData: {
type: Array,
default: () => {
return [];
},
},
},
data() {
return {};
},
created() {},
filters: {
isEmptyStr(str) {
if (str) return str;
return "-";
},
},
};
</script>
<style lang="scss" scoped>
.table-main {
width: 100%;
.header {
height: 40px;
line-height: 40px;
background: #e8f2fc;
display: flex;
div {
flex: 1;
font-size: 12px;
font-weight: bold;
}
}
ul {
li {
display: flex;
height: 36px;
line-height: 36px;
div {
flex: 1;
padding: 0 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
}
> div:last-child {
color: #f29658;
}
}
li:first-child > div:last-child,
li:nth-child(2) > div:last-child,
li:nth-child(3) > div:last-child {
color: #f51212;
}
li:nth-child(even) {
background: #eef7fc;
}
}
}
</style>
引入：
<tableList class="t" :tableHeader="sysHeader"></tableList>
import TableList from "@/components/tools/TableList.vue";
components: { TableList },
