数据表行类不更新：按type列值配置行背景与字体颜色

Hey there! Let's sort out this table row styling issue you're facing. Based on your requirements—setting row backgrounds and text color based on the type column value—here are solutions for common scenarios you might be working with:

1. Vanilla JavaScript (Plain JS) #

If you're working with a native HTML table, you can dynamically assign classes by mapping your data to table rows and using a helper function to determine the right styles.

Example Code: #

// Your sample data source
const tableData = [
  { id: 1, type: 'error', content: 'Failed to load resource' },
  { id: 2, type: 'bug', content: 'Button not responding on mobile' },
  { id: 3, type: 'info', content: 'System updated successfully' }
];

// Get table body element
const tbody = document.querySelector('#data-table tbody');

// Render rows with dynamic classes
tbody.innerHTML = tableData.map(item => `
  <tr class="${getRowClasses(item.type)}">
    <td>${item.id}</td>
    <td>${item.type}</td>
    <td>${item.content}</td>
  </tr>
`).join('');

// Helper function to calculate row classes
function getRowClasses(type) {
  const classes = [];
  if (type === 'error') {
    classes.push('md-bg-red-50', 'text-red-600'); // Add red text class (adjust to your actual text color class)
  } else if (type === 'bug') {
    classes.push('md-bg-amber-50');
  }
  return classes.join(' ');
}

If your table is already rendered and you need to update classes later, loop through the rows and re-apply the helper function:

// Update existing rows
document.querySelectorAll('#data-table tbody tr').forEach(row => {
  const typeCell = row.querySelector('td:nth-child(2)'); // Adjust index to match your type column position
  const type = typeCell.textContent.trim();
  row.className = getRowClasses(type);
});

2. Vue 3 (Composition API) #

In Vue, use the :class binding to dynamically apply styles based on the row's type value.

Template: #

<table id="data-table">
  <tbody>
    <tr v-for="item in tableData" :key="item.id" :class="getRowClasses(item.type)">
      <td>{{ item.id }}</td>
      <td>{{ item.type }}</td>
      <td>{{ item.content }}</td>
    </tr>
  </tbody>
</table>

Script: #

import { ref } from 'vue';

export default {
  setup() {
    const tableData = ref([
      { id: 1, type: 'error', content: 'Failed to load resource' },
      { id: 2, type: 'bug', content: 'Button not responding on mobile' },
      { id: 3, type: 'info', content: 'System updated successfully' }
    ]);

    const getRowClasses = (type) => {
      return {
        'md-bg-red-50': type === 'error',
        'text-red-600': type === 'error',
        'md-bg-amber-50': type === 'bug'
      };
    };

    return { tableData, getRowClasses };
  }
};

3. React (Functional Component) #

For React, dynamically build the className string using a helper function.

Example Component: #

import React from 'react';

const DataTable = () => {
  const tableData = [
    { id: 1, type: 'error', content: 'Failed to load resource' },
    { id: 2, type: 'bug', content: 'Button not responding on mobile' },
    { id: 3, type: 'info', content: 'System updated successfully' }
  ];

  const getRowClasses = (type) => {
    let classes = [];
    if (type === 'error') {
      classes.push('md-bg-red-50', 'text-red-600');
    } else if (type === 'bug') {
      classes.push('md-bg-amber-50');
    }
    return classes.join(' ');
  };

  return (
    <table>
      <tbody>
        {tableData.map(item => (
          <tr key={item.id} className={getRowClasses(item.type)}>
            <td>{item.id}</td>
            <td>{item.type}</td>
            <td>{item.content}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default DataTable;

4. Third-Party Table Libraries (e.g., Ant Design Table) #

If you're using a library like Ant Design, check for built-in props to customize row classes. For Ant Design Table, use the rowClassName prop:

import { Table } from 'antd';

const tableData = [/* Your data source */];
const columns = [/* Your column definitions */];

const App = () => {
  const rowClassName = (record) => {
    if (record.type === 'error') return 'md-bg-red-50 text-red-600';
    if (record.type === 'bug') return 'md-bg-amber-50';
    return '';
  };

  return <Table dataSource={tableData} columns={columns} rowClassName={rowClassName} />;
};

Quick Notes: #

• Ensure your CSS classes (like md-bg-red-50 and text-red-600) are properly defined or imported (e.g., if using Tailwind CSS, confirm your config includes these classes).
• If your data loads asynchronously, make sure the styling logic runs after the data is fully fetched.

内容的提问来源于stack exchange，提问作者Snl