基于element-ui的后台系统表格dialog筛选自定义按钮分页的一次性封装

Posted 2021-11-25 chenzeyongjsj

暂未剔除部分业务代码，初版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>;
                        }
                    }