使用avue的Crud组件为某行单独设置样式并给点击单个单元格设置事件
使用avue的Crud组件为某行单独设置样式并给点击单个单元格设置事件
·
如图,我们想为单独的一行添加一个颜色,并且点击这个单元格可以触发事件。
第一步:为某一行添加单独样式。
给组件添加:cell-style="cellStyle"属性:
:cell-style="cellStyle"
在methods添加cellStyle事件:
// 给第2列的单元格单独设置样式(从0开始)
cellStyle({ row, column, rowIndex, columnIndex }) {
if (columnIndex == 1) {
return {
color: "#409eff",
cursor: "pointer",
};
}
},
以上,我们就给第二行添加了一个蓝色字体的样式。
第二步:点击蓝色字体触发弹窗事件。
给组件添加@cell-click="clickCell"事件:
@cell-click="clickCell"
在methods中定义这个事件:
// 点击第2列的单元格
clickCell(row, column, cell, event) {
if (column.label === "事业部") {
this.isDialog = true;
}
},
以上,我们就完成了为单独的单元格添加事件的目的。
对于函数传递过来的参数我们可以一一打印出来看看结果,选择自己需要的数据进行逻辑处理。
总结:
在组件中添加属性和事件:
<avue-crud :cell-style="cellStyle" @cell-click="clickCell"></avue-crud>
在methods中定义事件:
methods: {
// 给第2列的单元格单独设置样式
cellStyle({ row, column, rowIndex, columnIndex }) {
if (columnIndex == 1) {
return {
color: "#409eff",
cursor: "pointer",
};
}
},
// 点击第2列的单元格
clickCell(row, column, cell, event) {
if (column.label === "事业部") {
// 逻辑代码
}
},
},
更多推荐
已为社区贡献1条内容
所有评论(0)