ExtJS 4.2：如何动态修改表格行操作图标的提示文本？

Got it, let's tackle this dynamic tooltip requirement for your grid's action button. The core idea is straightforward: we just need to conditionally set the tooltip text based on each record's type field (either activity or lead) when rendering the button. Below are implementations for some popular grid libraries, plus a vanilla JS approach for reference.

1. AG Grid (React/Vue/Angular) #

AG Grid relies on cell renderers for custom action columns. You can create a custom renderer that checks the row data and outputs the appropriate tooltip:

// Example for React AG Grid
const ActionCellRenderer = (props) => {
  const rowData = props.data;
  const tooltipText = rowData.type === 'activity' ? 'Close Activity' : 'Accept Lead';

  return (
    <button 
      className="action-btn"
      title={tooltipText}
      onClick={() => handleRowAction(rowData)}
    >
      {/* Add your icon or text here, e.g. 🔒/✅ */}
      {rowData.type === 'activity' ? 'Close' : 'Accept'}
    </button>
  );
};

// Add to your column definitions
const columns = [
  // Other columns...
  {
    headerName: 'Actions',
    cellRenderer: ActionCellRenderer,
    width: 120
  }
];

2. Vue 3 + Element Plus El-Table #

For Element Plus tables, you can use dynamic binding directly in the template to set the button's tooltip:

<el-table :data="tableRecords" border>
  <!-- Your other columns -->
  <el-table-column label="Actions">
    <template #default="{ row }">
      <el-button
        :title="row.type === 'activity' ? 'Close Activity' : 'Accept Lead'"
        @click="handleAction(row)"
      >
        {{ row.type === 'activity' ? 'Close' : 'Accept' }}
      </el-button>
    </template>
  </el-table-column>
</el-table>

<script setup>
import { ref } from 'vue';

const tableRecords = ref([
  { id: 1, type: 'activity', name: 'Follow-up Call' },
  { id: 2, type: 'lead', name: 'New Client Inquiry' }
]);

const handleAction = (row) => {
  // Your action logic here (close activity/accept lead)
};
</script>

3. Vanilla JavaScript (Plain HTML Grid) #

If you're building a grid from scratch with vanilla JS, set the tooltip when rendering each row:

const renderGrid = (records) => {
  const gridContainer = document.getElementById('grid-container');
  gridContainer.innerHTML = '';

  records.forEach(record => {
    const row = document.createElement('div');
    row.className = 'grid-row';

    // Add other cells for record data...

    const actionCell = document.createElement('div');
    const actionBtn = document.createElement('button');
    actionBtn.textContent = record.type === 'activity' ? 'Close' : 'Accept';
    actionBtn.title = record.type === 'activity' ? 'Close Activity' : 'Accept Lead';
    actionBtn.addEventListener('click', () => handleRecordAction(record));
    
    actionCell.appendChild(actionBtn);
    row.appendChild(actionCell);
    gridContainer.appendChild(row);
  });
};

// Sample data
const gridData = [
  { id: 1, type: 'activity', description: 'Project Deadline Follow-up' },
  { id: 2, type: 'lead', description: 'Potential Client Demo Request' }
];

renderGrid(gridData);

Quick Notes #

• The core logic is consistent across all approaches: check the record's type field and return the matching tooltip text
• Most modern grid frameworks support dynamic attribute binding for title (the standard HTML attribute for tooltips)
• Double-check that your row data correctly includes the type field with values activity or lead to avoid unexpected behavior

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