el-table-v2修改表头、单元格、表格整体的宽度、高度样式

有关部分的完整代码：

javascript 复制代码

//template里面
 <div style="height: calc(100% - 60px); width: 100%">
      <el-auto-resizer>
        <template #default="{ height, width }">
          <el-table-v2
            v-model:expanded-row-keys="expandedRowKeys"
            :columns="columns"
            :data="changedTableData"
            :width="width"
            :height="height"
            expand-column-key="name"
            row-key="id"
            :header-cell-props="headerClassName"
          >
            <template #cell="{ column, rowData }">
              <template v-if="column.key == 'isConfig'">
                <el-checkbox
                  v-model="changedTableData.isConfig"
                  :disabled="!isEditMode"
                />
              </template>
            </template>
          </el-table-v2>
        </template>
      </el-auto-resizer>
    </div>

//script里面

// 列定义
const columns = [
 
  {
    key: "isConfig",
    dataKey: "isConfig",
    title: "是否为基准配置",
    width: "10%",
    style: {
      backgroundColor: "#fffacd",//-----------使用这个给单元格修改样式
    },
  },
  {
    key: "baseline",
    dataKey: "baseline",
    title: "基准数量",
    width: "10%",
    style: {
      backgroundColor: "#fffacd",
    },
  },
];

//和header-cell-props配合使用，修改某一列的header样式
const headerClassName = ({ column, style }) => {
  if (column.key == "isConfig" || column.key == "baseline") {
    style.backgroundColor = "#fffacd";
  }
};

1.修改某一个表头的样式：header-cell-props和对应的函数配合着使用，函数可以拿到一些参数，具体有什么参数可以查看elementUI的文档

2.修改单元格的样式：

方法一：给el-table-v2表格的单元格设置边框

javascript 复制代码

（第一步）给el-table-v2添加下面这一行，注意冒号也是需要的。
    :cell-props="cellProps"
（第二步）在script中加下面的代码
const cellProps = ({ column }) => {
  return {
    style: {
      borderRight: "1px solid #ebeef5", // 列边框（右侧）
      borderBottom: "1px solid #ebeef5", // 行边框（底部）
    },
  };
};

方法二：直接在列的设置里面添加style，能做到什么样子，我不清楚，但是对于背景颜色的设置是成功了的。

javascript 复制代码

// 列定义
const columns =[{
    key: "isConfig",
    dataKey: "isConfig",
    title: "是否为基准配置",
    width: "10%",
    style: {
      backgroundColor: "#fffacd",
    },
  },
  {
    key: "baseline",
    dataKey: "baseline",
    title: "基准数量",
    width: "10%",
    style: {
      backgroundColor: "#fffacd",
    },]

3.设置整体表格的宽度和高度

关于这个我是想要实现表格占满整个页面，el-table-v2中的width和height只能接受具体的数字，如果写"100%"，会报错。我是使用的el-auto-resizer去实现，注意它外面还需要嵌套一层，并给这一层赋上宽度和高度。

javascript 复制代码

 <div style="height: calc(100% - 60px); width: 100%">
      <el-auto-resizer>
        <template #default="{ height, width }">
          <el-table-v2
            v-model:expanded-row-keys="expandedRowKeys"
            :columns="columns"
            :data="changedTableData"
            :width="width"
            :height="height"
            expand-column-key="name"
            row-key="id"
            :header-cell-props="headerClassName"
          >
            <template #cell="{ column, rowData }">
              <template v-if="column.key == 'isConfig'">
                <el-checkbox
                  v-model="changedTableData.isConfig"
                  :disabled="!isEditMode"
                />
              </template>
            </template>
          </el-table-v2>
        </template>
      </el-auto-resizer>
    </div>

希望对你们有用。