feat:表格添加加粗和斜体

src/views/components/Custom.vue

@@ -143,7 +143,37 @@
             @change="changeStyles('fontSize')"
             :allowInputOverLimit="false"
             :decimalPlaces="2"
+            width="50%"
           />
+          <t-button
+            :class="{ active: cell.fontWeight === 'bold' }"
+            class="ml-8 icon"
+            shape="rectangle"
+            variant="text"
+            @click="
+              cell.fontWeight === 'bold'
+                ? (cell.fontWeight = 'normal')
+                : (cell.fontWeight = 'bold');
+                changeStyles('fontWeight');
+            "
+          >
+            B
+          </t-button>
+
+          <t-button
+            :class="{ active: cell.fontStyle === 'italic' }"
+            class="ml-4 icon"
+            shape="rectangle"
+            variant="text"
+            @click="
+              cell.fontStyle === 'italic'
+                ? (cell.fontStyle = 'normal')
+                : (cell.fontStyle = 'italic');
+                changeStyles('fontStyle');
+            "
+            style="font-style: italic; font-family: serif"
+            >I</t-button
+          >
         </div>
       </t-space>
     </div>
@@ -271,6 +301,8 @@ const cell = ref({
   background: undefined,
   textColor: undefined,
   fontSize: undefined,
+  fontWeight: undefined,
+  fontStyle: undefined,
 });
 
 const getPenData = (data: any) => {
@@ -288,10 +320,14 @@ const getPenData = (data: any) => {
         cell.value.background = props.pen.styles[found].background;
         cell.value.textColor = props.pen.styles[found].textColor;
         cell.value.fontSize = props.pen.styles[found].fontSize;
+        cell.value.fontWeight = props.pen.styles[found].fontWeight;
+        cell.value.fontStyle = props.pen.styles[found].fontStyle;
       } else {
         cell.value.background = undefined;
         cell.value.textColor = undefined;
         cell.value.fontSize = undefined;
+        cell.value.fontWeight = undefined;
+        cell.value.fontStyle = undefined;
       }
     } else if (props.pen.calculative.activeRow !== undefined) {
       cell.value.col = undefined;
@@ -304,10 +340,14 @@ const getPenData = (data: any) => {
         cell.value.background = props.pen.styles[found].background;
         cell.value.textColor = props.pen.styles[found].textColor;
         cell.value.fontSize = props.pen.styles[found].fontSize;
+        cell.value.fontWeight = props.pen.styles[found].fontWeight;
+        cell.value.fontStyle = props.pen.styles[found].fontStyle;
       } else {
         cell.value.background = undefined;
         cell.value.textColor = undefined;
         cell.value.fontSize = undefined;
+        cell.value.fontWeight = undefined;
+        cell.value.fontStyle = undefined;
       }
     } else if (props.pen.calculative.activeCell) {
       cell.value.col = props.pen.calculative.activeCell.col;
@@ -319,10 +359,14 @@ const getPenData = (data: any) => {
         cell.value.background = props.pen.styles[found].background;
         cell.value.textColor = props.pen.styles[found].textColor;
         cell.value.fontSize = props.pen.styles[found].fontSize;
+        cell.value.fontWeight = props.pen.styles[found].fontWeight;
+        cell.value.fontStyle = props.pen.styles[found].fontStyle;
       } else {
         cell.value.background = undefined;
         cell.value.textColor = undefined;
         cell.value.fontSize = undefined;
+        cell.value.fontWeight = undefined;
+        cell.value.fontStyle = undefined;
       }
     } else {
       cell.value.col = undefined;
@@ -330,6 +374,8 @@ const getPenData = (data: any) => {
       cell.value.background = undefined;
       cell.value.textColor = undefined;
       cell.value.fontSize = undefined;
+      cell.value.fontWeight = undefined;
+      cell.value.fontStyle = undefined;
     }
   }
 };
@@ -370,4 +416,7 @@ onUnmounted(() => {
   padding-top: 16px;
   padding-bottom: 8px;
 }
+.form-item .t-input-number {
+  width: 45%;
+}
 </style>