Question

我正在尝试在此vue组件中设置表格样式，我的理解是我需要从数据函数创建css，然后将其绑定到模板中的适当元素。

我想做的是将以下CSS应用于我的表

css：

 .table-striped>tr:nth-of-type(odd) {
   background-color: #f9f9f9
 }

vue组件：

Vue.component('overview', {
    delimiters: [ '[[', ']]' ],
    props: ['job_execs'],
    template: `
      <div overview>
      <h3>Overview</h3>
      <table class="table table-striped table-bordered">
        <tr>
          <td>Start Time</td>
          <td>[[ job_execs[0].time_start ]]</td>
        </tr>
        <tr>
          <td>End Time</td>
          <td>[[ job_execs[0].time_end ]]</td>
        </tr>
        <tr>
          <td>Job</td>
          <td>http://placeholder</td>
        </tr>
      </table>
      </div>
    `,
    data: function() {
        return {
            divExample: {
                color: 'red',
                fontSize: '13px'
                }
        }
    },
});

我不确定如何1.通过数据函数创建此CSS，然后将其2.绑定到模板中。

我目前正在一个项目中，我需要使用现有的Web应用程序并将前端转换为vue.js，从已经肿的CSS提取我需要的CSS似乎让我头疼不已存在，然后将其转换为可注入每个组件css的vue js函数。

Answer 1

假设此CSS是全球性的，并且已经由您的应用程序提供，那么问题就出在下面：

您的选择器说：“为tr的直接子元素的奇数tbody元素设置样式，该元素是类table-striped的元素的直接孩子”

您的模板不包含tbody。因此，您需要添加一个或修改选择器。

要添加inline styles，可以使用data或类似的计算属性：

computed: {
  tableStyle() {
    return {
      color: 'red',
      fontSize: '13px',
    };
  },
},

然后在模板中，可以像这样绑定属性：

<table :style="tableStyle">

我更喜欢将计算属性用于样式，因为它们确实不是组件状态的一部分（即data）。

还要注意，一个更好的解决方案（IMHO）是使用single file components，它使您可以访问scoped styles。根据您的构建环境，该选项可能会或可能不会。

Answer 2

您可以使用以下方式将CSS属性绑定到Vue中的标签：

<tr>
    <td>Start Time</td>
    <td>[[ job_execs[0].time_start ]]</td>
</tr>
<tr v-bind:style="strippedTr">
    <td>End Time</td>
    <td>[[ job_execs[0].time_end ]]</td>
</tr>
<tr>
    <td>Job</td>
    <td>http://placeholder</td>
</tr>

...

data: function() {
    return {
        strippedTr: {
            'background-color': '#f9f9f9'
        }
    }
},

如何在vue.js组件中设置表格样式

2 个答案: