En una tabla b, cada celda de una columna debe tener un color de texto diferente. No el fondo de la celda, sino el color del texto real. Puedo cambiar el color del texto del encabezado de la columna, pero no los textos de las celdas individuales.
El código de la tabla b:
<b-card title="Total"> <b-table sticky-header="600px" hover :items="total" :fields="groupByFields"></b-table> </b-card>Los campos donde el cambio de color del encabezado de la columna es:
groupByFields: [ { key: 'name', sortable: true, }, { label: 'Total', key: 'count', }, { key: 'interested', thStyle: { color: '#3eef33' }, sortByFormatted: false, formatter: (value) => { const res = value; return (`($${res})`); }, }, ], El atributo de color thStyle cambia el color del texto del encabezado, pero no el texto de los valores en las celdas de esa columna. ¿Cómo haría coincidir ese color con el texto de la celda (no con el fondo) de esa columna también?
Aquí hay un ejemplo, usando la ranura #cell() :
new Vue({ el: '#app', data: () => ({ items: [], fields: [ 'id', { key: 'title', style: { fontStyle: 'italic' } }, { key: 'price', style: { color: 'red', textAlign: 'right' } } ] }), mounted() { fetch('https://dummyjson.com/products') .then(_ => _.json()) .then(_ => this.items = _.products); } }) <link href="https://unpkg.com/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://unpkg.com/bootstrap-vue@2.22.0/dist/bootstrap-vue.css" rel="stylesheet"/> <script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script> <script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script> <script src="https://unpkg.com/bootstrap-vue@2.22.0/dist/bootstrap-vue.js"></script> <div id="app"> <b-table :items="items" :fields="fields"> <template #cell()="{field, value}"> <div :style="field.style" v-text="value" /> </template> </b-table> </div> Si solo necesita diseñar algunas columnas, es posible que desee utilizar las #cell({key}) apropiadas.
Documentación aquí .
Probablemente la técnica más común es agregar clases a las celdas. Proporciona control granular sobre el estilo aplicado, sin sacrificar la flexibilidad.