免费的建筑设计网站,北京上海网站建设,做平面设计需要学什么软件,搭建免费个人网站2022以下代码可直接复制使用 无需任何修改 注意#xff1a;如果最后的的css不生效#xff0c;就单独的放在一个style标签内 重点解释#xff1a;
:row-class-nametableRowClassName //这个是设置返回某行的类名
:stripefalse …以下代码可直接复制使用 无需任何修改 注意如果最后的的css不生效就单独的放在一个style标签内 重点解释
:row-class-nametableRowClassName //这个是设置返回某行的类名
:stripefalse //这个是去除原来的斑马条纹 否则自己设置的行样式不生效
row-clickrowClick //这个是点击某行事件
cell-mouse-entercellMouseEnter //这个是移入某行事件
cell-mouse-leavecellMouseLeave //这个是移出某行事件代码可直接复制
templatedivel-table :datatableData stylewidth: 100% :row-class-nametableRowClassName :stripefalse row-clickrowClick cell-mouse-entercellMouseEnter cell-mouse-leavecellMouseLeaveel-table-column propdate label日期 width180/el-table-columnel-table-column propname label姓名 width180template slot-scopescopespan{{ scope.row.name }}/span!-- {{ scope.row }} --span v-ifscope.row.hoverFlag hover显示 /span/template/el-table-columnel-table-column propaddress label地址/el-table-column/el-table/div
/templatescript
export default {data () {return {tableData: [{id: 1,date: 2016-05-02,name: 王小虎1,address: 上海市普陀区金沙江路 1518 弄}, {id: 2,date: 2016-05-04,name: 王小虎2,address: 上海市普陀区金沙江路 1517 弄}, {id: 3,date: 2016-05-01,name: 王小虎3,address: 上海市普陀区金沙江路 1519 弄}, {id: 4,date: 2016-05-03,name: 王小虎4,address: 上海市普陀区金沙江路 1516 弄}],rowIndex: -1}},watch: {tableData: {deep: true,handler: function (value) {console.log(监听表格数据, value)}}},methods: {rowClick (row, column, event) {// console.log(点击行事件, row, column, event)// 注意必须是使用两次深拷贝 因为 selectFlag 属性不是tableData原有的 则直接修改无效 所以两次深拷贝重新赋值let Arr JSON.parse(JSON.stringify(this.tableData))for (let index 0; index Arr.length; index) {const element Arr[index]if (element.id row.id) {element[selectFlag] trueconsole.log(找到对应行)} else {element[selectFlag] false}}this.tableData JSON.parse(JSON.stringify(Arr))},cellMouseEnter (row, column, cell, event) {// console.log(移入hover事件, row, column, cell, event)// 注意必须是使用两次深拷贝 因为 hoverFlag 属性不是tableData原有的 则直接修改无效 所以两次深拷贝重新赋值let Arr JSON.parse(JSON.stringify(this.tableData))for (let index 0; index Arr.length; index) {const element Arr[index]if (element.id row.id) {console.log(找到对应行)element[hoverFlag] true} else {element[hoverFlag] false}}this.tableData JSON.parse(JSON.stringify(Arr))},cellMouseLeave () {// 移除hover的事件for (let index 0; index this.tableData.length; index) {const element this.tableData[index]element[hoverFlag] false}},tableRowClassName ({ row, rowIndex }) {// 行的 className 的回调方法为 Table 中的某一行添加 class表明该行处于某种状态。console.log(表格行数据变化事件, row, rowIndex)if (row.selectFlag) {return success-row} else {return }}}
}
/scriptstyle/* 首先去除默认的hover效果 *//deep/.el-table--enable-row-hover .el-table__body tr:hover td {background-color: rgba(0, 0, 0, 0) !important;}/* 设置点击行的效果 *//deep/.el-table .success-row {background: #f0f9eb;/* background: #f5f7fa; */}/deep/.el-table .success-yellow {background: #eef7b5;}
/style
