<template>
? <div>
? ? <div>
? ? ? <el-table :data="tableData" border style="width: 100%" ref="table">
? ? ? ? <el-table-column prop="index" label="序號" width="150">
? ? ? ? ? <template slot-scope="scope">
? ? ? ? ? ? <div>{{ scope.$index + 1 }}</div>
? ? ? ? ? </template>
? ? ? ? </el-table-column>
? ? ? ? <el-table-column
? ? ? ? ? v-for="(item, index) in againRender"
? ? ? ? ? :width="item.width"
? ? ? ? ? :prop="item.prop"
? ? ? ? ? :key="index"
? ? ? ? ? show-overflow-tooltip
? ? ? ? ? :label="item.label"
? ? ? ? ></el-table-column>
? ? ? </el-table>
? ? </div>
? ? <div class="dsadas">
? ? ? <new-checkbox :all-item-data="itemList" :change-props="changeProps" />
? ? </div>
? </div>
</template>
<script>
import axios from "axios";
// 采用異步加載,防止父組件引入子組件，子組件的的鉤子函數全部執(zhí)行完畢
const newCheckbox = () => ({?
? component: import("./checkBox.vue"),
? delay: 2000,
? timeout: 2000,
});
export default {
? data() {
? ? return {
? ? ? tableData: [],
? ? ? againRender: [],
? ? ? itemList: [
? ? ? ? {
? ? ? ? ? allListDate: [
? ? ? ? ? ? // 后臺數據結構跟這有一樣
? ? ? ? ? ? { label: "姓名", width: "120", prop: "name" },
? ? ? ? ? ? { label: "性別", width: "120", prop: "sex" },
? ? ? ? ? ? { prop: "age", label: "年齡", width: "120" },
? ? ? ? ? ? { prop: "styChild", label: "身份", width: "120" },
? ? ? ? ? ? { prop: "gradeClass", label: "學歷", width: "200" },
? ? ? ? ? ],
? ? ? ? ? selectedList: [
? ? ? ? ? ? { label: "姓名", width: "120", prop: "name" },
? ? ? ? ? ? { label: "性別", width: "120", prop: "sex" },
? ? ? ? ? ? { prop: "age", label: "年齡", width: "120" },
? ? ? ? ? ],
? ? ? ? },
? ? ? ],
? ? };
? },
? components: { newCheckbox },
? mounted() {
? ? this.getElementVauleHieen();
? },
? methods: {
? ? changeProps(value) {
? ? ? this.$nextTick((_) => {
? ? ? ? this.againRender= value;
? ? ? ? this.$refs.table.doLayout;
? ? ? });
? ? },
? ? getElementVauleHieen() {
? ? ? axios.get("http://localhost:3000/elementVauleHieen").then((res) => {
? ? ? ? this.tableData = res.data;
? ? ? });
? ? },
? },
};
</script>
<style lang="less">
</style>

<template>
? <div>
? ? <div>
? ? ? <el-checkbox
? ? ? ? :indeterminate="isIndeterminate"
? ? ? ? v-model="checkAll"
? ? ? ? @change="handleCheckAllChange"
? ? ? ? >全選</el-checkbox
? ? ? >
? ? </div>
? ? <el-checkbox-group
? ? ? v-model="checkedCities"
? ? ? @change="handleCheckedCitiesChange"
? ? >
? ? ? <el-checkbox
? ? ? ? v-for="(item, index) in allItemDataChecked"
? ? ? ? :label="item.label"
? ? ? ? :key="index"
? ? ? ? @change="(val) => checkboxChange(val, item, index)"
? ? ? ? >{{ item.label }}</el-checkbox
? ? ? >
? ? </el-checkbox-group>
? </div>
</template>
<script>
export default {
? name: "checkBox",
? data() {
? ? return {
? ? ? isIndeterminate: false,
? ? ? checkAll: false,
? ? ? checkedCities: [],
? ? ? allItemDataChecked: this.allItemData[0].allListDate,
? ? ? checkboxChangeList: [],
? ? };
? },
? props: {
? ? allItemData: {
? ? ? type: Array,
? ? ? default: () => [],
? ? },
? ? changeProps: {
? ? ? type: Function,
? ? ? default: () => false,
? ? },
? },
? mounted() {
? ? let list = [];
? ? if (this.allItemDataChecked.length) {
? ? ? this.allItemDataChecked.forEach((element) => {
? ? ? ? this.allItemData[0].selectedList.forEach((item) => {
? ? ? ? ? if (element.prop === item.prop && element.label === item.label) {
? ? ? ? ? ? list.push(item.label);
? ? ? ? ? }
? ? ? ? });
? ? ? });
? ? ? this.checkedCities = list;
? ? }
? },
? watch: {
? ? checkedCities(newVlaue) {
? ? ? this.checkboxChangeList = []; // 防止多次點擊重復觸發(fā)數據
? ? ? if (newVlaue.length === 0) {
? ? ? ? this.changeProps([]);
? ? ? } else {
? ? ? ? this.allItemDataChecked.forEach((ele) => {
? ? ? ? ? newVlaue.forEach((item) => {
? ? ? ? ? ? if (ele.label === item) {
? ? ? ? ? ? ? this.checkboxChangeList.push(ele);
? ? ? ? ? ? ? this.checkboxChange();
? ? ? ? ? ? }
? ? ? ? ? });
? ? ? ? });
? ? ? }
? ? },
? },
? methods: {
? ? handleCheckAllChange(val) {
? ? ? this.checkedCities = [];
? ? ? let result = [];
? ? ? this.checkedCities = val
? ? ? ? ? this.allItemDataChecked.forEach((element) => {
? ? ? ? ? ? result.push(element.label);
? ? ? ? ? })
? ? ? ? : [];
? ? ? this.checkedCities = result;
? ? },
? ? handleCheckedCitiesChange(value) {
? ? ? this.checkAll = value.length === this.allItemDataChecked.length;
? ? },
? ? checkboxChange() { // 發(fā)現(xiàn)這個沒用
? ? ? this.changeProps(this.checkboxChangeList);
? ? },
? },
};
</script>
<style lang="less">
</style>