在vue项目中,如果使用了Element-ui框架,我们会经常使用到Table表格组件.
在vue中重复出现的,我们可以封装成为一个公共组件.那么今天我们就将它封装成可复用的组件吧!
本次封装组件中,用到知识点有父子组件传值,三元表达式.
1. 第一步
在vue公共文件夹中,创建一个公共组件vue文件.也是子组件.
<!-- 被封装的子组件 --><template><el-table :data="tableData2" stripe :border="obj.border?false:true"><el-table-column v-if="obj.selection?obj.selection:false" type="selection" width="40"></el-table-column><el-table-columnv-if="obj.index?obj.index:false"type="index":index="indexMethod"label="序号"width="50"></el-table-column><el-table-column:prop="item.prop"v-for="item in obj.formList":key="item.label":label="item.label":width="item.width"></el-table-column><el-table-column v-if="obj.operationList" label="操作"><template slot-scope="scope"><el-buttonv-for="ope in obj.operationList":key="ope.label":size="ope.size?ope.size:'mini'":type="ope.type"@click="btn(scope.row,ope.name)">{{ope.name}}</el-button></template></el-table-column></el-table></template><script>export default {data() {return {pageSize: 15, // 每页条数};},props: {tableData2: {// 父组件传过来的数组type: Array,},obj: {// 父组件传过来的对象type: Object,},},methods: {indexMethod(index) {// 序号return (this.obj.pageNum - 1) * this.pageSize + index + 1;},btn(item, msg) {// 子组件通过点击事件向父组件传值,触发父组件事件this.$emit("btn", item, msg);},},};</script>
2. 第二步
在需要使用的页面(父组件)中引入,被封装的组件(子组件)
<!-- 父组件 --><template><form-data :tableData2="tableData2" :obj="obj" @btn="deleteSystemUser" /></template><script>import formData from "../../../common/module/from.vue";export default {components: {formData },data() {return {obj: {selection: true, // 是否有选中框index: true, // 是否有序号pageNum:1, // 页码formList: [{label: "设备名称",prop: "comments",width: "200",},{label: "时间",prop: "date",width: "200",},{label: "tsp",prop: "tsp",width: "120",},{label: "pm10",prop: "pm10",width: "120",},{label: "pm2.5",prop: "pm25",width: "120",},{label: "噪音",prop: "noise",width: "120",},{label: "温度",prop: "temperature",width: "120",},{label: "湿度",prop: "humidity",width: "120",},{label: "风速",prop: "windSpeed",width: "120",},{label: "气压",prop: "airPressure",width: "120",},],operationList: [// 操作按钮{name: "处理",type: "success",},],},url: "",projectId: "", // 项目idtableData2: [], // 添加人员列表数据pageSize: 15, // 摄像头列表每页条数pageNum: 1, // 摄像头列表当前页pageTotal: 2, // 摄像头列表总条数};},},};</script>
