vue+element table结合后端自定义table宽度

1、接口代码结构示意，is_hide为表头字段隐藏使用，width为设置表头宽度

{
    "id": {
        "is_hide": 1,
        "width": ""
    },
    "name": {
        "is_hide": 0,
        "width": ""
    },
    "parent_id": {
        "is_hide": 0,
        "width": ""
    },
    "sort": {
        "is_hide": 0,
        "width": "232"
    },
    "status": {
        "is_hide": 0,
        "width": ""
    }
}

2、前端代码示意，增加element table代码样式

<el-table
      v-loading="loading"
      :data="product_infoList"
      row-key="id"
      @header-dragend="handleHeaderDragend"
      @sort-change="sortChange"
      border
      style="width: 100%">
      <el-table-column
        show-overflow-tooltip
        type="selection"
        align="center"/>
      <el-table-column
        fixed
        v-for="(item, index) in fieldsList"
        :key="index"
        :fixed="index==0"
        :prop="item.Field"
        :label="item.Name"
        :width="item.Width"
        sortable="custom"
      >
        <template slot-scope="scope">
          <template v-if="item.Field == 'product_status'"> {{ statusFormat(scope.row, scope.column) }}</template>
          <template v-else-if="item.Field == 'created_at'">
            <span>{{ parseTime(scope.row.created_at) }}</span>
          </template>
          <template v-else-if="item.Field == 'updated_at'">
            <span>{{ parseTime(scope.row.updated_at) }}</span>
          </template>
          <template v-else-if="item.Field == 'description'">
            <span v-html="scope.row.description"></span>
          </template>
          <template v-else-if="item.Field == 'product_image'">
            <el-image
              v-if="scope.row.product_image!=''"
              style="width: 60px; height: 50px"
              :src="apiUrl+'/'+scope.row.product_image"
              fit="fill"
            />
          </template>
          <template v-else>{{ scope.row[scope.column.property] }}</template>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot="header" slot-scope="{ column, $index}" >
          操作 &nbsp;&nbsp;&nbsp;&nbsp; <i @click="getTableHead" class="el-icon-setting"></i>
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
          
        </template>
      </el-table-column>
    </el-table>

3、增加js方法

methods: {
    // 当拖动表头改变了列的宽度的时候会触发该事件
    handleHeaderDragend(newWidth, oldWidth, column, event) {
      if (column.property) {
        const params = {
          types: 'cms_category',
          width: newWidth,
          field: column.property
        }
        setFieldStyle(params).then(response => {
          
        })
      }
    },

/** 删除按钮操作 */
handleDelete(row) {
  
},

/** 修改按钮操作 */
handleUpdate(row) {
  
},

}

 

4、通过鼠标对table表格拖拽，改变宽度后传到后端接口，自定定义不同用户需求