赞
踩
- <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>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。