<template>
<div class="compoent-content">
<!--数据展示部分-->
<div class="formList">
<el-table
ref="elTable"
v-loading="listLoading"
:key="tableKey"
:data="optionsList"
:empty-text="emptyText"
border
stripe
fit
highlight-current-row
max-height="300"
style="width: 100%"
:row-class-name="tableRowClassName"
@select="handleSelect"
@select-all="handselectall"
@row-click="handleClick"
>
<el-table-column type="selection" align="center" width="55" fixed />
<el-table-column label="预约选项" align="center">
<template slot-scope="scope">
<span>{{ scope.row.text }}</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import { handleMessage, handleConfirm, handleNotify } from "@/utils/popup";
import { queryDataDicsApi } from "@/api/common";
import { isNullOfEmpty } from "@/utils/index";
export default {
name: "options",
props: {
list: {
type: Object,
// default: ()=>{}
},
},
data() {
return {
tableKey: 0, // 表格唯一标识
optionsList: [],
temp: {
id: undefined,
text: "",
},
listLoading: false,
emptyText: "暂无数据",
keyword: "",
selArr: [],
};
},
watch: {},
created() {
this.getList();
},
methods: {
getList() {
// 请求列表数据
this.listLoading = true;
this.emptyText = "暂无数据";
const dicType = "5";
queryDataDicsApi(dicType)
.then((response) => {
this.listLoading = false;
const res = response.data;
if (res.code === 1) {
let optionsList = res.data;
var newArray = optionsList.map((item, index) => {
return Object.assign(item, { className: "normal" });
});
this.optionsList = newArray;
//表格错位重排
this.$nextTick(() => {
this.$refs.elTable.doLayout();
});
} else {
handleMessage("请求数据失败:" + res.msg, "error");
}
})
.catch((err) => {
this.listLoading = false;
this.emptyText = "请求出错:" + err.message;
});
},
// 变色样式监听
tableRowClassName({ row, rowIndex }) {
let color = "";
for (let item of this.selArr.values()) {
if (item.id === row.id) color = "table-SelectedRow-bgcolor";
}
return color;
},
// 全选变色
handselectall(val) {
this.handleSelect(val);
},
/* 获取当前选中的数据 */
handleSelect(row) {
this.selArr = [];
if (row.length > 0) {
row.forEach((value, index) => {
this.selArr.push(value);
});
}
this.$emit("optionsClick", this.selArr);
},
handleClick(row) {
let findRow = this.selArr.find((c) => c.id == row.id);
if (findRow) {
let findIndex = undefined;
this.selArr.forEach((item, index) => {
if (item.id == findRow.id) {
findIndex = index;
}
});
this.selArr.splice(findIndex, 1);
this.$refs.elTable.toggleRowSelection(row, false);
this.$emit("optionsClick", this.selArr);
return;
}
this.selArr.push(row);
this.$refs.elTable.toggleRowSelection(row, true);
this.$emit("optionsClick", this.selArr);
},
clearFrom() {
this.selArr = [];
this.$refs.elTable.clearSelection();
this.$refs.elTable.setCurrentRow();
},
},
};
</script>
<style lang="scss" scoped>
.compoent-content {
margin: 0 auto;
width: 65%;
.type-item {
position: relative;
float: left;
padding: 0px 18px;
margin-right: 28px;
line-height: 30px;
text-align: center;
border: 1px solid #ccc;
border-radius: 3px;
}
.add-icon {
font-size: 20px;
cursor: pointer;
}
.submit {
text-align: center;
box-sizing: border-box;
}
}
/deep/ {
.table-SelectedRow-bgcolor {
td {
background-color: #69a8ea !important;
color: #fff;
}
}
}
</style>
vue+element table组件点击行选中同时高亮
最新推荐文章于 2024-05-14 11:44:37 发布