el-table列資料超長溢位顯示
阿新 • • 發佈:2021-01-21
第一種方法
<el-table-column
prop="url"
label="label"
width='200'
:show-overflow-tooltip='true'>
</el-table-column>
第二種方法
<el-table-column label="label1" align="center" prop="prop1" > <
template slot-scope="scope"> <el-popover trigger="hover" placement="left" effect="dark" > <div v-html="scope.row.prop1" ></div> <div slot="reference" > {{ scope.row.prop1|ellipsis }} </div> </el-popover> </template> </el-table-column> filters:{ ellipsis: function (value) { if (!value) return ""; value = value.replace(/<(\S*?)[^>]*>.*?|<.*? \/>/,"") if (value.length > 10) { return value.slice(0, 10) + "..."; } return value; } }