table,dialog初始化

父组件多选内容注意点

// 1.@selection-change="handleSelectionChange" 事件内自行处理需要的值
// 2.:row-key="row=>row.id" table数据的唯一id值
// 3.:reserve-selection="true"  selection属性到）
// 4.this.$refs.table.$refs.YTSRTable.clearSelection() 重置清空操作
// 5.this.$refs.table.$refs.YTSRTable.toggleRowSelection(value) 选择其中的某一项（回显时用
<template>
  <div>
	<el-button  type="primary" @click="add">新增</el-button>
	<YTSR-table ref="table"  @selection-change="handleSelectionChange" :row-key="row=>row.id" v-loading="listLoading" :data="tableData" border  :hasNO='false'  :cell-style="rowStyle" :header-cell-style="{textAlign:'center'}">
		<el-table-column :reserve-selection="true" type="selection" width="55" align="center"></el-table-column>
		>>>
		<el-table-column label="操作" :width="140" fixed="right" align="center">
           <template slot-scope="{ row }">
            <el-button type="text" @click="edit(row)" size="small">编辑</el-button>
          </template>
        </el-table-column>
	</YTSR-table>
	<pagination :total="tableData.total" :page.sync="currentPage" :limit.sync="pageSize" @pagination="initial" />
	<createApply ref="createApply" @save="init"></createApply>
  </div>
</template>
<script>
import createApplyfrom './createApply'
export default {
  	components: { createApplyfrom},
	data() {
		return {
			// ========== 加载相关 ==========
			listLoading: false, // 表格加载
			// ========== 接口参数 ==========
			create_date: [], // 日期搜索
			tableFrom: {}, // 请求参数
			// ========== 表格相关 ==========
			tableData: { // 列表数据
				data: [], // 列表
				total: 0, // 页码
			},
			// ============ select列表 =============
			listData: {
				status: [
					{ label: "已开启", value: 1 },
					{ label: "未开启", value: 2 },
					{ label: "已失效", value: 3 },
				],
			},
		}
	},
	created(){
		// 页面初始化
		this.init()
	},
	methods: {
		// ========= 初始化 =========
		init(){
		  this.tableFrom = {
	        id: null, // id
	        name: '', // 姓名
	        create_date:'', // 开始时间
	        status: '', // 1已开启 2未开启 3已失效
	        page: 1, // 页数
	        limit: 20, // 每页条数
	      }
	      this.getList()
		},
		// ========= 获取table数据 =========
		getList(){
			this.listLoading = true;
			xxx_name(this.tableFrom).then(res => {
				console.log('根据api获取数据', res)
				this.tableData.data = res.data.list;
				this.tableData.total = res.data.total;
				this.listLoading = false;
			}).catch((err)=> {
				this.listLoading = false;
			})
		},
		// ========= 多选 =========
		handleSelectionChange(row){
			this.idList= row.map((item,index)=>{
				return item.id
			})
		},
		// ========= 分页 =========
	    handleSizeChange(val) {
		  this.tableFrom.page= val.page
		  this.tableFrom.limit= val.limit
		  this.getList()
      	},
		// ========== 新增 ==========
	    add () {
	      this.$refs.createApply.dialogVisible = true
	      this.$refs.createApply.init()
	    },
	    // ========== 编辑 ==========
	    edit (row) {
	      this.$refs.createApply.dialogVisible = true
	      this.$refs.createApply.init(row)
	    },
	},
}
<script>

子组件

<!--
  ==================== 说明 ====================
  一.命名方式：
    dialog_add_order === dialog:弹窗,add:新增,order:订单
  二.参数
    1.title 弹窗名
    2.dialogVisible 是否打开
    3.formValidate 具体参数
    4.loadingbtn 按钮状态
	三.方法
    1.init() 初始化组件 调用
    2.getInfo() 根据id 获取详情
    3.save() 保存
 -->
<template>
  <div>
	<el-dialog
		:title="title"
		:visible.sync="dialogVisible"
		width="640px">
		<template>
		<el-form
		label-position="left"
		ref="ruleForm"
		:model="formValidate"
		class="demo-form-inline form_box"
		:rules="ruleValidate"
		label-width="100px">
			<el-form
	          label-position="left"
	          ref="ruleForm"
	          :model="formValidate"
	          class="demo-form-inline form_box"
	          :rules="ruleValidate"
	          label-width="100px">
				<el-form-item label="姓名：" prop="name">
					<el-input class="selWidth" clearable type="text" placeholder="请输入姓名" v-model="formValidate.name" maxlength="30" show-word-limit></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" :loading="loadingbtn" @click="save('ruleForm')">保存</el-button>
			</span>
	</el-dialog>
  </div>
</template>

<script>
  import {
    detailBuild, // 详情
    addBuild, // 新增
    updateBuild, // 编辑
  } from "@/api/card-v";
  export default {
    components: {
    },
    data() {
      return {
        title: '新增',
        dialogVisible: false,
        formLoading: false,
        loadingbtn: false, // 按钮
        formValidate: {},
        ruleValidate: {
          name: [
            { required: true, message: "请输入姓名", trigger: "blur"},
          ],
          time: [
            { required: true, message: "请选择时间", trigger: "change", type: "array"},
          ],
          image: [
            { required: true, message: "请选择图片", trigger: "change" },
          ],
          images: [
            { required: true, message: "请选择图片(多)", trigger: "change", type: "array"},
          ],
          nums: [
            { required: true, message: "请输入数量", trigger: "blur"},
          ],
          sort: [
            { required: true, message: "请输入排序", trigger: "blur"},
          ]
        },
      }
    },
    methods: {
      // ========== 初始化 ==========
	init(val) {
		this.formValidate = {
			name: '', // 姓名
			time: [], // 时间
			nums: '', // 数量
			sort: 0, // 排序
		}
		if (val) {
			this.getInfo(val)
		}
	},
	// ========== 获取详情 ==========
		getInfo (val) {
			this.formLoading = true
			getInfoApi(val.id).then(res => {
				console.log('api获取详情', res.data)
				this.formValidate = res.data
				this.formLoading = false
			}).catch(err=>{
				this.formLoading = false
			))
		},
		// ========== 保存 ==========
		save (form) {
			// 如果id存在则编辑，否则新增
			this.$refs[form].validate((valid) => {
				if (valid) {
					if ( this.formValidate.id ) {
						this.loadingbtn = true
						updateBuild(this.formValidate.id, this.formValidate).then(res => {
							this.$emit('saveInit')
							this.loadingbtn = false
						}).catch(err => {
							this.loadingbtn = false
						})
						} else {
							this.loadingbtn = true
							addBuild(this.formValidate).then(res => {
								this.$emit('save')
								this.loadingbtn = false
							}).catch(err => {
								this.loadingbtn = false
						})
					}
				}
			})
		},
    }
  }
</script>