在vue中使用Element table组件时的时候，发现设置el-table-column为百分比，每一列都特别窄，根本不会达到预期效果。Vue中要将宽度设置成百分比的话，不能通过设置width来实现，而是要设置min-width，并且每一列都必须设置min-width。
el-table组件会被vue解析成 html，Vue直接把百分号去掉把数值当做列宽来呈现，且单位是px。本文地址:http://www.04007.cn/article/993.html,未经许可,不得转载.
需要注意的是：width，min-width 的原理都是将值百分比去掉变成px。可是min-width会按照比例分配剩余空间。并非直接算的百分比。（因此要每一列都设置min-width才能实现每一列的百分比配置）设置成 min-width 以后，width 的值就被计算成 （当前值 / 全部列值和）的百分比了。这个特殊点我到觉得挺好的，在html中使用width设置百分比的时候总要关心其总和需要是100%，维护起来麻烦，而这种设置百分比并不需要其总和为100%。我觉得这是一项改进。本文地址:http://www.04007.cn/article/993.html,未经许可,不得转载.
<el-table v-loading="loading" :data="tableData" <el-table-column prop="id" label="ID" min-width="6%"></el-table-column> <el-table-column prop="name" label="姓名" min-width="12%"></el-table-column> <el-table-column prop="create_time" label="创建时间" min-width="24%"></el-table-column> <el-table-column prop="update_time" label="更新时间" min-width="24%"></el-table-column> </el-table>本文地址:http://www.04007.cn/article/993.html,未经许可,不得转载.
在使用VUE时 npm run dev启动项目报错：‘vue-cli-service’ 不是内部或外部命令，也不是可运行的程序。问题出现的原因，是本地环境根本没有vue-cli等一些环境。呃，注意看一下是不是运行的项目里根本没有node_moudles文件夹，因为我之所以记录这个错误，是因为我运行运行发现vscode中的A项目目录根本不是我想运行的项目B，我在启动还没有install的A项目导致碰到这样的错误。所以先好好检查！然后遇到这样的问题先运行一下npm install吧，如果还不行，尝试先删除一下node_moudles文件夹。本文地址:http://www.04007.cn/article/993.html,未经许可,不得转载.
>npm run dev #‘vue-cli-service’ 不是内部或外部命令，也不是可运行的程序 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! server_admin@1.0.0 dev: `vue-cli-service serve --mode dev` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the kqTrainH5@4.1.0 dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. >npm install + vue-cli@2.9.6 updated 14 packages in 65.793s本文地址:http://www.04007.cn/article/993.html,未经许可,不得转载.
本文地址:http://www.04007.cn/article/993.html 未经许可,不得转载. 手机访问本页请扫描右下方二维码.
|
|
手机扫码直接打开本页面 |
