设置el-button中link类型按钮的文字颜色且不改变悬停样式

可以使用以下样式来设置el-button中link类型按钮的文字颜色：

.el-button--text:not(.is-disabled) {
  color: #xxx; /* 设置文字颜色 */
}

这样可以只改变文字颜色，而不影响悬停样式。其中，`#xxx`是你想要设置的颜色值。请将其替换为你需要的颜色值。

相关问题

el-dropdown有el-dropdown-item时显示button没有不显示button

`el-dropdown` 组件的 `trigger` 属性可以控制下拉菜单的触发方式，当 `trigger` 属性值为 `'click'` 时，会显示一个按钮，当属性值为 `'hover'` 时，不会显示按钮，而是在鼠标悬停在触发元素上时直接展开下拉菜单。

因此，如果你希望 `el-dropdown` 在含有 `el-dropdown-item` 的情况下始终显示按钮，可以将 `trigger` 属性设置为 `'click'`。示例代码如下：

<el-dropdown trigger="click">
  <span class="el-dropdown-link">
    点击触发下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu>
    <el-dropdown-item>菜单项一</el-dropdown-item>
    <el-dropdown-item>菜单项二</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

vue+elementui 打印表格不显示表格边框线

### 回答1：
如果 Vue 项目使用了 Element UI 组件库中的 Table 组件打印表格时不显示表格边框线，可以通过在 CSS 中覆盖样式来解决。

可以在项目中新建一个 CSS 文件，如 `print.css`，在该文件中添加如下样式：

/* 表格边框 */
table {
  border-collapse: collapse;
  border: 1px solid black;
}

/* 表格内容边框 */
td, th {
  border: 1px solid black;
}

然后在你打印表格的页面的 head 标签内加入

<link rel="stylesheet" type="text/css" href="print.css" media="print">

如果你使用vue-cli那么也可以在vue.config.js的配置里面加入

chainWebpack: config => {
  config.plugin("html").tap(args => {
    args[0].meta.push({name: 'link', content: 'print.css', media: 'print'});
    return args;
  });
}

这样打印出来的表格就会显示出边框了。

### 回答2：
在Vue和ElementUI中，如果打印表格时不显示表格边框线，可以通过以下几种方法解决：

1. 使用CSS样式控制：可以在打印时为表格设置特定的样式，如下所示：

<style>
@media print {
  .el-table {
    border-collapse: collapse;
    border: 1px solid #000;
  }
  .el-table th,
  .el-table td {
    border: 1px solid #000;
  }
}
</style>

该样式将在打印时将表格的边框线设置为1像素宽的黑色线条。

将上述代码放在需要打印表格的页面的样式部分，这样在打印时就会显示表格的边框线。

2. 使用ElementUI自带的打印样式：ElementUI提供了一个打印样式，可以直接使用它来显示表格边框线。只需在打印时添加一个`el-table-print`的class，如下所示：

<el-table class="el-table-print" :data="tableData" style="width: 100%">
  <!-- 表格内容 -->
</el-table>

这样在打印时，表格就会显示边框线。

需要注意的是，使用此方法时，不需要手动设置边框样式，ElementUI会自动应用默认的边框样式。

3. 通过打印设置调整：在打印预览页面中，大部分浏览器都提供了打印设置选项，可以在其中选择打印边框。具体操作可以参考浏览器的打印设置说明。

以上就是解决Vue和ElementUI中打印表格不显示边框线的几种方法，可以根据实际需求选择其中一种方式来解决该问题。

### 回答3：
在vue elementUI中，打印表格不显示表格边框线的问题，可以通过以下两种方法来解决：

1. 使用自定义样式：可以在打印样式中添加自定义的CSS样式来显示表格的边框线。在打印时，可以通过媒体查询@media print来应用该样式。例如：

@media print {
  .el-table__body::-webkit-scrollbar {
    display: none;  /* 隐藏滚动条 */
  }
  
  /* 显示表格边框线 */
  .el-table__body, .el-table__header-wrapper, .el-table__fixed-header-wrapper {
    border: 1px solid #000;
  }
  
  .el-table__row {
    border-bottom: 1px solid #000;
  }
  
  .el-table__row--hover {
    background-color: #f5f5f5;  /* 鼠标悬停行背景色 */
  }
  
  .el-table__header {
    border-bottom: 1px solid #000;
  }
}

2. 使用打印插件：可以使用一些专门用于打印的插件来解决该问题，例如`print-js`插件。该插件可以在打印时保持元素的样式，包括表格的边框线。首先，在项目中安装`print-js`插件：

npm install print-js --save

然后，在需要打印的组件中引入`print-js`插件，并在打印按钮的点击事件中调用相应的方法：

<template>
  <div>
    <el-button @click="printTable">打印表格</el-button>
    <el-table ref="table">
      <!-- table content -->
    </el-table>
  </div>
</template>

<script>
import printJS from 'print-js';

export default {
  methods: {
    printTable() {
      const tableElement = this.$refs.table.$el;  // 获取表格DOM元素
      printJS(tableElement.innerHTML);  // 打印表格
    }
  }
}
</script>

使用上述方法之一，你就可以在打印时显示表格的边框线了。