element表格的formatter和template使用
在element表格中，formatter和template属性都可用于自定义表格中数据的展示方式。
- formatter属性：用于格式化表格中的数据展示。可以是一个函数，也可以是一个字符串。当为函数时，函数接收两个参数：row（当前行的数据）和column（当前列的属性），函数返回一个字符串作为展示的内容。当为字符串时，字符串中可以使用占位符`{}`来表示当前数据的值。例如：
```html
<el-table-column prop="price" label="价格" :formatter="formatPrice"></el-table-column>
```
```javascript
methods: {
  formatPrice(row, column) {
    // 将价格格式化为带￥符号的字符串
    return `￥${row.price}`;
  }
}
```
- template属性：用于自定义表格中的数据展示模板。可以是一个字符串，也可以是一个函数。当为字符串时，字符串中可以使用占位符`{}`来表示当前数据的值。当为函数时，函数接收三个参数：h（createElement函数用于创建Vue组件的函数）、{row, column, $index}（当前元素的数据、列的属性，以及元素在数组中的索引），函数返回一个Vue组件作为展示的内容。例如：
```html
<el-table-column prop="gender" label="性别" :template="renderGender"></el-table-column
>
```
```javascript
methods: {
  renderGender(h, {row, column, $index}) {column函数的使用
    // 根据不同的性别，渲染不同的标签
    if (der === '男') {
      return <span >{der}</span>;
    } else {
      return <span >{der}</span>;
    }
  }
}
```
通过使用formatter和template属性，可以灵活地自定义element表格中数据的展示方式，满足不同的需求。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。