element表格自适应列宽(af-table-column使用)
安装依赖npm install af-table-columnmain.js中注册const fontRate = {CHAR_RATE: 1.1, // 汉字比率NUM_RATE: 0.65, // 数字OTHER_RATE:10 // 除汉字和数字以外的字符的比率}const fontSize =20// 注册组件Vue.use(AFTableColumn, { fontRate, fontS
·
安装依赖
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 })
页面使用
//要在tabel里面使用 af-table-column !!!看好标签
<el-table :data="data" >
<af-table-column sortable
v-for="(item,index) in data"
:key="index" //下标
:label="item.name" //表头内容
:prop="item.id" //不显示的id数值
>
</af-table-column>
</el-table>
需要给表格设置一下样式
.el-table th > .cell {
white-space: nowrap; width: fit-content;
}
如果有一些列不需要设置自适应需要有固定的宽
<el-table :data="data">
//sortable这是是用来表格排序直接写就行,点击的时候自动排序
<af-table-column sortable
v-for="(item,index) in data"
:key="index"
:label="item.name"
:prop="item.id"
>
</af-table-column>
// min-width="200"用来设置最小宽
<el-table-column min-width="200"
label="操作">
<template slot-scope="scope">
<el-button size="mini">编辑</el-button>
<el-button>删除</el-button>
</template>
</el-table-column>
设置固定宽度用el-table-column
自适应宽度用af-table-column 标签不一样!!!!要看一下
更多推荐
已为社区贡献10条内容
所有评论(0)