当前位置:   article > 正文

vue element ui table组件列宽可以拖拽调整大小,某一列可以禁止拖拽调整大小_el-table列宽设置不可拖拽

el-table列宽设置不可拖拽

 只需要在 el-table-column 标签中添加:resizable="false"即可

 

  1. <template>
  2. <div class="m-other-table-wrap">
  3. <el-table
  4. :data="tableData"
  5. border
  6. style="width: 100%"
  7. @header-dragend="handleHeaderDragend"
  8. >
  9. <el-table-column prop="date" label="日期" width="180" :resizable="false">
  10. </el-table-column>
  11. <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
  12. <el-table-column prop="address" label="地址"> </el-table-column>
  13. </el-table>
  14. </div>
  15. </template>
  16. <script>
  17. import './index.css'
  18. export default {
  19. data() {
  20. return {
  21. tableData: [
  22. {
  23. date: '2016-05-02',
  24. name: '王小虎',
  25. address: '上海市普陀区金沙江路 1518 弄',
  26. },
  27. {
  28. date: '2016-05-04',
  29. name: '王小虎',
  30. address: '上海市普陀区金沙江路 1517 弄',
  31. },
  32. {
  33. date: '2016-05-01',
  34. name: '王小虎',
  35. address: '上海市普陀区金沙江路 1519 弄',
  36. },
  37. {
  38. date: '2016-05-03',
  39. name: '王小虎',
  40. address: '上海市普陀区金沙江路 1516 弄',
  41. },
  42. ],
  43. }
  44. },
  45. methods: {
  46. handleHeaderDragend(e) {
  47. console.log(e)
  48. },
  49. },
  50. }
  51. </script>
  52. <style></style>

参考链接:

https://chat.xutongbao.top/

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/weixin_40725706/article/detail/458971
推荐阅读
相关标签
  

闽ICP备14008679号