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>

希望对你们有用。

相关推荐
Cacciatore->8 分钟前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~9 分钟前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo11 分钟前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
贵沫末29 分钟前
React——基础
前端·react.js·前端框架
aklry41 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin931 小时前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子1 小时前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户3802258598241 小时前
使用three.js实现3D地球
前端·three.js
程序无bug1 小时前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo1 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos