Here是这样的 jsfiddle 示例:
HTML
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.9.1/lib/index.js"></script>
<div id="app">
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="Date"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="Name"
width="180">
<el-badge :value="10" class="item" >
<el-button size="mini">Comments</el-button>
</el-badge>
</el-table-column>
<el-table-column
prop="address"
label="Address">
</el-table-column>
</el-table>
</template>
</div>
CSS
@import url("//unpkg.com/element-ui@2.9.1/lib/theme-chalk/index.css");
JS
var Main = {
data() {
return {
tableData: [{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}]
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
每个徽章都按行线切割。有没有办法让它们位于行表之上?
我尝试设置 .el-badge__content.is-fixed {z-index: 100}
但这没有帮助:(
最佳答案
将 overflow: visible;
添加到您的 .el-table .cell
类
关于javascript - 如何在vue中制作 table 前的徽章?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56688843/