element-ui：table自定义列宽

时间：2020-06-11 13:46:45 收藏：0 阅读：86

今天在使用element-ui创建列表的时候，有一个小坑，就是循环列表的时候怎么自定义列表宽度：

1、先自定义表头的columns

 data() {
    return {
      columns: [
        { id: "menuName", text: "菜单名称", prop: "menuName", width: 150 },
        { id: "menuCode", text: "菜单编号", prop: "menuCode", width: 180 },
        {
          id: "parentMenuCode",
          text: "菜单父编号",
          prop: "parentMenuCode",
          width: 150
        },
        { id: "url", text: "请求地址", prop: "url", width: 220 },
        { id: "sort", text: "排序", prop: "sort", width: 100 },
        { id: "level", text: "层级", prop: "level", width: 100 },
        { id: "isMenu", text: "是否是菜单", prop: "isMenu", width: 100 },
        { id: "status", text: "状态", prop: "status", width: 100 }
      ]
    };
  }

2、循环列表

<el-table :data="menuPageResult && menuPageResult.value" border>
      <el-table-column
        v-for="item in columns"
        v-bind:label="item.text"
        v-bind:key="item.id"
        :prop="item.prop"
        :width="item.width"
      ></el-table-column>
      <el-table-column label="操作" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            type="text"
            size="mini"
          >删除</el-button>
          <el-button
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            type="text"
            size="small"
          >修改</el-button>
          <el-button
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            type="text"
            size="small"
          >查看</el-button>
        </template>
      </el-table-column>
    </el-table>

如果要自定义列表宽度，需要在columns里面自定义宽度，之后再 el-table-column 里面取值。

刚开始使用width:"item.width"一直没有生效

正确使用方法：(添加 :width )

:width="item.width"

原文：https://www.cnblogs.com/liumcb/p/13092203.html