Use of af-table-column plug-in element el-table-column width adaptive

af-table-column is a table column component for Vue.js, used to define the style and behavior of columns in tables. The following is how to use af-table-column:

1. First, make sure you have installed the af-table-column package. It can be installed using the following command:

npm install af-table-column --save

2. Introduce af-table-column into the Vue component:

import AfTableColumn from 'af-table-column';

3. Use af-table-column in the template of the Vue component:

<af-table-column
  :label="columnLabel"
  :prop="columnProp"
  :sortable="columnSortable"
  :width="columnWidth"
  :align="columnAlign"
  :formatter="columnFormatter"
  :render="columnRender"
></af-table-column>

Among them, the meaning of each attribute is as follows:

• label: Column title
• prop:The data field corresponding to the column
• sortable: Whether it can be sorted, the default isfalse
• width:The width of the column
• align: Column alignment, default is'left'
• formatter: Customize column display format
• render: Customize column rendering method

4. Define the column properties in the data of the Vue component:

data() {
    
    
  return {
    
    
    columnLabel: 'Column Label',
    columnProp: 'columnProp',
    columnSortable: true,
    columnWidth: '100px',
    columnAlign: 'center',
    columnFormatter: (row, column, value) => {
    
    
      // 自定义列的显示格式
      return value.toUpperCase();
    },
    columnRender: (h, {
     
      row, column, index }) => {
    
    
      // 自定义列的渲染方式
      return h('span', {
    
    
        style: {
    
    
          color: row[column.prop] > 0 ? 'green' : 'red'
        }
      }, row[column.prop]);
    }
  };
}

The above is the basic usage of af-table-column. You can customize the column style and behavior according to your needs. For more detailed usage and properties, please refer to the documentation of af-table-column.

Tool collection: https://aiburgeon.com/siteCollection/