在线打印
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
 
 
 

83 行
1.9 KiB

  1. <template>
  2. <div
  3. class="widgets"
  4. :style="{
  5. left: val.left + 'px' ,
  6. top: val.top + 'px',
  7. width: val.width + 'px',
  8. height: val.height + 'px',
  9. textAlign: val.style.Alignment,
  10. fontSize: val.style.FontSize + 'pt',
  11. color: val.style.FontColor,
  12. }"
  13. style="position:absolute;overflow:hidden"
  14. >
  15. <table
  16. border="1"
  17. width="100%"
  18. cellspacing="0"
  19. cellpadding="2"
  20. style="border-collapse:collapse;font-size:12px;"
  21. bordercolor="#000000"
  22. >
  23. <tr>
  24. <th
  25. v-for="item in columns"
  26. :key="item.name"
  27. :width="item.name==='_seq'?40:''"
  28. >{{item.title}}</th>
  29. </tr>
  30. <tr>
  31. <td v-for="item in columns" :key="item.name">{{item.value}}</td>
  32. </tr>
  33. </table>
  34. </div>
  35. </template>
  36. <script>
  37. const WIDGET_NAME = 'braid-table'
  38. export default {
  39. name: WIDGET_NAME,
  40. setting: {
  41. type: WIDGET_NAME,
  42. isEdit: false, // 是否可编辑
  43. dragable: true, // 是否可拖拽
  44. resizable: true, // 尺寸是否可变
  45. width: 240,
  46. height: 60,
  47. left: 50,
  48. top: 10,
  49. title: '表格',
  50. value: [],
  51. defaultValue: [],
  52. tabelHtml: '',
  53. columnsAttr: [], // 表格列选项
  54. columns: [], // 已选表格列表
  55. selectCol: [], // 已选表格列name数组(用于多选框双向绑定)
  56. name: '',
  57. style: {
  58. zIndex: 0,
  59. Alignment: 'left', // 对齐方式 1--左靠齐 2--居中 3--右靠齐
  60. FontSize: 9,
  61. FontColor: '#000000',
  62. BorderColor: '#000000',
  63. AutoHeight: false, // 高度自动(模板在该元素位置以下的元素都关联打印)
  64. BottomMargin: 0, // 距离下边距
  65. },
  66. },
  67. props: [
  68. 'val', // 文本对象
  69. ],
  70. computed: {
  71. // 去掉type='row'的数据
  72. columns() {
  73. let col = this.val.columns || []
  74. return col
  75. },
  76. },
  77. methods: {},
  78. }
  79. </script>