element-ui dialog预定义的open 回调 怎么调用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了element-ui dialog预定义的open 回调 怎么调用相关的知识，希望对你有一定的参考价值。
基于官方的例子修改了一下，文档里有说明是dialog的实例，因此可以使用$refs来访问：mounted()
this.$refs.dialog.open();
setTimeout(() =>
this.$refs.dialog.close();
, 2000);
参考技术A 古调虽自爱，今人多不弹。
基于element-ui的后台系统表格dialog筛选自定义按钮分页的一次性封装
暂未剔除部分业务代码，初版1.0，还有待升级
table部分
1 <template> 2 <div id="myTable"> 3 <filterGroup :filterList="filterConfig.filter_list" :search_list="filterConfig.search_list" v-on="{getFilterData:filterData}"></filterGroup> 4 <div class="piliang"> 5 <router-link v-for="item in topBtnConfig" :key="item.title" :to="item.jumpPage?item.jumpAddress:‘‘"> 6 <el-button type="primary" class="float-left" :icon="item.icon" v-if="item.jumpPage">{{item.title}}</el-button> 7 <el-button type="primary" class="float-left" :icon="item.icon" @click="createOrUpdate()" v-else>{{item.title}}</el-button> 8 </router-link> 9 <el-button class="float-right" @click="getData(true)" icon="el-icon-refresh" :loading="loading">更新数据</el-button> 10 </div> 11 <!--主体内容区，展示表格内容--> 12 <el-table 13 class="baseTable" 14 :data="tableData" 15 border 16 size="small" 17 v-loading="loading" 18 tooltip-effect="dark" 19 ref="table" 20 @selection-change="handleSelectionChange" 21 > 22 <el-table-column type="selection" width="55" v-if="otherConfig.needSelect"></el-table-column> 23 <el-table-column 24 v-for="(item,index) in tableConfig" 25 :key="index" 26 :prop="item.prop" 27 :label="item.label" 28 :width="item.width?item.width:‘‘" 29 :min-width="item.minWidth?item.minWidth:‘‘" 30 > 31 <template slot-scope="scope"> 32 <Cell v-if="item.render" :row="scope.row" :column="item" :index="scope.$index" :render="item.render"></Cell> 33 <span v-else>{{scope.row[item.prop]}}</span> 34 </template> 35 </el-table-column> 36 <el-table-column label="操作" :width="tableBtnConfig.width" fixed="right"> 37 <template slot-scope="scope"> 38 <router-link :to="{path:tableBtnConfig.updateAddress,query:{id:scope.row.id}}"> 39 <el-button type="warning" v-if="tableBtnConfig.update && tableBtnConfig.isUpdateInNewPage" style="margin-right:10px;">编辑</el-button> 40 </router-link> 41 <el-button type="warning" v-if="tableBtnConfig.update && !tableBtnConfig.isUpdateInNewPage" @click="createOrUpdate(scope.row)">编辑</el-button> 42 <el-button type="danger" v-if="tableBtnConfig.delete" @click.native="deleteItem(scope.row.id)">删除</el-button> 43 </template> 44 </el-table-column> 45 </el-table> 46 <pagination class="float-right" :currentPaging="currentPaging" v-on="{sizeChange:handleSizeChange,currentChange:handleCurrentChange}"></pagination> 47 <!--按钮触发的表单弹窗--> 48 <BaseDialogForm 49 :title="dialogTitle" 50 :width="formWidth" 51 ref="dialogForm" 52 :config="formConfig" 53 :form-data="formModel" 54 :err-form="formError" 55 @submit="dialogSubmit" 56 ></BaseDialogForm> 57 </div> 58 </template> 59 60 <script> 61 import Cell from "./expand"; 62 import BaseDialogForm from "components/baseDialogForm"; 63 // 分页 64 import pagination from "components/pagination"; 65 import filterGroup from "components/filterGroup"; 66 67 export default { 68 name: "baseTable", 69 components: { 70 Cell, 71 BaseDialogForm, 72 pagination, 73 filterGroup 74 }, 75 props: [ 76 // 表格配置 77 "tableConfig", 78 // 表格按钮配置 79 "tableBtnConfig", 80 // 数据接口 81 "theApi", 82 // 其他表格配置 83 "otherConfig", 84 // 上方按钮配置 85 "topBtnConfig", 86 // 筛选项配置 87 "filterConfig", 88 // 表单标题，例如用户、角色 89 "formTitle", 90 "formWidth", 91 // 表单配置 92 "formConfig", 93 // 表格编辑区域宽度 94 "gridEditWidth", 95 // 表单的model数据 96 "formData" 97 ], 98 data() { 99 return { 100 // 表格加载状态 101 loading: false, 102 // 表格展示数据 103 tableData: [], 104 multipleSelection: [], 105 // 全选数据容器 106 allSelect: false, 107 // 筛选项 108 filter_data: {}, 109 // 分页 110 currentPaging: { currentPage: 1, pageSize: 10, totals: 0 }, 111 // 新增修改模态框title 112 dialogTitle: "", 113 // 表单数据 114 formModel: {}, 115 // 后台输出错误信息 116 formError: {} 117 }; 118 }, 119 created() { 120 this.getData(); 121 }, 122 methods: { 123 // 获取列表数据 124 getData: async function(update) { 125 this.loading = true; 126 // 默认数据 127 let default_data = { 128 page: this.currentPaging.currentPage, 129 per_page: this.currentPaging.pageSize 130 }; 131 // 筛选数据 132 let data = Object.assign(default_data, this.filter_data); 133 const res = await this.theApi.getData(data); 134 this.loading = false; 135 if (res.code === 200) { 136 update && this.$message.success("数据已更新"); 137 const respon = res || {}; 138 this.tableData = respon.data || []; // 给表格赋值 139 respon.total && (this.currentPaging.totals = respon.total); 140 } 141 }, 142 createOrUpdate(item) { 143 this.$refs.dialogForm.resetForm(); 144 item 145 ? this.getEditData(item.id, () => { 146 this.$refs.dialogForm.showDialog(); 147 }) 148 : this.$refs.dialogForm.showDialog(); 149 this.dialogTitle = (item ? "编辑" : "新增") + this.formTitle; 150 }, 151 // 从后台获取编辑框需要的数据，表格只用作展示作用，所以不从表格内获取数据 152 getEditData: async function(id, callback = function() {}) { 153 const res = await this.theApi.getEdit(id); 154 if (res.code === 200) { 155 this.formModel = Object.assign({}, res.data[0] || {}); 156 callback(); 157 } 158 }, 159 // 模态框数据提交 160 dialogSubmit: async function(data) { 161 // 根据是否有id判断是新增还是编辑 162 const res = await this.theApi[data.id ? "editItem" : "addItem"]( 163 data 164 ); 165 if (res.code === 200) { 166 this.getData(); 167 this.$message.success(this.dialogTitle + "成功！"); 168 } else { 169 // 在表单中输出错误提示 170 const errList = res.errors || ""; 171 if (errList) { 172 for (let key in errList) { 173 errList[key] = errList[key][0]; 174 } 175 this.formError = errList; 176 } 177 } 178 }, 179 // 处理相应父组件的事件方法 180 handleEmit(emitName, row) { 181 this.$emit(emitName, row); 182 }, 183 // 删除 184 deleteItem: function(id) { 185 this.$confirm("是否删除?", "提示", { 186 confirmButtonText: "确定", 187 cancelButtonText: "取消", 188 type: "warning" 189 }) 190 .then(() => { 191 //ajax 192 this.theApi.deleteItem({ id: id }).then(() => { 193 if (res.code === 200) { 194 this.$message.success("删除成功"); 195 // 刷新数据 196 this.getData(); 197 } 198 }); 199 }) 200 .catch(() => { 201 this.$message.info("取消删除"); 202 }); 203 }, 204 // 批量删除 205 batchDelete: function() { 206 if (this.multipleSelection[0]) { 207 this.$confirm("是否删除选择的条目?", "提示", { 208 confirmButtonText: "确定", 209 cancelButtonText: "取消", 210 type: "warning" 211 }) 212 .then(() => { 213 let data = this.multipleSelection; 214 //ajax 215 }) 216 .catch(() => { 217 this.$message.info("取消删除"); 218 }); 219 } else { 220 this.$message.error("请先选择要删除的条目"); 221 } 222 }, 223 // 表格选择 224 handleSelectionChange: function(val) { 225 this.multipleSelection = val; 226 this.allSelect = val.length === this.tableData.length; 227 }, 228 // 全选按钮 229 toggleSelection: function(rows) { 230 if (rows && !this.allSelect) { 231 rows.forEach(row => { 232 this.$refs.multipleTable.toggleRowSelection(row, true); 233 }); 234 } else { 235 this.$refs.multipleTable.clearSelection(); 236 } 237 }, 238 // 分页sizeChange 239 handleSizeChange: function(val) { 240 this.currentPaging.pageSize = val; 241 this.currentPaging.currentPage = 1; 242 // 更新数据 243 this.getData(); 244 }, 245 // 分页currentChange 246 handleCurrentChange: function(val) { 247 this.currentPaging.currentPage = val; 248 // 更新数据 249 this.getData(); 250 }, 251 // 筛选 252 filterData: function(obj) { 253 this.tableData = []; 254 this.filter_data = JSON.parse(JSON.stringify(obj)); 255 this.currentPaging.currentPage = 1; 256 // 刷新数据 257 this.getData(); 258 } 259 } 260 }; 261 </script> 262 263 <style lang="less" scoped> 264 @import "~assets/css/mixin.less"; 265 .baseTable { 266 width: 100%; 267 margin: 0.55rem 0; 268 /* 强制不换行 */ 269 .no-wrap { 270 .cell { 271 white-space: nowrap; 272 } 273 } 274 /deep/thead { 275 th { 276 background: lighten(#ebeef5, 3%); 277 color: #333; 278 font-size: 14px; 279 } 280 } 281 } 282 .piliang { 283 margin: 0.55rem 0; 284 position: relative; 285 &::after { 286 .clear; 287 } 288 .el-button { 289 margin-left: 0; 290 } 291 } 292 </style>
dialog部分
1 <template> 2 <el-dialog :title="title" :visible.sync="dialogVisible" :width="width?width:‘80%‘"> 3 <el-form :model="formModel" ref="configForm" label-width="100px"> 4 <el-row :gutter="16"> 5 <el-col :span="item.span?item.span:8" v-for="(item,index) in config" :key="index"> 6 <el-form-item :prop="item.prop" :rules="item.rules" :label="item.label"> 7 <!--输入框表单类型--> 8 <el-input v-if="item.type ===‘text‘" v-model="formData[item.prop]" :placeholder="item.placeholder?item.placeholder:‘请输入‘"></el-input> 9 <!--文本域表单类型--> 10 <el-input v-if="item.type === ‘textarea‘" type="textarea" v-model="formData[item.prop]" :placeholder="item.placeholder?item.placeholder:‘请输入‘"></el-input> 11 <!-- 计数器 --> 12 <el-input-number v-if="item.type === ‘el-input-number‘" v-model="formData[item.prop]" :min="1" :step="1" label="描述文字"></el-input-number> 13 <!--checkbox表单类型--> 14 <el-checkbox-group v-if="item.type === ‘checkbox‘" v-model="formData[item.prop]" :placeholder="item.placeholder?item.placeholder:‘请选择‘"> 15 <el-checkbox v-for="option in item.data" :label="option.id" :key="option.id">{{option.name}}</el-checkbox> 16 </el-checkbox-group> 17 <!--radio表单类型--> 18 <el-radio-group v-if="item.type === ‘radio‘" v-model="formData[item.prop]" :placeholder="item.placeholder?item.placeholder:‘请选择‘"> 19 <el-radio v-for="option in item.data" :label="option.id" :key="option.id">{{option.name}}</el-radio> 20 </el-radio-group> 21 <!--下拉选择类型--> 22 <el-select v-if="item.type === ‘select‘" v-model="formData[item.prop]" :placeholder="item.placeholder?item.placeholder:‘请选择‘"> 23 <el-option v-for="option in item.data" :key="option.id" :label="option.label" :value="option.id"></el-option> 24 </el-select> 25 <el-date-picker v-if="item.type === ‘datepicker‘" v-model="formData[item.prop]" type="date" :placeholder="item.placeholder?item.placeholder:‘请选择日期‘"></el-date-picker> 26 </el-form-item> 27 </el-col> 28 </el-row> 29 </el-form> 30 31 <span slot="footer" class="dialog-footer"> 32 <el-button @click="dialogVisible = false">取 消</el-button> 33 <el-button type="primary" @click="submitForm">确 定</el-button> 34 </span> 35 </el-dialog> 36 </template> 37 38 <script> 39 export default { 40 name: "base-dialog-form", 41 props: ["title", "width", "visible", "config", "formData", "errForm"], 42 data() { 43 return { 44 formModel: {}, 45 dialogVisible: false, 46 dialogTitle: "" 47 }; 48 }, 49 mounted() { 50 // 将组件上的属性赋值给当前组件内变量，因为props只能单向绑定,还需要监听属性值变化进行父子组件间交互 51 this.formModel = this.formData; 52 this.dialogVisible = this.visible; 53 this.dialogTitle = this.title; 54 }, 55 methods: { 56 // 提交表单数据 57 submitForm() { 58 this.$refs.configForm.validate(valid => { 59 if (valid) { 60 // 让父组件接收到响应数据 61 this.$emit("submit", this.formModel); 62 // 关闭模态框 63 this.dialogVisible = false; 64 } else { 65 console.log("error submit!!"); 66 return false; 67 } 68 }); 69 }, 70 // 重置表单状态 71 resetForm() { 72 if (this.$refs.configForm) { 73 this.$refs.configForm.resetFields(); 74 } 75 }, 76 // 展示模态框 77 showDialog() { 78 this.dialogVisible = true; 79 } 80 }, 81 watch: { 82 /*实现表单数据的绑定，实时接收父组件的数据变化*/ 83 formData() { 84 this.formModel = this.formData; 85 } 86 } 87 }; 88 </script> 89 90 <style lang="less" scoped> 91 .el-input { 92 width: 100% !important; 93 } 94 95 .el-select { 96 width: 100% !important; 97 } 98 </style>
筛选组件部分
1 <template> 2 <div id="filterGroup"> 3 <div class="filter-container" :class="{‘opened‘:open,‘big‘:open_btn_show}"> 4 <!-- 筛选项 --> 5 <el-form :inline="true" id="formBox" ref="filterForm"> 6 <el-form-item label="关键字:" v-if="filterOptions.search"> 7 <el-input v-popover:popover v-model="filterData.keyword" @keyup.enter.native="getFilterData()" placeholder="请输入关键字" clearable></el-input> 8 <el-popover ref="popover" placement="bottom" width="200" trigger="focus" popper-class="search-popover"> 9 <div v-if="search_list[0]"> 10 <p class="popover-title">支持的搜索条件</p> 11 <ul class="popover-list"> 12 <li class="popover-item" v-for="(item, index) in search_list" :key="index">{{item}}</li> 13 </ul> 14 </div> 15 <span v-else>暂无可搜索项</span> 16 </el-popover> 17 </el-form-item> 18 <el-form-item label="分类" v-if="filterOptions.classify"> 19 <el-select v-model="filterData.classify"> 20 <el-option v-for="(item,index) in classifyList" :key="item.value" :label="item.label" :value="item.value"></el-option> 21 </el-select> 22 </el-form-item> 23 <el-form-item label="年份" v-if="filterOptions.year"> 24 <el-select v-model="filterData.year"> 25 <el-option v-for="(item,index) in years" :key="index" :label="item" :value="item"></el-option> 26 </el-select> 27 </el-form-item> 28 <el-form-item label="影片推荐：" v-if="filterOptions.recommend"> 29 <el-cascader :options="recommendList" v-model="filterData.recommend" style="width:100%;"></el-cascader> 30 </el-form-item> 31 <el-form-item label="日期:" v-if="filterOptions.date_scope" class="date-filter"> 32 <el-date-picker 33 v-model="filterData.date_scope" 34 type="daterange" 35 align="right" 36 unlink-panels 37 range-separator="至" 38 start-placeholder="开始日期" 39 end-placeholder="结束日期" 40 format="yyyy-MM-dd" 41 value-format="yyyy-MM-dd" 42 ></el-date-picker> 43 </el-form-item> 44 <el-form-item :class="open_btn_show?‘btn‘:‘‘" v-if="!sure"> 45 <el-button type="primary" @click="getFilterData()">查 询</el-button> 46 <el-button 47 v-if="open_btn_show" 48 type="primary" 49 plain 50 @click="open = !open;btn_text = !open?‘展开‘:‘收起‘" 51 :icon="!open?‘el-icon-arrow-down‘:‘el-icon-arrow-up‘" 52 >{{btn_text}}</el-button> 53 </el-form-item> 54 <el-form-item v-else> 55 <el-button type="primary" @click="getFilterData()">确 定</el-button> 56 </el-form-item> 57 </el-form> 58 </div> 59 <!-- 筛选结果项 --> 60 <div class="filter-result-container" v-if="filter_arr[0]"> 61 <ul class="list"> 62 <li class="item filter-text"> 63 <i class="iconfont icon-filter"></i> 64 <span>检索项：</span> 65 </li> 66 <li class="item" v-for="item in filter_arr" :key="item.key" v-if="item.title"> 67 <el-tag :closable="canClearFilter !== false" size="small" class="tag" @close="closeTag(item)">{{`${item.title} : ${item.value}`}}</el-tag> 68 </li> 69 <li class="item filter-text clearAll" @click="closeAllTag" v-if="showClearAllBtn !== false">清空</li> 70 </ul> 71 </div> 72 </div> 73 </template> 74 75 <script> 76 // css 77 import "components/filterGroup/style.css"; 78 79 export default { 80 // 筛选项 81 name: "filterGroup", 82 data() { 83 return { 84 // 布局状态 85 menuType: 1, 86 contentWidthType: "流式", 87 isCollapse: false, // 导航是否折叠 88 open: false, 89 btn_text: "展开", 90 open_btn_show: false, 91 // 映射表 92 filterOptions: { 93 search: false, // 关键字搜索 94 classify: false, // 分类 95 year: false, // 年份 96 recommend: false, // 影片推荐 97 date_scope: false // 日期选择范围 98 }, 99 // 点击查询之后传到父级的筛选项数据 100 filterData: {}, 101 // 筛选项数组 102 filter_arr: [], 103 // 分类 104 classifyList: [], 105 // 年份 106 years: [], 107 // 影片推荐 108 recommendList: [] 109 }; 110 }, 111 props: { 112 // 筛选项配置 外部传入 113 filterList: Array, 114 search_list: Array, // 搜索框支持的搜索项 115 sure: true, 116 showClearAllBtn: true, // 是否显示清空按钮 117 canClearFilter: true // 是否能清除单个筛选 118 }, 119 watch: { 120 listenContentWidthType(newVal) { 121 this.contentWidthType = newVal; 122 this.showBtn(); 123 }, 124 listenMenuType(newVal) { 125 this.menuType = newVal; 126 this.showBtn(); 127 }, 128 listenMenuCollapse(newVal) { 129 this.isCollapse = newVal; 130 this.showBtn(); 131 } 132 }, 133 computed: { 134 listenContentWidthType() { 135 return this.$store.state.contentWidthType; 136 }, 137 listenMenuType() { 138 return this.$store.state.menuType; 139 }, 140 listenMenuCollapse() { 141 return this.$store.state.menuCollapse; 142 }, 143 role() { 144 return this.$store.state.role; 145 } 146 }, 147 created: function() { 148 // 匹配显示 149 for (let key in this.filterOptions) { 150 for (let k in this.filterList) { 151 if (this.filterList[k] == key) { 152 this.filterOptions[key] = true; 153 } 154 } 155 } 156 }, 157 mounted: function() { 158 const that = this; 159 // 首页带参数筛选 160 let default_filter = function() { 161 // 首页带参数的跳转 162 if (that.$route.query.show_filter === "1") { 163 if (that.open_btn_show) { 164 that.open = true; 165 that.btn_text = "收起"; 166 } 167 let homePageFilterObj = {}; 168 that.filterData = homePageFilterObj; 169 that.$emit("getFilterData", that.filterData); 170 that.initFilter(that.filterData); 171 } 172 }; 173 that.showBtn(default_filter); 174 }, 175 methods: { 176 // 判断是否需要显示展开收起按钮 177 showBtn: function(callback) { 178 // 加上300的延时 因为css切换的过渡时间是.3s 179 setTimeout(() => { 180 const formContainer = document.getElementById("formBox"); 181 this.open_btn_show = 182 formContainer.clientHeight > 50 ? true : false; 183 // 回调函数 184 callback && callback(); 185 }, 310); 186 }, 187 // 传递筛选数据 188 getFilterData() { 189 let obj = this.filterData; 190 for (let key in obj) { 191 if (obj[key] === "" || obj[key] === null) { 192 delete obj[key]; 193 } else { 194 if (key === "date_scope") { 195 // 拆分数组 196 const [exam_start_time, exam_end_time] = obj[key]; 197 Object.assign( 198 obj, 199 { exam_start_time }, 200 { exam_end_time } 201 ); 202 } 203 } 204 } 205 this.$emit("getFilterData", obj); 206 this.initFilter(obj); 207 }, 208 // 生成筛选项列表数据 209 initFilter: function(filterList = {}) { 210 const filter_list = filterList; 211 let arr = []; 212 for (let key in filter_list) { 213 if ( 214 filter_list[key] !== "" && 215 filter_list[key] !== undefined && 216 filter_list[key] !== null 217 ) { 218 arr.push({ 219 key: key, 220 title: this.filterMap(key, filter_list[key]).title, 221 value: this.filterMap(key, filter_list[key]).value 222 }); 223 } 224 } 225 this.filter_arr = arr; 226 }, 227 // 筛选项列表字典 228 filterMap: function(theKey = "", theValue) { 229 const key = theKey; 230 const val = theValue; 231 let item = {}; 232 switch (key) { 233 case "keyword": 234 item.title = "关键字"; 235 item.value = val; 236 break; 237 case "date_scope": 238 item.title = "日期"; 239 item.value = `${val[0]} - ${val[1]}`; 240 break; 241 default: 242 item = {}; 243 } 244 return item; 245 }, 246 // 筛选项字典内filter 247 arrayMapFilter: function(list = [], value) { 248 const arr = JSON.parse(JSON.stringify(list)); 249 let val = value; 250 arr.filter(el => { 251 if (el.id == val) { 252 val = el; 253 } 254 }); 255 return val; 256 }, 257 // 关闭筛选 258 closeTag: function(item) { 259 let key = item.key; 260 // 关联字段清除 261 if (item.key == "agent_id") { 262 // 263 } else { 264 delete this.filterData[key]; 265 } 266 this.getFilterData(); 267 }, 268 // 清空筛选 269 closeAllTag: function() { 270 this.filterData = {}; 271 this.getFilterData(); 272 } 273 } 274 }; 275 </script>
筛选项LESS
1 #filterGroup { 2 width: 100%; 3 background: #fff; 4 .filter-container { 5 width: 100%; 6 height: 41px; 7 overflow: hidden; 8 position: relative; 9 background: #fff; 10 #formBox { 11 overflow: hidden; 12 &.el-form--inline { 13 .el-form-item { 14 float: left; 15 margin-bottom: 0; 16 .el-form-item__label, 17 .el-form-item__content { 18 float: left; 19 } 20 &.date-filter { 21 .el-form-item__content { 22 width: auto; 23 } 24 } 25 } 26 .el-form-item__content { 27 vertical-align: middle; 28 width: 140px; 29 } 30 } 31 .btn { 32 position: absolute; 33 top: 0; 34 right: 0; 35 margin-right: 0; 36 .el-form-item__content { 37 width: auto; 38 } 39 } 40 } 41 &.big { 42 padding-right: 150px; 43 } 44 &.opened { 45 height: auto; 46 } 47 } 48 .filter-result-container { 49 width: 100%; 50 min-height: 36px; 51 margin-top: 0.3rem; 52 .list { 53 width: 100%; 54 height: 100%; 55 padding: 0 3px 3px 3px; // border: 1px solid #dcdfe6; 56 border-radius: 4px; 57 margin-top: 6px; 58 overflow: hidden; 59 .item { 60 float: left; 61 margin-right: 3px; 62 margin-top: 3px; 63 &:last-of-type { 64 margin-right: 0; 65 } 66 .tag { 67 display: block; 68 } 69 &.filter-text { 70 font-size: 14px; 71 color: #409eff; 72 height: 24px; 73 line-height: 22px; 74 } 75 &.clearAll { 76 cursor: pointer; 77 margin-left: 6px; 78 color: #888; 79 font-size: 12px; 80 } 81 } 82 } 83 } 84 }
render函数
1 export default { 2 name: ‘TableExpand‘, 3 functional: true, 4 props: { 5 row: Object, 6 render: Function, 7 index: Number, 8 column: { 9 type: Object, 10 default: null 11 } 12 }, 13 render: (h, ctx) => { 14 const params = { 15 row: ctx.props.row, 16 index: ctx.props.index 17 }; 18 if (ctx.props.column) params.column = ctx.props.column; 19 return ctx.props.render(h, params); 20 } 21 };
页面调用配置
<template>
<div id="classify_list">
<!-- 表格 -->
<baseTable
:theApi="table_ajax"
:table-config="configData.tableConfig"
:top-btn-config="configData.topBtnConfig"
:table-btn-config="configData.tableBtnConfig"
:other-config="configData.otherConfig"
:filter-config="configData.filterConfig"
:grid-edit-width="200"
form-title="分类"
form-width="60%"
:form-config="configData.formConfig"
:form-data="configData.formModel"
></baseTable>
</div>
</template>
<script>
// api
import * as theApi from "api/film/classify";
import baseTable from "components/baseTable";
export default {
data() {
return {
//表格配置
configData: {
// 其他配置
otherConfig: {
needSelect: true // 是否可以多选
},
// 表格数据配置
tableConfig: [
{ label: "ID", prop: "id", width: "70" },
{ label: "标题", prop: "title" },
{ label: "排序", prop: "sort", width: "60" }
],
// 表格内按钮配置
tableBtnConfig: {
width: 150, //宽度
update: true, // 编辑
delete: true // 删除
},
// 表格上方按钮配置
topBtnConfig: [
{
title: "添加分类",
icon: "el-icon-circle-plus"
}
],
// 筛选组件配置
filterConfig: {
filter_list: ["search"],
search_list: ["标题"]
},
// table的模态框表单配置，可配置表单类型，验证规则，是否必填,col-span布局可通过span参数配置
formConfig: [
{
span: 12,
label: "标题",
prop: "title",
type: "text",
rules: {
required: true,
message: "请输入标题",
trigger: "blur"
}
},
{
span: 12,
label: "排序",
prop: "sort",
type: "el-input-number",
rules: {
required: true,
message: "请输入排序",
trigger: "change"
}
}
],
// 表单基础数据类型，需要预先赋值
formModel: {
title: "",
sort: ""
}
},
// ajax
table_ajax: theApi
};
},
components: { baseTable }
};
</script>
自定义表格内render
{ { label: "国家", prop: "country", render: (h, params) => { return <span>{params.row.country.join(",")}</span>; } }
以上是关于element-ui dialog预定义的open 回调 怎么调用的主要内容，如果未能解决你的问题，请参考以下文章