本人第一次写这个 写的不好还望指出来
作为一个由于公司产品的升级然促使我从一个后端人员自学变成前端的开发人员 ！
公司做的数据管理系统所以离不开表格了 然后表格样式统一啥的就想到封装一个element-ui 里面的table+Pagination了
效果图
表格组件的引入与使用
<com-table title="监测数据" v-model="tableData4" @selection-change="handleSelectionChange"> <template> <el-table-column type="selection"> </el-table-column> <el-table-column prop="name" label="表格名称"> </el-table-column> <el-table-column label="测点"> <template slot-scope="scope" v-if="scope.row.point.visible"> <el-input v-model="scope.row.point.value" placeholder="请输入内容" @focus="focuspoint(scope.row.point)"></el-input> </template> </el-table-column> <el-table-column label="项目"> <template slot-scope="scope" v-if="scope.row.item.visible"> <el-input v-model="scope.row.item.value" placeholder="请输入内容" @focus="focusitem(scope.row.item)"></el-input> </template> </el-table-column> </template> </com-table>
使用插槽slot 使用起来就和原来的table一样了
import comTable from '@/components/common/com-table' import { GetTempletExportList, GetTempletExportInfo } from '../../../api/transfer/index' import ApiConfig from '@/api/ApiConfig' export default { name: 'templet', components: { comTable }, data() { return { tableData4: [], exporttableData: [], multipleSelection: [], currentpoint: null, currentitem: null, itemdialogshow: false, pointdialogshow: false, path: new ApiConfig().GetConfig().SysPath, checkeditem: [],//选中数据 } }, computed: { moduletype() { return this.$store.state.moduletype; }, userinfo() { return this.$store.state.user.userInfo; } }, watch: { moduletype() { this.init(); } }, created() { this.init(); }, methods: { init() { GetTempletExportList(this.userinfo.cityid, this.moduletype).then(re => { this.exporttableData = re.data; this.tableData4 = []; re.data.map(item => { this.tableData4.push({ name: item.fldTableDesc, point: { visible: false, value: '' }, item: { visible: true, value: item.ItemList } }) }) }, (error) => { this.$message({ customClass: 'el-message_new', message: error, type: 'error' }); }) }, handleSelectionChange(val) { console.log(val) this.multipleSelection = val; }, focuspoint(val) { this.currentpoint = val; }, focusitem(val) { this.currentitem = val; this.itemdialogshow = true; }, itemconfirm() { this.itemdialogshow = !this.itemdialogshow; }, itemhandleClose(done) { this.itemdialogshow = false; }, ItemGroupSelectchange(val) { this.checkeditem = val; console.log(this.checkeditem); let groupitemcontent = []; val.map(item => { groupitemcontent.push(item.fldItemName); }) this.currentitem.value = groupitemcontent.join(','); }, submit() { if (this.multipleSelection.length > 0) { let message = ""; let data = []; let name = ""; this.multipleSelection.map((item, index) => { name = item.name; let str = item.name; let info = false; if (item.item.visible && item.item.value == "") { message += `表[${str}]请选择因子`; info = true; } if (item.point.visible && item.point.value == "") { if (info) { message += `、请选择测点/断面！`; } else { message += `表[${str}]请选择测点/断面！`; } info = true; } if (info) { message += "<br/>" } data.push({ "AutoID": "1", "STCode": "", "PCode": "", "RCode": "", "RScode": "", "GDCODE": "", "type": this.moduletype, "itemcodeList": item.item.value.split(',').join('^'), "path": `${this.path.TempletExportSetting}${this.moduletype}.json`, "IsNeedNullData": "Y" }) }) if (message == "") { GetTempletExportInfo(data).then(re => { if (re.status == "ok") { var exportdata = eval((re.data)); const { export_json_to_excel } = require("../../../libs/Export2Excel"); if (exportdata[0].merg.length != 0) { var exdata = []; var itemlistUnit = []; var itemlistfldCharCode = []; for (var z = 0; z < exportdata[0].head.length - this.checkeditem.length; z++) { itemlistUnit.push(exportdata[0].head[z]); itemlistfldCharCode.push(exportdata[0].head[z]) } this.checkeditem.map(item => { itemlistUnit.push(item.fldUnit); itemlistfldCharCode.push(item.fldCharCode); }) var exdata = this.formatJson(exportdata[0].head, exportdata[0].data); exdata.unshift(itemlistUnit); exdata.unshift(itemlistfldCharCode); exdata.unshift(exportdata[0].head); console.log(exdata) exportdata[0].merg.push([0, 0, exportdata[0].head.length - 1, 0]) export_json_to_excel([name], exdata, name, exportdata[0].merg); } else { var exdata = this.formatJson(exportdata[0].head, exportdata[0].data); exdata.unshift(exportdata[0].head); exportdata[0].merg.push([0, 0, exportdata[0].head.length - 1, 0]) export_json_to_excel([name], exdata, name, exportdata[0].merg); } } else { this.$message({ message: '导出失败！', type: 'error' }); } }) } else { this.$message({ dangerouslyUseHTMLString: true, customClass: 'el-message_new', message: message, type: 'warning' }); } } else { this.$message({ customClass: 'el-message_new', message: '请先选择要导出的列表！', type: 'warning' }); } }, formatJson(filterVal, jsonData) { return jsonData.map(v => filterVal.map(j => { return v[j]; }) ); } } }
comTable组件