element-ui：table自定義列寬 和 設置百分比寬度

今天在使用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>
        </template>
      </el-table-column>
    </el-table>

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

剛開始使用width:"item.width"一直沒有生效

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

:width="item.width"

 

 

3、element-ui中的table可以設置寬度為數值，也可以設置為百分比

 

如果設置為數值的話，

 

eg：width:'200'

 

設置百分比：

 

eg: min-width:'25%'