使用element实现简单的table布局

首先第一步template中的文本写法

1. columns4 绑定的是表格头的数据 里面有几个属性 title（显示头的数据） key (对应的是表格头下面要显示的数据) align(对齐方式) width(宽度)

       <Table ref="selection"
             :columns="columns4"
             :data="recordDevicesList"
             style="min-width: 1116px;">
       </Table>

2. 关键代码如下

data() {
      return {
        columns4: [
          {
            title: '设备IP',
            key: 'ip',
            align: 'center',
            width: 140
          },
          {
            title: '设备编号',
            align: 'center',
            key: 'deviceId'
          },
          {
            title: '设备类型',
            align: 'center',
            key: 'type'
          },
          {
            title: '设备名称',
            align: 'center',
            key: 'name'
          },
          {
            title: '规格型号',
            align: 'center',
            key: 'version'
          },
          {
            title: '硬盘空间',
            align: 'center',
            key: 'totalSpace'
          },
          {
            title: '教室名称',
            align: 'center',
            key: 'roomName'
          },
          {
            title: '设备状态',
            align: 'center',
            key: 'status'
          },
          {
            title: '操作',
            key: 'operation',
            width: 180,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                params.row.type === '摄像头' || params.row.type === 'IP收录服务器' ? h(
                  'Button',
                  {
                    props: {
                      type: 'default',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        sessionStorage.setItem('equipmentid', JSON.stringify(params.row.deviceId))
                        this.$router.push({
                          path: '/equipment/equipmentlook'
                        })
                      }
                    }
                  },
                  '查看'
                ) : '',
                h(
                  'Button',
                  {
                    props: {
                      type: 'default',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        // this.show(params.index)
                        var data = {}
                        this.dataArr.filter(item => {
                          if (item['device-id'] === params.row.deviceId) {
                            data = item
                          }
                        })
                        this.edit(data)
                      }
                    }
                  },
                  '编辑'
                ),
                h(
                  'Button',
                  {
                    props: {
                      type: 'default',
                      size: 'small'
                    },
                    on: {
                      click: () => {
                        // this.remove(params.index)
                        // this.isShowDialog = true
                        // this.modalTitle = '删除用户'
                        // this.modalContent = '确定删除该用户信息？'
                        this.$Modal.confirm({
                          title: '删除设备',
                          closable: true,
                          width: 400,
                          content: '确定删除该设备？',
                          onOk: () => {
                            this.$axios.delete(`/devices/${params.row.deviceId}`)
                              .then(res => {
                                this.getRecordDevicesList()
                              })
                          },
                          onCancel: () => {
                          }
                        })
                      }
                    }
                  },
                  '删除'
                )
              ])
            }
          }
        ],
        recordDevicesList: [],

        newUser: {
          // 添加用户表单字段
          userName: '',
          phone: '',
          sex: '',
          institue: '',
          role: '',
          jobYear: '',
          accountNo: '',
          pwd: '',
          confirmPwd: ''
        },
        isShowDialog: false, // 是否显示弹窗
        showMoreSearchOption: false, // 是否显示更多查询条件
        modalTitle: '', // 弹窗标题
        modalContent: '', // 弹窗文本
        dropInAct: false, // 拖拽框是否高亮
        files: [], // 已上传的文件列表
        equipmentTypes: [{
          value: 0,
          name: '录播设备'
        }, {
          value: 1,
          name: '导播设备'
        }, {
          value: 2,
          name: '非编设备'
        }, {
          value: 3,
          name: '摄像头'
        }, {
          value: 4,
          name: '服务器'
        }, {
          value: 5,
          name: 'IP收录服务器'
        }],
        privilegesTreeShow: false,
        addChooseRoomId: '',
        current: 1, // 位于第几页
        count: 100,
        pageSize: 10,
        dataArr: []
      }
    },
    methods:{
    // 数据解析
		this.recordDevicesList = res.data.map(u => ({
            ip: u['ip'],
            deviceId: u['device-id'],
            name: u.name,
            totalSpace: u['available-space'] + '/' + u['total-space'],
            version: u.version,
            // roomName: u.classrooms[0]['classrooms'],
            type: u['type'],
            status: u.status === 0 ? '未使用' : '正在使用'
          }))
   }