element-ui 使用小坑

4 篇文章 0 订阅
3 篇文章 2 订阅

 1. element 表格有合计项和固定列,固定列下方滚动条无法滚动

方法:给两侧固定列设置 pointer-events: none;

注意:此时,你固定列中的一些点击操作无法执行了,所以我们要给固定列子元素设置pointer-events: all 。

.el-table__fixed, .el-table__fixed-right {
  pointer-events: none;
}
.el-table__fixed > *, .el-table__fixed-right > * {
  pointer-events: all;
}

了解pointer-events请看这篇文章:CSS3禁止点击、禁用、一切禁用效果

 2. el-cascader 多选无效

如果options数据最后一级中,存在空的children,会导致无法给组件赋值,change监听不到,删除掉就OK了。

根据提供的引用内容,我们可以得知el-table是element-ui中的一个表格组件,而el-cascader是一个级联选择器组件。如果要在el-table中使用el-cascader,并且要求el-cascader必填,可以通过以下步骤实现: 1. 在el-table中使用el-cascader组件,并将el-cascader的v-model绑定到数据源中。 2. 在el-cascader组件上添加一个ref属性,以便在后面的步骤中可以访问该组件。 3. 在el-table的表头中添加一个自定义列,该列包含一个自定义的表头模板和一个自定义的单元格模板。 4. 在自定义的表头模板中添加一个必填的标记,例如一个红色的星号。 5. 在自定义的单元格模板中添加一个验证逻辑,以确保el-cascader已经选择了一个值。可以使用$refs访问el-cascader组件,并使用其validate()方法进行验证。 下面是一个示例代码,演示如何在el-table中使用el-cascader并进行必填校验: ```html <template> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <<el-table-column label="级联选择器"> <template slot-scope="scope"> <el-cascader v-model="scope.row.cascaderValue" :options="cascaderOptions" ref="cascader" placeholder="请选择" clearable ></el-cascader> </template> <template slot="header"> <span>级联选择器</span> <span style="color: red">*</span> </template> </el-table-column>> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="primary" @click="handleValidate(scope.row)">验证</el-button> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: "张三", address: "北京", cascaderValue: [] }, { name: "李四", address: "上海", cascaderValue: [] }, { name: "王五", address: "广州", cascaderValue: [] } ], cascaderOptions: [ { value: "beijing", label: "北京", children: [ { value: "chaoyang", label: "朝阳区" }, { value: "haidian", label: "海淀区" } ] }, { value: "shanghai", label: "上海", children: [ { value: "pudong", label: "浦东新区" }, { value: "minhang", label: "闵行区" } ] }, { value: "guangzhou", label: "广州", children: [ { value: "tianhe", label: "天河区" }, { value: "yuexiu", label: "越秀区" } ] } ] }; }, methods: { handleValidate(row) { this.$refs.cascader.forEach(cascader => { cascader.clearValidate(); if (!cascader.cascaderValue || cascader.cascaderValue.length === 0) { cascader.validate(); } }); } } }; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不会做饭的程序员

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值