子合同信息
<template>
<div class="x-contract-list">
<block title="子合同信息">
<table class="_table">
<thead>
<th>房源名称</th>
<th>状态</th>
<th>入住人</th>
<th>操作</th>
</thead>
<tbody>
<tr v-for="(row, key) in data" :key="key">
<td>北软人才公寓 301</td>
<td>
<span class="_ind"></span>出租中
</td>
<td>周茜茜</td>
<td>
<el-dropdown @command="cmd => handleCommand(cmd, key, row)">
<el-button type="default">
操作
<i class="el-icon-caret-bottom el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="a">详情</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</td>
</tr>
</tbody>
</table>
</block>
</div>
</template>
<script>
import Pair from '../components/Pair'
import mixins from '@/mixins/components'
export default {
props: {
data: {
type: Array,
required: true,
},
},
components: {
Pair,
},
mixins: [mixins],
inject: ['root'],
data() {
return {}
},
methods: {
handleCommand(command, key, row) {
if (command === 'a') {
// this.$message('click on item ' + command)
this.root.$emit('open-contract', key, row)
}
},
},
}
</script>
<style lang="scss">
.x-contract-list {
$cellHeight: 3.2em;
._table {
width: 100%;
border-collapse: collapse;
thead {
border-bottom: 1px solid #e0e0e0;
}
th {
color: #333333;
font-size: 14px;
text-align: left;
font-weight: 500;
height: $cellHeight;
vertical-align: middle;
}
tbody {
font-size: 14px;
color: #666666;
}
tr {
border-bottom: 1px solid #e0e0e0;
}
td {
height: $cellHeight;
vertical-align: middle;
}
}
._ind {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #3cbfc4;
margin-right: 8px;
&._ind--orange {
color: #fbb13f;
}
&._ind--red {
color: #e52d2d;
}
}
}
</style>
1
liyang5945 2019-07-16 15:33:56 +08:00
js 还行,下面的 css 不推荐直接使用标签选择器,class 命名也不太规范
|
2
wisetc OP @liyang5945 感谢评价,格式化是 prettier 化的,模板部分是用 prettyhtml 😏
|