Avue给table的某一列设置样式,点击实现页面跳转或是其他操作
最近写的一个小功能将姓名一例字体换成蓝色,,并且点击实现跳转给某一类添加样式1.在avue-crud组件中添加cell-class-name属性<avue-crud:data="data":option="option":page.sync="page":cell-class-name="addClass"@cell-click="pageto"></avue-crud>/
·
最近写的一个小功能
将姓名一例字体换成蓝色,,并且点击实现跳转
给某一类添加样式
1.在avue-crud组件中添加cell-class-name属性
<avue-crud
:data="data"
:option="option"
:page.sync="page"
:cell-class-name="addClass"
@cell-click="pageto"
></avue-crud>
/**
* @description: 单元格名字添加样式
*/
addClass({ row, column, rowIndex, columnIndex }) {
console.log(row);
console.log(column);
console.log(rowIndex);
console.log(columnIndex);
if (columnIndex === 2) {
return "cell-color"; // cell-blue就是添加的类名,添加完之后记得设置样式
}
},
/**
* @description: 点击名字进行跳转
*/
pageto(row, column, cell, event) {
if (column.label == "姓名") {
this.$router.push({
name: "teacherDetail",
params: {
id: row.id,
},
});
}
},
.cell-color {
color: #409eff !important;
cursor: pointer;
}
补充
控制台依次输出row,column,rowIndex,columnIndex
修改样式遇到权重问题(同elementUi)
method1:
<style lang="scss" scoped>
/deep/ .avue-crud__menu {
display: none;
}
method2:
<style lang="scss" scoped>
::v-deep .el-divider--vertical {
height: auto;
}
</style>
更多推荐
已为社区贡献4条内容
所有评论(0)