el-tabs label 加删除线

el-tabs是Element UI中的一个组件，用于创建标签页。而el-tabs的label属性是用来设置标签页的标题的。

要给el-tabs的label添加删除线，可以通过自定义样式来实现。可以使用CSS的text-decoration属性来添加删除线样式。

例如，可以在el-tabs的label上添加一个class，然后在CSS中设置该class的样式为text-decoration: line-through;，即可实现删除线效果。

示例代码如下：

HTML:

<el-tabs>
  <el-tab-pane label="标签1" class="deleted-label">
    内容1
  </el-tab-pane>
  <el-tab-pane label="标签2">
    内容2
  </el-tab-pane>
</el-tabs>

CSS:

.deleted-label {
  text-decoration: line-through;
}

这样，标签1的标题就会有删除线效果。

相关问题

<el-tabs v-if="orderInvoiceData.length" class='invoice_list' v-model="currentOrderTab" @tab-click="clickOrderTab"> <el-tab-pane :label="numToStr(order.order_info.order_no)" :name="numToStr(order.order_info.order_no)" :key="order.order_info.order_no" v-for="order in orderInvoiceData"> <el-tabs v-if="!order.order_info.is_error" tab-position="left" style="height:calc(100% - 96px);" v-model="currentInvoiceTab"> <el-tab-pane :label="invoice.invoice_info.label" :key="invoice.invoice_info.label" :name="invoice.invoice_info.name" v-for='(invoice, index) in order.invoiceList'> </el-tab-pane> </el-tabs> </el-tab-pane> </el-tabs> 如何点击第一个el-tabs时，触发第二个el-tabs

可以通过在第一个 `el-tabs` 的 `tab-click` 事件中，根据当前选中的订单信息来动态修改第二个 `el-tabs` 的 `v-model` 值，从而触发选中对应的标签页。具体实现代码如下：

<el-tabs v-if="orderInvoiceData.length" class='invoice_list' v-model="currentOrderTab" @tab-click="clickOrderTab">
  <el-tab-pane :label="numToStr(order.order_info.order_no)" :name="numToStr(order.order_info.order_no)"
               :key="order.order_info.order_no" v-for="order in orderInvoiceData">
    <el-tabs v-if="!order.order_info.is_error" tab-position="left" style="height:calc(100% - 96px);"
             v-model="currentInvoiceTab[index]">
      <el-tab-pane :label="invoice.invoice_info.label" :key="invoice.invoice_info.label"
                   :name="invoice.invoice_info.name" v-for='(invoice, index) in order.invoiceList'>
      </el-tab-pane>
    </el-tabs>
  </el-tab-pane>
</el-tabs>

data() {
  return {
    currentOrderTab: '', // 第一个 el-tabs 的 v-model
    currentInvoiceTab: [] // 第二个 el-tabs 的 v-model 数组，每个元素对应一个订单的标签页选中状态
  }
},
methods: {
  clickOrderTab(tab) {
    // 获取当前选中的订单信息
    const order = this.orderInvoiceData.find(item => item.order_info.order_no === Number(tab.name));
    if (order && !order.order_info.is_error) {
      // 根据当前订单信息修改第二个 el-tabs 的选中状态
      this.currentInvoiceTab.splice(this.orderInvoiceData.indexOf(order), 1, order.invoiceList[0].invoice_info.name);
    }
  }
}

这段代码中，我们在 `data` 中新增了一个数组 `currentInvoiceTab`，用来存储每个订单对应的第二个 `el-tabs` 的选中状态。然后在点击第一个 `el-tabs` 的 `tab-click` 事件中，将当前选中的订单信息找出来，根据订单信息修改相应的 `currentInvoiceTab` 的元素值，从而触发第二个 `el-tabs` 的选中状态改变，达到自动切换到对应的标签页的效果。

el-tabs el-tabs__header 和 el-button 在同一行展示

要将`el-tabs`、`el-tabs__header`和`el-button`在同一行展示，可以使用Flex布局来实现。可以将`el-tabs`和`el-button`放在一个父容器中，并设置父容器的`display`属性为`flex`，然后通过设置`flex`属性来控制它们的布局。

以下是一个示例代码：

<div style="display: flex; align-items: center;">
  <el-tabs type="border-card" style="flex: 1;">
    <el-tab-pane>
      <span slot="label">
        <img src="../assets/images/machine.png" />
        机手
      </span>
      我的行程
    </el-tab-pane>
    <el-tab-pane>
      <span slot="label">
        <img src="../assets/images/machine.png" />
        销售
      </span>
      我的行程
    </el-tab-pane>
  </el-tabs>
  <el-button>按钮</el-button>
</div>

这样，`el-tabs`和`el-button`就会在同一行展示了。