网站建设与制作的流程,中国房地产信息网官网,网页设计模板html代码案例,.net怎么做网站注意#xff1a; 1、点击某行单元格添加选中样式#xff1b; 2、表格第一列数据单独添加样式#xff0c;比如#xff1a;加粗#xff1b; 3、表格表头添加样式#xff0c;比如#xff1a;修改背景色#xff1b;
先上代码#xff08;效果图在文章末尾#xff09; 1、点击某行单元格添加选中样式 2、表格第一列数据单独添加样式比如加粗 3、表格表头添加样式比如修改背景色
先上代码效果图在文章末尾
templatedivel-table sizesmallstylewidth: 100%;highlight-current-row:header-cell-styleheaderCellStyle():cell-class-nametableCellClassNamerow-keyindexcell-clickcellclick:cell-stylecellStyle:row-class-namerowClassName:datatableData el-table-columnlabel名称1propname1alignlefttemplate slot-scopescopespan{{ scope.row.name1}}/span/template/el-table-columnel-table-columnlabel名称2propname2aligncentertemplate slot-scopescopespan{{ scope.row.name2 || -}}/span/template/el-table-columnel-table-columnlabel名称3propname3aligncentertemplate slot-scopescopespan{{ scope.row.name3 || -}}/span/template/el-table-columnel-table-columnlabel名称4propname4aligncentertemplate slot-scopescopespan{{ scope.row.name4 || -}}/span/template/el-table-column/el-table/div
/templatescript
export default {name: ,components: {},props: {},data () {return {tableData: [{name1: 上海,name2: bbb,name3: ccc,name4: ddd,},{name1: 广州,name2: bb,name3: cc,name4: dd,},{name1: 厦门,name2: b,name3: c,name4: d,},{name1: 北京,name2: bbbb,name3: cccc,name4: dddd,}],cellClickRow:,cellClickColumn: ,}},created () {},mounted () {},computed: {},watch: {},methods: {// 表头样式headerCellStyle () {return {color: #333 !important, backgroundColor: #cedff3 !important,fontSize: 14px,fontWeight: 500,}},rowClassName ({row,rowIndex}) {// 点击时 添加小手样式if (rowIndex 2) {return addPointer}},tableCellClassName ({row,column,rowIndex,columnIndex}) {// 给行列索引赋值row.index rowIndexcolumn.index columnIndexif (columnIndex 0) {return columnFirstStyle} else {return columnOtherStyle}},cellclick (row, column, cell,event) {let clickRanking // 当前点击数据for(let i in row) {if (i column.property) {clickRanking row[i]}}// 点击厦门行点击的厦门数据不为空 且 厦门 标题不可点击if (row.name1 厦门 clickRanking clickRanking !厦门) {this.cellClickRow row.indexthis.cellClickColumn column.index}},cellStyle ({row, column, rowIndex, columnIndex}) {if (row.name1 厦门) {// 给所点击的 单元格添加样式if (row.index this.cellClickRow column.index this.cellClickColumn) {return border:1px solid #409eff; color:#2C89E5;font-weight: 700;} else {return }}},},
}
/scriptstyle langscss scoped
::v-deep .columnFirstStyle{font-weight: 700;font-size: 14px;color: black;
}
::v-deep .columnOtherStyle{font-size: 14px;
}
::v-deep .addPointer{cursor: pointer;
}/style展示效果图
