關於iview和bootstrap-vue表格裡面td的樣式
因為列表輸出的很多東西，採用自適應屬性的話，會因為有些td裡面的文字內容過長，而佔用其他的td寬度。因此我們需要對特定的td設定相應的樣式。
比如：td內容過長，則限制輸出長度，超出顯示省略號，且滑鼠移入有文字懸浮框顯示。
iview：
theads:[
{
key: 'companyName',
title: '企業名稱',
render: (h, params) => {
let texts = '' //表格列顯示文字
if (
params.row.companyName !== null &&
params.row.companyName !== ''
) {
if (params.row.companyName.length > 8) {
//進行擷取列顯示字數
texts = params.row.companyName.substring(0, 8) + '...'
} else {
texts = params.row.companyName
}
}
return h('div', [
h(
'Tooltip',
{
props: {
placement: 'bottom'
// transfer: true //是否將彈層放置於 body 內
},
style: {
cursor: 'pointer'
}
},
[
//這個中括號表示是Tooltip標籤的子標籤
texts, //表格列顯示文字
h(
'div',
{
slot: 'content',
style: {whiteSpace: 'normal'}},
params.row.companyName //整個的資訊即氣泡內文字
)])])}},]
bootstrap-vue：
關於這兩類樣式修改，相信很多人都有寫出來。我也是參照著別人的寫法寫的，所以供大家參考，也歡迎一起討論。（前端小白求指教）
效果如下：
