方案
<template>
<div class="tables">
<el-table
:cell-style="cellStyle"
:header-cell-style="rowClass"
:data="tableData"
style="width: 90%, height=80"
>
<el-table-column
type="index"
label="序号"
width="100"
align="center"
></el-table-column>
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"
><template slot-scope="scope">
<span v-html="formatter(scope.row.name)"></span>
</template>
</el-table-column>
<el-table-column
prop="address"
label="地址"
width="300"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<el-button
@click="handleClick(scope.$index)"
type="text"
size="small"
icon="el-icon-edit"
>下标</el-button
>
<el-button
@click="deleteUserByUserName(scope.row, scope.$index)"
type="text"
size="small"
icon="el-icon-delete"
style="color: red"
>数据</el-button
>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
methods: {
rowClass({
row, rowIndex }) {
return "background:teal"; //表头颜色
},
cellStyle({
row, column, rowIndex, columnIndex }) {
if (rowIndex % 2 == 1) {
return "background:rgb(242,250,249)"; //斑马格
}
},
formatter(content) {
if (content !== 0) {
//列颜色及其鼠标移入样式
return `<span style="color:red;cursor: pointer;"> ${
content} </span> `;
}
},
handleClick(index) {
console.log("行下标", index);
},
deleteUserByUserName(data, index) {
console.log("数据及下标", data, index);
},
},
};
</script>
行下标及列下标
给每一行添加下标
<el-table
:header-cell-style="{ color: '#000', background: 'rgb(209, 236, 233)' }"
:cell-class-name="cellClassName"
@row-click="rowClick"
@cell-click="cellClick"
></el-table>
methods: {
tableRowClassName({
row, rowIndex }) {
row.index = rowIndex; //给每一行添加下标
column.index = columnIndex; //给每一列添加下标
},
cellClick(row, column) {
//单元格事件
console.log("行下标", row.index, "列下标", column);
},
rowClick(row) {
//行事件
console.log("获取到行下标", row.index);
console.log("获取到行内的所有数据", row);
},
}