af-table-column体验,设置el-table中el-table-column的宽度

今天仍旧看视频跟学，对自己也有点小小的优越感，想在老师的基础想美化结构，看着表格的单元格宽度不爽就像试试怎么优化。上网就发现了这个插件：**[af-table-column](https://www.npmjs.com/package/af-table-column)

使用步骤

1.安装af-table-column

npm install af-table-column
或
cnpm install af-table-column

2.在main.js中挂载使用

/* import dayjs from 'dayjs'
main.js (需要先引入 Vue 和 Element-UI 依赖库, 
并在 < el - table ></el - table > 组件下使用该组件) */
import AFTableColumn from 'af-table-column'

Vue.use(AFTableColumn)

3.在el-table组件中使用

    <!-- 数据表格区域 -->
    <el-table :data="userList" border style="width: 100%">
      <!-- 这是索引列 -->
      <af-table-column type="index" label="#"> </af-table-column>
      <!-- 这是动态渲染的数据列 -->
      <af-table-column prop="name" label="姓名"> </af-table-column>
      <af-table-column prop="age" label="年龄"> </af-table-column>
      <af-table-column prop="position" label="头衔"> </af-table-column>
      <af-table-column label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.addtime | dateChage }}
        </template>
      </af-table-column>
      <af-table-column label="操作">
        <template>
          <el-row>
            <!-- 编辑用户信息按钮 -->
            <el-button>编辑</el-button>
            <!-- 删除用户信息按钮 -->
            <el-button type="danger" @click="delUserBtn">删除</el-button>
          </el-row>
        </template>
      </af-table-column>
    </el-table>

4.效果图

体验中的小插曲

在安装af-table-column的时候，我重新打包运行居然全报错。
提示说各种组件插件没引用，于是我就重新把所有的组件插件安装了一遍。例如：

1. npm install babel-plugin-component -D
2. npm dayjs -S
3. npm install element-ui -S
4. npm install axios -S