暂未剔除部分业务代码，初版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>;
}
}
原文地址：https://www.cnblogs.com/chenzeyongjsj/p/10635977.html
时间： 2024-10-11 10:30:13