af-table-column有什么用？（用法介绍）

af-table-column是一个HTML标签,用于在af-table中定义表格列。 af-table是一种用于在Web应用程序中呈现数据的控件。af-table-column标签用于定义表格中的每一列，并指定列中要显示的数据。

af-table-column的用法：

安装脚手架

npm install af-table-column

main.js中注册

import AFTableColumn from 'af-table-column'
const fontRate = {
  CHAR_RATE: 1.1, // 汉字比率
  NUM_RATE: 0.65, // 数字
  OTHER_RATE:10 // 除汉字和数字以外的字符的比率
}
const fontSize =20
// 注册组件
Vue.use(AFTableColumn, { fontRate, fontSize })

页面调用

 <el-table :data="data" >
  <af-table-column sortable
    v-for="(item,index) in data" :key="index" :label="item.name" :prop="item.id">
  </af-table-column>
</el-table>

样式设置

.el-table th > .cell {
  white-space: nowrap; width: fit-content;
}

PS：如果需要对其中一行设置置最小宽可以用min-width实现！

以上是编程学习网小编为您介绍的“af-table-column有什么用？（用法介绍）”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。