ElementUI 使用Table组件,绘制一个二维表格

先上图看一下效果

 表格的横坐标 显示不同的人员,表格纵坐标显示标签类型,数据是 人员与标签类型一一对应,展示这个人分别绘制了不同类型标签的数量。

分析:按照table 组件的官网老实本分的用法是不行了,所以我们需要两个数组去完成这个效果。

                        <el-table
                            v-if="!peopleTagNumLoading"
                            ref="refreshTable"
                            :data="createList"
                            :header-cell-style="{color: '#6C7293'}"
                            style="width: 100%;"
                            align='center'
                        >
                           <el-table-column label="标签/人员" prop="categoryName"></el-table-column>
                            <el-table-column label="人员" align="center">
                                <el-table-column
                                    v-for="item in peopleList"
                                    align="center"
                                    :label="item.name"
                                    :key="item.id"
                                    prop="value"
                                >
                                    <template slot-scope="scope">
                                        <div>{{ item[scope.row['categoryId']] }}</div>
                                    </template>
                                </el-table-column>
                            </el-table-column>
                        </el-table>
createList: [
                {
                    categoryName: 'name1',
                    categoryId: 'id1321'
                },
                {
                    categoryName: 'name2',
                    categoryId: 'id1334'
                }
],
peopleList: [
   {
      name: '人员名字',
      id: '1',
       id1321: '100',
        id1334: '56',
    }
],

思考:你需要将接口数据拿回来自己整合一下,分成如上的两个数组,table 的 data绑定 createList 这个数组是控制标签名字的,只会显示第一列的数据(标签类别),你需要给第一个 el-table-colum 的 prop 绑定这个数组里面的 categoryName,这样就会显示类别了

随后,你需要写一个v-for 循环生成有关于人名的第一行内容,这里就用到了 peipleList 数组,利用自定义的模板方法,编写下面的数据显示内容。这里很重要, 因为我们table 绑定的是  createList,所以每行数据也就是 scope 里面都带有categoryId 属性,然后又因为v-for 循环了 peopleList 所以我们可以利用item 取到 人员下面的以标签类型的ID为键的值,这样 

{{ item[scope.row['categoryId']] }}  这个东西就能取到值了。

最后 注意 table 组件我加了一个 v-if 以及 ref  属性, 因为我们这个表格不是标准的传值方式,所以翻页的时候,会出现数据不更新,数据错乱等情况,所以在翻页的时候,将这个表格用v-if 给删除,等接口返回后再将其显示出来,随后使用 this.$refs.refreshTable.doLayout(); 这个方法重绘表格,就可以了。

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
可以将 ElementUITable 表格和 Dialog 对话框结合起来使用,实现表格数据的编辑、删除、详情等操作。以下是一个简单的示例: ```html <template> <div> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column label="操作"> <template slot-scope="{ row }"> <el-button @click="edit(row)">编辑</el-button> <el-button @click="remove(row)">删除</el-button> <el-button @click="detail(row)">详情</el-button> </template> </el-table-column> </el-table> <el-dialog :visible.sync="dialogVisible" :title="dialogTitle"> <!-- 编辑表单 --> <el-form v-if="dialogType === 'edit'" :model="editForm" :rules="editRules"> <el-form-item label="姓名" prop="name"> <el-input v-model="editForm.name"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model.number="editForm.age"></el-input> </el-form-item> </el-form> <!-- 详情展示 --> <div v-else> <p>姓名:{{ detailData.name }}</p> <p>年龄:{{ detailData.age }}</p> </div> <div slot="footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="save">保存</el-button> </div> </el-dialog> </div> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18 }, { name: '李四', age: 22 }, { name: '王五', age: 30 } ], dialogVisible: false, dialogTitle: '', dialogType: '', editForm: { name: '', age: '' }, editRules: { name: [{ required: true, message: '请输入姓名', trigger: 'blur' }], age: [{ required: true, message: '请输入年龄', trigger: 'blur' }] }, detailData: {} }; }, methods: { // 编辑 edit(row) { this.dialogType = 'edit'; this.dialogTitle = '编辑'; this.editForm = { ...row }; this.dialogVisible = true; }, // 删除 remove(row) { const index = this.tableData.indexOf(row); this.tableData.splice(index, 1); }, // 详情 detail(row) { this.dialogType = 'detail'; this.dialogTitle = '详情'; this.detailData = { ...row }; this.dialogVisible = true; }, // 保存 save() { this.$refs.editForm.validate(valid => { if (valid) { const index = this.tableData.findIndex(item => item.name === this.editForm.name); if (index > -1) { this.tableData.splice(index, 1, this.editForm); } else { this.tableData.push(this.editForm); } this.dialogVisible = false; } }); } } }; </script> ``` 在上面的示例中,我们首先渲染了一个基本的表格,并为每一行数据添加了“编辑”、“删除”和“详情”操作按钮。当用户点击“编辑”或“详情”按钮时,会弹出一个对话框,并根据不同的操作类型(edit 或 detail)来渲染不同的表单内容或详情展示。 在对话框中,我们使用ElementUI 的 Form 表单组件来渲染编辑表单。为了方便起见,我们使用了 Object.assign 或展开运算符来复制表格行数据,并将其作为表单的默认值。在保存表单时,我们使用了 Form 的 validate 方法来验证表单数据的合法性,并根据验证结果来保存表格数据。如果表单数据合法,则将其保存到表格数据中,并关闭对话框。如果表单数据不合法,则不保存数据,但仍保持对话框打开状态,以便用户修改表单数据。 总的来说,结合 Table 和 Dialog 组件可以为用户提供一个友好的数据交互界面,让用户可以轻松地进行表格数据的增删改查操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值