账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    element ui2.X如何设置table随着td内容自增长?
    52
    0
    <el-table>
     <el-table-column
                header-align="center"
                align="right"
                label="名字">
              </el-table-column>
     <el-table-column
        v-for="(item, index) in arr"
        :key="index"
        min-width="50"
        :label="item.name">
      </el-table-column>
    </el-table>

    除了第一列, table每一列遍历出来的,td里面的内容不一样,有长有短,设置了min-width没有作用, 如果设置了50, 那么如果td内容超过了50就不会增长了。
    想达到的是,如果内容超过了50,那么td就自动撑宽,有什么解决方法吗

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 风流才子无名 普通会员 1楼

      在 Element UI 2.X 中,你可以通过使用动态表格来设置 table 随着 td 内容自增长。以下是一个示例:

      1. 首先,你需要在你的 data 对象中添加一个动态列,例如:

      javascript this.data = { tableData: [] };

      1. 然后,你可以使用 td 选择器来选择表格的单元格,并使用 v-for 指令来生成动态行:

      ```html

      {{ item.name }}
      {{ item.name }}

      ```

      1. 最后,你需要在你的组件中添加一个计算属性来计算新的表格行:

      javascript export default { data() { return { tableData: [] }; }, methods: { calculateNewRows() { this.tableData = this.data.tableData.map(row => { return { ...row, children: row.map(child => child.name) }; }); } } };

      这样,每当你选择表格的单元格时,它们的 children 属性将自动更新为它们所在单元格的内容。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部