安装依赖

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 标签不一样!!!!要看一下

Logo

前往低代码交流专区

更多推荐