VUE element-ui之table表格遍历渲染

61 篇文章 2 订阅
49 篇文章 9 订阅

步骤:
定义模板:

<el-table-column
   v-for="(item, index) in tableList"
   :key="index"
   :prop="item.prop"
   :label="item.label"
   :formatter="format"
   :show-overflow-tooltip="true"//文字过多隐藏
/>

定义表头:

data() {
	return{
		tableList: [
        { prop: 'unit_price', label: '单价', 
        format: (row) => {
            return row.purchaseStatus === 0 ? '未审核' :row.purchaseStatus === 1 ? '已审核': row.purchaseStatus === 2 ? '不通过' : row.purchaseStatus === 3 ? '审核中' : '已完成'
          }},
        { prop: 'number', label: '数量' },
        { prop: 'amount', label: '金额' },    
        { prop: 'create_time', label: '制单时间' }
      ]
	}
}

遍历渲染表格,提高代码质量。

  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
element-ui 是一个非常流行的 Vue.js 组件库,其中包含了许多常用的 UI 组件,例如表格、输入框等。针对表格组件,我们可以封装一个 tableList 组件来简化我们在使用 element-ui 表格组件时的代码编写。 首先,在 src/components 目录下创建 TableList.vue 文件,然后在该文件中编写如下代码: ```html <template> <div> <el-table :data="tableData" :row-key="rowKey" :height="height"> <!-- 遍 columns,自动生成列 --> <el-table-column v-for="column in columns" :key="column.prop" :label="column.label" :prop="column.prop"> <!-- 自定义插槽 --> <template v-if="column.slot" slot-scope="scope"> <slot :name="column.slot" v-bind="scope.row"></slot> </template> </el-table-column> </el-table> <!-- 分页组件 --> <el-pagination :current-page.sync="currentPage" :page-size="pageSize" :total="total" @current-change="handleCurrentChange"></el-pagination> </div> </template> <script> export default { name: "TableList", props: { // 表格数据 tableData: { type: Array, default: () => [], }, // 表格列 columns: { type: Array, default: () => [], }, // 行标识符 rowKey: { type: String, default: "id", }, // 表格高度 height: { type: Number, default: 0, }, // 当前页码 currentPage: { type: Number, default: 1, }, // 每页条数 pageSize: { type: Number, default: 10, }, // 总条数 total: { type: Number, default: 0, }, }, methods: { // 分页回调函数 handleCurrentChange(val) { this.$emit("pagination", val); }, }, }; </script> ``` 该组件的功能包括: 1. 自动遍 columns 数组,生成表格列。 2. 支持自定义插槽,例如用于渲染操作按钮等。 3. 集成了 element-ui 的分页组件,可以直接使用。 4. 父组件可以通过传递 props 来控制表格数据、表格列、行标识符、表格高度、当前页码、每页条数和总条数。 5. 父组件可以通过监听 pagination 事件来获取分页信息。 使用该组件时,只需要在父组件中引入 TableList 组件并传递必要的 props 即可,例如: ```html <template> <div> <table-list :table-data="tableData" :columns="tableColumns" :total="total" @pagination="handlePagination"></table-list> </div> </template> <script> import TableList from "@/components/TableList.vue"; export default { name: "Example", components: { TableList, }, data() { return { tableData: [], tableColumns: [ { label: "姓名", prop: "name" }, { label: "年龄", prop: "age" }, { label: "性别", prop: "gender" }, { label: "操作", slot: "operations" }, ], total: 0, currentPage: 1, pageSize: 10, }; }, methods: { handlePagination(val) { this.currentPage = val; // 重新获取数据 // ... }, }, }; </script> ``` 以上代码中,我们通过传递 tableData、tableColumns 和 total 等 props 来控制 TableList 组件的显示。同时,监听了 pagination 事件,当分页信息变化时会触发 handlePagination 方法,我们在该方法中可以重新获取数据并更新表格显示。 这样,我们就可以通过封装 TableList 组件来简化我们在使用 element-ui 表格组件时的代码编写,提高我们的开发效率。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

赫兹/Herzz

如果我的博文帮助到您请打赏支持

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值