+ 
+ 组件使用
+
+
+ 组件使用
+
+
+
+
+
+ For a guide and recipes on how to configure / customize this project,
+ check out the
+ vue-cli documentation.
+
+ 组件使用
+ dialogTitle,为比必填。不传默认显示"请填入标题"
+ + <el-button @click="centervisible = true">点击打开dialog</el-button> + <BaseDialog + dialogTitle="新增" + :dialogVisible="centervisible" + :close-on-click-modal="false" + @cancel="handleCancel" + @confirm="handleConfirm" + :before-close="handleCancel" + > + <span + >基本用法-默认底部按钮是确定。不能通过点击 modal 关闭 Dialog</span + > + </BaseDialog> ++
btnTextStyle，用法见如下：
+ + <el-button @click="centervisible1 = true">点击打开dialog</el-button> + <BaseDialog + dialogTitle="编辑" + :dialogVisible="centervisible1" + :before-close="handleCancel" + > + <span>修改底部按钮为保存</span> + <el-row slot="footer" type="flex" justify="end"> + <el-col :span="12"> + <el-button size="small" class="btnTextStyle" @click="handleCancel1">取消</el-button> + <el-button type="primary" size="small" class="btnTextStyle" @click="handleConfirm1"> + 保存 + </el-button> + </el-col> + </el-row> + </BaseDialog> ++
dialogbody的内容到footer的button的距离为40px
+ + <el-button @click="centervisible = true">点击打开dialog</el-button> + <BaseDialog + dialogTitle="信息填写" + :dialogVisible="centervisible2" + @cancel="handleCancel2" + @confirm="handleConfirm2" + :before-close="handleCancel2" + > + <demoSlotVue ref="accountList" /> // demoSlotVue是自己写的业务组件 + </BaseDialog> ++
+ 组件包目前封装常用的四个组件:表格，搜索区域，分页，对话框。包npm地址为：https://www.npmjs.com/package/code-brick-zj。 +
+文档当前使用的组件包的版本为：0.0.3
+tableProps的subcomponent上渲染input组件.
+ @emitFun="inputChange"
+ + <template> + <base-table + border + :table-props="tableProps" + :table-data="tableData" + @emitFun="inputChange" + /> + </template> + <script> + const tableProps = [ + { + prop: 'testItems', + label: '检验项目' + }, + { + prop: 'checkPoint', + label: '检测点' + }, + { + prop: 'inspectionStandards', + label: '检验标准' + }, + { + prop: 'measuredValue', + label: '实测值', + subcomponent: inputArea + }, + { + prop: 'samplingResults', + label: '抽检结果', + subcomponent: inputArea + }, + { + prop: 'remark', + label: '备注', + subcomponent: inputArea + } + ] + export default { + data() { + return { + tableProps, + tableData: [ + { + id: 1, + testItems: '研磨幅', + checkPoint: '左端点1', + inspectionStandards: '0.1-0.4', + measuredValue: '', + samplingResults: '', + remark: '' + }, + { + id: 2, + testItems: '研磨幅', + checkPoint: '左端点2', + inspectionStandards: '0.1-0.4', + measuredValue: '', + samplingResults: '', + remark: '' + }, + { + id: 3, + testItems: '研磨幅', + checkPoint: '右端点1', + inspectionStandards: '0.1-0.4', + measuredValue: '', + samplingResults: '', + remark: '' + }, + { + id: 4, + testItems: '研磨幅', + checkPoint: '右端点2', + inspectionStandards: '0.1-0.4', + measuredValue: '', + samplingResults: '', + remark: '' + } + ] + } + } + } + </script> ++
tableProps的subcomponent上渲染input组件
+ :add-button-show="addButtonShow" @emitFun="inputChange"
+ @emitButtonClick="emitButtonClick"
+ + <template> + <base-table + border + :table-props="tableProps" + :table-data="tableData" + @emitFun="inputChange" + /> + </template> + <script> + const tableProps = [ + { + prop: 'testItems', + label: '检验项目', + subcomponent: inputArea + }, + { + prop: 'checkPoint', + label: '检测点', + subcomponent: inputArea + }, + { + prop: 'inspectionStandards', + label: '检验标准', + subcomponent: inputArea + } + ] + export default { + data() { + return { + tableProps, + tableData: [ + { + id: 1, + testItems: '研磨幅', + checkPoint: '左端点1', + inspectionStandards: '0.1-0.4' + }, + { + id: 2, + testItems: '研磨幅', + checkPoint: '左端点2', + inspectionStandards: '0.1-0.4' + }, + { + id: 3, + testItems: '研磨幅', + checkPoint: '右端点1', + inspectionStandards: '0.1-0.4' + }, + { + id: 4, + testItems: '研磨幅', + checkPoint: '右端点2', + inspectionStandards: '0.1-0.4' + } + ], + addButtonShow: '新增' + } + }, + methods: { + inputChange(val) { + console.log('=======') + console.log(val) + this.tableData[val._pageIndex - 1][val.prop] = val[val.prop] + console.log(this.tableData) + }, + inputChange2(val) { + console.log('=======') + console.log(val) + this.tableData2[val._pageIndex - 1][val.prop] = val[val.prop] + console.log(this.tableData2) + }, + emitButtonClick() { + console.log('emitButtonClick') + let obj = {} + for (let i of this.tableProps2) { + obj[i.prop] = '' + } + this.tableData2.push(obj) + } + } + } + </script> ++
+ <template> + <base-table + :table-props="tableProps" + :table-data="tableData" + :page="1" + :limit="20" + /> + </template> + <script> + const tableProps = [ + { + prop: 'equipmentName', + label: '设备名称' + }, + { + prop: 'lineA', + label: '有效时间(h)', + children: [ + { + prop: 'workTime', + label: '工作时长' + }, + { + prop: 'workTimeRate', + label: '工作时长比率' + } + ] + }, + { + prop: 'lineB', + label: '关机时间(h)', + children: [ + { + prop: 'downTime', + label: '停机时长' + }, + { + prop: 'downTimeRate', + label: '停机时长比率' + } + ] + }, + { + prop: 'lineC', + label: '中断损失', + children: [ + { + prop: 'faultTime', + label: '故障时长' + }, + { + prop: 'faultTimeRate', + label: '故障时长比率' + } + ] + }, + { + prop: 'lineD', + label: '速度损失', + children: [ + { + prop: 'actualProcessingSpeed', + label: '实际加工速度' + }, + { + prop: 'theoreticalProcessingSpeed', + label: '理论加工速度' + }, + { + prop: 'speedActuationRate', + label: '速度开动率' + } + ] + } + ] + export default { + mounted() { + this.tableData = [ + { + equipmentName: '设备1', + workTime: 100, + workTimeRate: 0.5, + downTime: 5, + downTimeRate: 0.02, + faultTime: 0, + faultTimeRate: 0, + actualProcessingSpeed: 10, + theoreticalProcessingSpeed: 10, + speedActuationRate: 0.3 + }, + { + equipmentName: '设备2', + workTime: 100, + workTimeRate: 0.5, + downTime: 5, + downTimeRate: 0.02, + faultTime: 0, + faultTimeRate: 0, + actualProcessingSpeed: 10, + theoreticalProcessingSpeed: 10, + speedActuationRate: 0.3 + }, + { + equipmentName: '设备3', + workTime: 100, + workTimeRate: 0.5, + downTime: 5, + downTimeRate: 0.02, + faultTime: 0, + faultTimeRate: 0, + actualProcessingSpeed: 10, + theoreticalProcessingSpeed: 10, + speedActuationRate: 0.3 + } + ] + } + } + <script> ++
+ <template> + <base-table + :table-props="tableProps" + :table-data="tableData" + :page="1" + :limit="20" + /> + </template> + <script> + const tableProps = [ + { + prop: 'equipmentName', + label: '设备名称' + }, + { + prop: 'lineA', + label: '有效时间(h)', + children: [ + { + prop: 'workTime', + label: '工作时长', + subcomponent: demo2Sub + }, + { + prop: 'workTimeRate', + label: '工作时长比率' + } + ] + }, + { + prop: 'lineB', + label: '关机时间(h)', + children: [ + { + prop: 'downTime', + label: '停机时长' + }, + { + prop: 'downTimeRate', + label: '停机时长比率' + } + ] + }, + { + prop: 'lineC', + label: '中断损失', + children: [ + { + prop: 'faultTime', + label: '故障时长' + }, + { + prop: 'faultTimeRate', + label: '故障时长比率' + } + ] + }, + { + prop: 'lineD', + label: '速度损失', + children: [ + { + prop: 'actualProcessingSpeed', + label: '实际加工速度' + }, + { + prop: 'theoreticalProcessingSpeed', + label: '理论加工速度' + }, + { + prop: 'speedActuationRate', + label: '速度开动率' + } + ] + } + ] + export default { + mounted() { + this.tableData = [ + { + equipmentName: '设备1', + workTime: 100, + workTimeRate: 0.5, + downTime: 5, + downTimeRate: 0.02, + faultTime: 0, + faultTimeRate: 0, + actualProcessingSpeed: 10, + theoreticalProcessingSpeed: 10, + speedActuationRate: 0.3 + }, + { + equipmentName: '设备2', + workTime: 100, + workTimeRate: 0.5, + downTime: 5, + downTimeRate: 0.02, + faultTime: 0, + faultTimeRate: 0, + actualProcessingSpeed: 10, + theoreticalProcessingSpeed: 10, + speedActuationRate: 0.3 + }, + { + equipmentName: '设备3', + workTime: 100, + workTimeRate: 0.5, + downTime: 5, + downTimeRate: 0.02, + faultTime: 0, + faultTimeRate: 0, + actualProcessingSpeed: 10, + theoreticalProcessingSpeed: 10, + speedActuationRate: 0.3 + } + ] + } + } + <script> ++
+ <template> + <base-table + :table-props="tableProps" + :table-data="tableData" + :page="1" + :limit="20" + /> + </template> + <script> + export default { + methods: { + getData() { + let aa = [] + let moreData = [ + { + process: '综合', + data: [ + { + equipmentName: '上片投入数量', + data: aa + }, + { + equipmentName: '机器人投入数', + data: aa + }, + { + equipmentName: '良品总投入数', + data: aa + }, + { + equipmentName: '工序损耗', + data: aa + } + ] + }, + { + process: '上片', + data: [ + { + equipmentName: '上片损失', + data: aa + } + ] + }, + { + process: '精切', + data: [ + { + equipmentName: '精切损失', + data: aa + }, + { + equipmentName: '精切抽检', + data: aa + } + ] + } + ] + for (let i = 0; i < 30; i++) { + let a = { + time: '2022-11-' + i, + eqCT: 0.01, + eqTT: 0.62, + lineCT: 0.73, + lineTT: 0.45 + } + aa.push(a) + } + this.numArr = [] + let num = 0 + const tableConfig = [] + this.chartDataArr = [] + const dataArr = moreData.map((item, index) => { + let dataArr = [] + if (item.data) { + this.chartDataArr = this.chartDataArr.concat(item.data) + num += item.data.length + this.numArr.push(num) + dataArr = item.data.map((z, idx) => { + const dataArr = {} + z.data.forEach((i) => { + // 动态生成tableConfig + if (index === 0 && idx === 0) { + tableConfig.push({ + label: i.time, + prop: i.time, + children: [ + { prop: i.time + 'eqCT', label: '设备CT' }, + { prop: i.time + 'eqTT', label: '设备TT' }, + { prop: i.time + 'lineCT', label: '产线CT' }, + { + prop: i.time + 'lineTT', + label: '产线TT', + subcomponent: demo3Sub + } + ] + }) + } + // 合并数据集 + dataArr[i.time + 'eqCT'] = i.eqCT + dataArr[i.time + 'eqTT'] = i.eqTT + dataArr[i.time + 'lineCT'] = i.lineCT + dataArr[i.time + 'lineTT'] = i.lineTT + dataArr.process = item.process + dataArr.equipmentName = z.equipmentName + }) + console.log(dataArr) + return dataArr + }) + } + return dataArr + }) + console.log(tableConfig) + this.trueTableProps = this.tableProp2.concat(tableConfig) + console.log(this.trueTableProps) + this.tableData = this.flatten(dataArr) + console.log(this.tableData) + }, + // tree->[] + flatten(arr) { + var res = [] + for (var i = 0; i < arr.length; i++) { + if (Array.isArray(arr[i])) { + res = res.concat(this.flatten(arr[i])) + } else { + res.push(arr[i]) + } + } + return res + }, + spanMethod({ rowIndex, columnIndex }) { + if (columnIndex === 1) { + if (rowIndex === 0) { + return [this.numArr[0], 1] + } else if (this.numArr.indexOf(rowIndex) >= 0) { + const rowNum = + this.numArr[this.numArr.indexOf(rowIndex) + 1] - + this.numArr[this.numArr.indexOf(rowIndex)] + return [rowNum, 1] + } else { + return [0, 0] + } + } + } + } + } + <script> ++
+ <template> + <pagination :limit="20" :total="100" /> + </template> ++
+ <template> + <pagination :limit="3" :total="10" layout="total, prev, pager, next" /> + </template> ++
+ <template> + <pagination :limit="20" :total="total" /> + </template> ++
+ <template> + <pagination + :limit.sync="listQuery.size" + :page.sync="listQuery.current" + :total="200" + @pagination="getList" + /> + </template> ++
+ <template> + <pagination :limit="20" :total="100" :background="true" /> + </template> ++
page和limit两个参数加上可以给表格第一列加上序号，
+ 第一列的图标可以控制表格列的显示和隐藏。序号列的宽度可以自定义，默认为70，参数为pageWidth,类型为Number
+ + <template> + <base-table + :table-props="tableProps" + :page="1" + :limit="20" + :table-data="tableData" + /> + </template> + <script> + const tableProps = [ + { + prop: 'date', + label: '日期' + }, + { + prop: 'name', + label: '姓名' + }, + { + prop: 'sex', + label: '性别' + }, + { + prop: 'age', + label: '年龄' + }, + { + prop: 'address', + label: '地址' + } + ] + export default { + data() { + return { + tableProps, + tableData: [{ + date: '2016-05-02', + name: '王小虎', + sex: '男', + age: 18, + address: '上海市普陀区金沙江路 1518 弄' + }, + { + date: '2016-05-04', + name: '王小虎', + sex: '男', + age: 18, + address: '上海市普陀区金沙江路 1517 弄' + }, + { + date: '2016-05-01', + name: '王小虎', + sex: '男', + age: 18, + address: '上海市普陀区金沙江路 1519 弄' + }, + { + date: '2016-05-03', + name: '王小虎', + sex: '男', + age: 18, + address: '上海市普陀区金沙江路 1516 弄' + }] + } + } + } + </script> ++
stripe属性可以创建带斑马纹的表格。它接受一个
+ Boolean，默认为false，
+ 设置为true即为启用。默认情况下，Table
+ 组件是不具有竖直方向的边框的，如果需要，可以使用border属性，它接受一个Boolean，设置为true即可启用。
+ + <template> + <base-table + :table-props="tableProps" + :page="1" + :limit="20" + :table-data="tableData" + stripe + border + /> + </template> ++
row-class-name
+ 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。
+ + <template> + <base-table + :table-props="tableProps" + :table-data="tableData" + :row-class-name="tableRowClassName" + :page="1" + :limit="20" + /> + </template> + <style> + .el-table .warning-row { + background: oldlace; + } + + .el-table .success-row { + background: #f0f9eb; + } + </style> + <script> + export default { + methods: { + tableRowClassName({row, rowIndex}) { + if (rowIndex === 1) { + return 'warning-row'; + } else if (rowIndex === 3) { + return 'success-row'; + } + return ''; + } + } + } + <script> ++
el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。
+ 固定列需要使用fixed属性，它接受Boolean值或者leftright，表示左边固定还是右边固定。
+ 默认情况下若内容过多会折行显示，若需要单行显示可以使用showOverflowtooltip属性，它接受一个Boolean，为true时多余的内容会在
+ hover 时以 tooltip 的形式显示出来。
+ + <template> + <base-table + :table-props="tableProps" + :table-data="tableData" + :page="1" + :limit="20" + style="width: 800px" + height="150" + /> + </template> + <script> + const tableProps = [ + { + prop: 'date', + label: '日期', + fixed: true, + width: '200' + }, + { + prop: 'name', + label: '姓名', + width: '200' + }, + { + prop: 'sex', + label: '性别', + width: '200' + }, + { + prop: 'age', + label: '年龄', + width: '200' + }, + { + prop: 'address', + label: '地址', + showOverflowtooltip: true + } + ] + export default { + data() { + return { + tableProps, + tableData: [{ + date: '2016-05-02', + name: '王小虎', + sex: '男', + age: 18, + address: '上海市普陀区金沙江路 1518 弄' + }, + { + date: '2016-05-04', + name: '王小虎', + sex: '男', + age: 18, + address: '上海市普陀区金沙江路 1517 弄' + }, + { + date: '2016-05-01', + name: '王小虎', + sex: '男', + age: 18, + address: '上海市普陀区金沙江路 1519 弄' + }, + { + date: '2016-05-03', + name: '王小虎', + sex: '男', + age: 18, + address: '上海市普陀区金沙江路 1516 弄' + }] + } + } + } + </script> ++
当数据量动态变化时，可以为 Table 设置一个最大高度。
+page和limit两个参数加上可以给表格第一列加上序号，
+ 第一列的图标可以控制表格列的显示和隐藏。序号列的宽度可以自定义，默认为70，参数为pageWidth,类型为Number
+ + <template> + <base-table + :table-props="tableProps" + :page="1" + :limit="20" + :table-data="tableData" + max-height="150" + /> + </template> ++
highlight-current-row属性即可实现单选。
+ 之后由current-change事件来管理选中时触发的事件，它会传入currentRow，oldCurrentRow。
+ + <template> + <base-table + :table-props="tableProps" + :table-data="tableData" + :page="1" + :limit="20" + highlight-current-row + @current-change="handleCurrentChange" + /> + </template> ++
+ 在base-table上监听事件selection-change @selection-change="selectChange" +
+selectWidth的宽度就可以,之后由selection-change来管理事件。
+ + <template> + <base-table + :table-props="tableProps" + :table-data="tableData" + :selectWidth="55" + :page="1" + :limit="20" + @selection-change="selectChange" + /> + </template> ++
+ 在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。其他排序暂不支持 +
+subcomponent来加载模板组件
+ + <template> + <base-table :table-props="tableProps" :table-data="tableData" /> + </template> + <script> + const tableProps = [ + { + prop: 'date', + label: '日期' + }, + { + prop: 'name', + label: '姓名', + subcomponent: demo1Sub + }, + { + prop: 'sex', + label: '性别' + }, + { + prop: 'age', + label: '年龄' + }, + { + prop: 'address', + label: '地址' + } + ] + export default { + data() { + return { + tableProps, + tableData: [{ + date: '2016-05-02', + name: '王小虎', + sex: '男', + age: 18, + address: '上海市普陀区金沙江路 1518 弄' + }, + { + date: '2016-05-04', + name: '王小虎', + sex: '男', + age: 28, + address: '上海市普陀区金沙江路 1517 弄' + }, + { + date: '2016-05-01', + name: '王小虎', + sex: '男', + age: 19, + address: '上海市普陀区金沙江路 1519 弄' + }, + { + date: '2016-05-03', + name: '王小虎', + sex: '男', + age: 31, + address: '上海市普陀区金沙江路 1516 弄' + }] + } + } + } + </script> + 附上demo1Sub的代码 + <template> + <div> + <el-tag size="medium">'{'{ + injectData.name + }'}'</el-tag> + </div> + </template> + <script> + export default { + name: 'demo1Sub', + props: { + injectData: { + type: Object, + default: () => ({}) + } + } + } + </script> ++
+ 详情--detail 编辑---edit + 删除---delete,以上三个是显示图标，其他按钮显示中文字字，图标按上述传，自动加载图标。 +
+method-btn加载操作列按钮组件
+ + <template> + <base-table :table-props="tableProps" :table-data="tableData" > + <method-btn + v-if="tableBtn.length" + slot="handleBtn" + :width="200" + label="操作" + :method-list="tableBtn" + @clickBtn="handleClick" + /> + </base-table> + </template> + <script> + const tableProps = [ + { + prop: 'date', + label: '日期' + }, + { + prop: 'name', + label: '姓名', + }, + { + prop: 'sex', + label: '性别' + }, + { + prop: 'age', + label: '年龄' + }, + { + prop: 'address', + label: '地址' + } + ] + export default { + data() { + return { + tableProps, + tableData: [{ + date: '2016-05-02', + name: '王小虎', + sex: '男', + age: 18, + address: '上海市普陀区金沙江路 1518 弄' + }, + { + date: '2016-05-04', + name: '王小虎', + sex: '男', + age: 28, + address: '上海市普陀区金沙江路 1517 弄' + }, + { + date: '2016-05-01', + name: '王小虎', + sex: '男', + age: 19, + address: '上海市普陀区金沙江路 1519 弄' + }, + { + date: '2016-05-03', + name: '王小虎', + sex: '男', + age: 31, + address: '上海市普陀区金沙江路 1516 弄' + }] + } + } + } + </script> + 附上tableBtn的代码 + const tableBtn = [ + { + type: 'start', + btnName: '开始', + showParam: { + type: '&', + data: [ + { + type: 'more', + name: 'age', + value: 19 + }, + { + type: 'less', + name: 'age', + value: 30 + } + ] + } + }, + { + type: 'end', + btnName: '结束', + showParam: { + type: '&', + data: [ + { + type: 'more', + name: 'age', + value: 19 + }, + { + type: 'less', + name: 'age', + value: 30 + } + ] + } + }, + { + type: 'detail', + btnName: '详情' + }, + { + type: 'edit', + btnName: '编辑', + showParam: { + type: '&', + data: [ + { + type: 'more', + name: 'age', + value: 19 + }, + { + type: 'less', + name: 'age', + value: 30 + } + ] + } + }, + { + type: 'delete', + btnName: '删除' + } + ] ++
row 中包含
+ children
+ 字段时，被视为树形数据。渲染树形数据时，必须要指定
+ row-key。
+ + <template> + <base-table + :table-props="tableProps" + :table-data="tableData4" + row-key="id" + :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" + /> + </template> + <script> + this.tableData4 = [ + { + id: 1, + date: '2016-05-02', + name: '王小虎', + address: '上海市普陀区金沙江路 1518 弄' + }, + { + id: 2, + date: '2016-05-04', + name: '王小虎', + address: '上海市普陀区金沙江路 1517 弄' + }, + { + id: 3, + date: '2016-05-01', + name: '王小虎', + address: '上海市普陀区金沙江路 1519 弄', + children: [ + { + id: 31, + date: '2016-05-01', + name: '王小虎', + address: '上海市普陀区金沙江路 1519 弄', + children: [ + { + id: 311, + date: '2016-05-01', + name: '王小虎', + address: '上海市普陀区金沙江路 1519 弄' + }, + { + id: 321, + date: '2016-05-01', + name: '王小虎', + address: '上海市普陀区金沙江路 1519 弄' + } + ] + }, + { + id: 32, + date: '2016-05-01', + name: '王小虎', + address: '上海市普陀区金沙江路 1519 弄' + } + ] + }, + { + id: 4, + date: '2016-05-03', + name: '王小虎', + address: '上海市普陀区金沙江路 1516 弄' + } + ]) + export default {} + <script> ++
+ <template> + <base-table :table-props="tableProps" :table-data="tableData" :page="1" :limit="20"/> + </template> + <script> + const tableProps = [ + { + prop: 'date', + label: '日期' + }, + { + prop: 'name', + label: '姓名' + }, + { + prop: 'sex', + label: '性别' + }, + { + prop: 'record', + label: '历史记录', + subcomponent: InnerTable + }, + { + prop: 'address', + label: '地址' + } + ] + export default { + data() { + return { + tableProps, + tableData: [ + { + id: 1, + date: '2016-05-02', + name: '王小虎', + sex: '男', + record: 18, + address: '上海市普陀区金沙江路 1518 弄' + }, + { + id: 2, + date: '2016-05-04', + name: '王小虎', + sex: '男', + record: 18, + address: '上海市普陀区金沙江路 1517 弄' + }, + { + id: 3, + date: '2016-05-01', + name: '王小虎', + sex: '男', + record: 18, + address: '上海市普陀区金沙江路 1519 弄' + }, + { + id: 4, + date: '2016-05-03', + name: '王小虎', + sex: '男', + record: 18, + address: '上海市普陀区金沙江路 1516 弄' + } + ]) + } + } + } + </script> + 附上demo1Sub的代码 + <template> + <div> + <el-tag size="medium">'{'{ + injectData.name + }'}'</el-tag> + </div> + </template> + <script> + export default { + name: 'demo1Sub', + props: { + injectData: { + type: Object, + default: () => ({}) + } + } + } + </script> ++