element ui固定在下方‘合计行‘实现,并且可点击

效果图

 代码

// 首先在el-table增加element ui的自带属性(:summary-method="getSummaries"
			show-summary)

 <el-table
            :data="tablep_115.data"
            id="tablep_115"
            border
    		:style="conheight"
            height="200"
            @selection-change="tablep_115_Change"
            default-expand-all
			:summary-method="getSummaries"
			show-summary
          >

// 事件
getSummaries(param) {
								  let $this = this
								  console.log('合计',param)
								  const { columns, data } = param;
								  const sums = [];
								  columns.forEach((column, index) => {
									if (index === 0) {
									  sums[index] = '合计';
									  return;
									} else if(index == 1 ){
									$(".el-table__footer").find("td").eq(1).click(()=>{
										// 此处定义行里面的点击事件
									})
									
									}
									const values = data.map(item => Number(item[column.property]));
									if (!values.every(value => isNaN(value))) {
									  sums[index] = values.reduce((prev, curr) => {
										const value = Number(curr);
										if (!isNaN(value)) {
										  return prev + curr;
										} else {
										  return prev;
										}
									  }, 0);
									  sums[index] += '';
									} else {
									  sums[index] = 'N/A';
									}
								  });
								  return sums;
								},

如果您想要实现 element ui table 的固定列和横向滚动功能,可以使用 `el-table` 组件的 `fixed` 和 `scroll` 属性。 首先,将 `fixed` 属性设置为 `left` 或 `right`,可以将表格的某一列固定在左侧或右侧。例如,要将第一列固定在左侧,可以这样写: ```html <el-table :data="tableData" style="width: 100%"> <el-table-column type="index" label="序号" width="100"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="age" label="年龄" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> ``` 将该代码改成: ```html <el-table :data="tableData" style="width: 100%"> <el-table-column type="index" label="序号" width="100" fixed="left"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="age" label="年龄" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> ``` 这样,第一列就会固定在左侧。 接着,将 `scroll` 属性设置为一个对象,可以实现表格的横向滚动。例如,要将表格横向滚动,可以这样写: ```html <el-table :data="tableData" style="width: 100%" :scroll="{ x: 800 }"> <el-table-column type="index" label="序号" width="100"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="age" label="年龄" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> ``` 将该代码改成: ```html <el-table :data="tableData" style="width: 100%" :scroll="{ x: 800 }"> <el-table-column type="index" label="序号" width="100"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="age" label="年龄" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> ``` 这样,表格就可以横向滚动了。 至于 element ui table 合计在滚动条下方的问题,可以尝试在 `el-table` 组件上添加样式 `position: relative`,然后在 `el-table` 的 `footer` 插槽中添加一个 div 元素,设置其样式 `position: absolute; bottom: 0;`,这样就可以将合计置于滚动条之上了。例如: ```html <el-table :data="tableData" style="width: 100%; position: relative;" :scroll="{ x: 800 }"> <el-table-column type="index" label="序号" width="100"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="age" label="年龄" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <template v-slot:footer> <div style="position: absolute; bottom: 0;"> <!-- 合计的内容 --> </div> </template> </el-table> ```
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值