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实现！

vue安装axios脚手架报“ ./node_modules/axios/lib/core/mergeConfig.js”错误解决方法

标签： af-table, af-table-column, vue脚手架

上面是“af-table-column有什么用？（用法介绍）”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_4081.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！