跨组件传值

跨组件传值

*一、首先封装了一个表格 EasyTable.vue *

<template>
<div>
	<ve-table
	      style="width: 100%; overflow-x: scroll; white-space: nowrap"
	      :columns="this.$attrs.columns"
	      :table-data="this.$attrs.tableData"	
	      row-key-field-name="rowKey"
	      :checkbox-optipon="checkboxOptipon"	//要接收的值
	      :cell-style-option="cellStyleOption"
	      :event-custom-option="eventCustomOption" />
		     <div v-show="this.$attrs.tableData.length === 0" class="empty-data">
		      暂无数据
		    </div>
		    <div class="table-pagination">
      <el-pagination
            style="height: 5%; margin-top: 15px"
            @size-change="pageSizeChange"
            @current-change="pageNumberChange"
            :current-page="this.$store.state.pageParams.pageIndex"
            :page-size="this.$store.state.pageParams.pageSize"
            :page-sizes="[10, 20, 30, 40]"
            background
            large
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageParams.totalCount"
          >
          </el-pagination>
    </div>
	    </div>
      </template>

<script>
export default {
	  name: "EasyTable",
	  data() {  },
      checkboxOptipon: {
        //禁用复选框
        disableSelectedRowKeys:[],	//要接收的值
        // 可控属性
        selectedRowKeys: [],
        // 行选择改变事件
        selectedRowChange: ({ row, isSelected, selectedRowKeys }) => {
          console.log(row)
          this.changeSelectedRowKeys(selectedRowKeys);
        },
        // 全选改变事件
        selectedAllChange: ({ isSelected, selectedRowKeys }) => {
          this.changeSelectedRowKeys(selectedRowKeys);
        },
      },
    };
  },
  methods: { },
    /**
     * 点击每页显示数量
     * @param
     */
    pageSizeChange(pageSize) {
      this.$store.state.pageParams.pageSize = pageSize;
      this.$store.state.pageParams.pageIndex = 1;
    },

    /**
     * 点击页码
     * @param pageIndex
     */
    pageNumberChange(pageIndex) {
      this.changeSelectedRowKeys([]);
      this.$store.state.pageParams.pageIndex = pageIndex;
    },

    // 给可控属性重新赋值
    changeSelectedRowKeys(keys) {
      this.checkboxOptipon.selectedRowKeys = keys;
      this.$store.commit("setSelectedRowKeys", keys);
    },
  },
  computed: { },
    ...mapGetters(["getSelectedRowKeys"]),
    pageParams: {
      get() {
        return this.$store.state.pageParams;
      },
      set(val) {
        this.$store.state.pageParams = val;
      },
    },
  },
  watch: {
    selectedRowKeys(newVal) {
      this.selectedRowKeys = newVal;
    },
  },
  created(){
    Object.assign(this.checkboxOptipon.disableSelectedRowKeys, this.$attrs.disableSelectedRowKeys)		//接收祖父组件传过来的值
  },
};
</script>

二、在父组件 PageContent.vue 使用

<template>
    <div class="page-content">
        <slot name="search"></slot>	
        <slot name="summary"></slot>
        <div class="list" v-if="noTable">
            <slot name="toolbar"></slot>
            <easy-table ref="ezTable" v-bind="$attrs"></easy-table>
        </div>
        <slot name="otherTable"></slot>
    </div>
</template>
<script>
import EasyTable from '../Table/EasyTable.vue'
    export default {
		  components: { EasyTable },
		        name: "PageContent",
		        data() {
		          return {
						 props: {
				            noTable: {
				                default: true,
				                type: Boolean
				            }
				        },
		        mounted() {
		        },
		        methods: {
		            ezTableClick(resetQuery) {
		                this.$refs.ezTable.pageNumberChange(1,resetQuery);
		            }
		        }
		    }
</script>

三、在祖父组件 SkuInvList.vue 使用并传值

<template>
      <page-content :columns="columns" :tableData="tableData" :disableSelectedRowKeys="disableSelectedRowKeys">
</template>

export default {
  name: "skulnvList",
  data() {
    return {
      disableSelectedRowKeys:[],
      }
  }，
  methods:{
  	push(){
  		this.disableSelectedRowKeys.splice(0,this.disableSelectedRowKeys.length)
              this.tableData.map(item=>{		//根据条件往数组添加值
                if (item.currentAmount <= 0) {
                  this.disableSelectedRowKeys.push(item.rowKey)
                } 
              })
  	}