1.单选框的展示
<span style="font-family: 'Wingdings';font-size: 12pt;">
{{ items.cellValue == i ? "¤" : "¡" }}
</span>
2.多选框的展示
<span style=" font-family: 宋体">
{{items.selRadio.includes(index) ? "☑" : "□"}}
</span>
3.一行多段:需要对数据经行处理,一行展示的用p标签,一行展示多段的需要放在一起生成数组用table标签来展示
<table style="
border-color: #fff;
border-collapse: collapse;
font-family: Arial, SourceHanSansCN, Microsoft YaHei;
color: #303133;
"
width="100%"
border="0"
>
<tbody>
<tr style="border-style: hidden; border-color: #fff">
<td
:style="handleWidth(items, idx)"
v-for="(items, idxs) in item"
:key="idxs"
>
</td>
</tr>
</tbody>
</table>
handleWidth(item) {
let textAlign = "";
switch (item.cellSort) {
case "start":
textAlign = "left";
break;
case "end":
textAlign = "right";
break;
case "center":
textAlign = "center";
break;
}
return {
width: item.cellProportion + "%",
"text-align": textAlign,
"border-style": "hidden",
"border-color": "#fff",
padding: "0 0 14pt 0",
};
},
4.一段文字用p标签,但是word中的p标签的上边距会和上一个的下边距重合 写成下方的样式才生效,word中p标签的上下间距使用margin表示的
margin-top:14.0000pt; //根据展示效果来控制上间距是0还是14.0000
margin-botton:14.0000pt;