Element el-table的formatter和scope template不能同时存在问题解决办法

如果你想在使用Element UI的`<el-table>`组件时同时使用`formatter`和`scope`属性，可以使用`<template>`标签来替代`formatter`属性。在`<template>`标签中，你可以使用`scope.row`来获取当前行的数据对象，并根据需求进行格式化处理。

例如，假设你想在`<el-table>`组件中显示一个日期列，你可以使用如下的代码：

<el-table :data="tableData">
  <el-table-column prop="date">
    <template slot-scope="scope">
      {{ new Date(scope.row.date).toLocaleDateString() }}
    </template>
  </el-table-column>
</el-table>

在上面的代码中，我们使用了`<template>`标签来替代`formatter`属性，并使用了`slot-scope`属性来获取当前行的数据对象。然后，我们使用JavaScript的`Date`对象将日期格式化为本地日期字符串，并最终将格式化后的字符串输出到表格中。

需要注意的是，如果你使用`<template>`标签替代`formatter`属性，那么你需要使用`slot-scope`属性来获取当前行的数据对象，而不是使用`formatter`属性中的`row`参数。

相关问题

Element el-table二次封装formatter和template不能同时存在问题解决办法

如果你在对`<el-table>`进行二次封装时，想要同时支持`formatter`和`scope`属性，可以在封装组件中使用`v-if`指令来判断是否存在`formatter`属性，如果存在，则使用`formatter`属性进行格式化，否则使用`<template>`标签和`scope`属性来获取当前行的数据对象进行格式化。

例如，假设你封装了一个名为`MyTable`的组件，你可以使用如下的代码来实现同时支持`formatter`和`scope`属性：

<template>
  <el-table :data="tableData">
    <el-table-column
      :prop="prop"
      :label="label"
      :formatter="formatter"
    >
      <template v-if="!formatter" slot-scope="scope">
        <!-- 根据需要进行格式化 -->
      </template>
    </el-table-column>
  </el-table>
</template>

在上面的代码中，我们使用了`v-if`指令来判断是否存在`formatter`属性，如果存在，则使用`formatter`属性进行格式化，否则使用`<template>`标签和`scope`属性来获取当前行的数据对象进行格式化。

需要注意的是，如果你使用了`v-if`指令来判断是否存在`formatter`属性，那么你需要在父组件中动态传递`formatter`属性，而不能在封装组件中直接写死。

el-table formatter 的使用

`el-table formatter` 是 Element UI 框架中用于自定义表格列显示内容的属性。通过使用 formatter，你可以对表格的某一个列进行特定格式化处理，比如改变显示的文本样式、添加图标、拼接字符串、条件显示不同的内容等等。

一个基本的 `formatter` 的使用方法如下：

1. 在 `el-table` 的列定义中指定 `formatter` 属性。
2. 将 `formatter` 属性设置为一个函数，该函数接收三个参数：当前行数据 `row`，当前列数据 `column`，以及当前单元格的索引 `index`。
3. 在该函数中编写你的格式化逻辑，并返回你希望在表格中显示的值。

下面是一个简单的例子，假设有一个用户数据表格，你想根据用户的年龄来决定显示的是“年轻”、“中年”还是“老年”：

<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="age" label="年龄" width="180">
      <template slot-scope="scope">
        <span>{{ formatAge(scope.row.age) }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        age: 28
      }, {
        date: '2016-05-04',
        name: '张小刚',
        age: 32
      }, {
        date: '2016-05-01',
        name: '李小红',
        age: 55
      }]
    };
  },
  methods: {
    formatAge(age) {
      if (age < 30) {
        return '年轻';
      } else if (age >= 30 && age <= 50) {
        return '中年';
      } else {
        return '老年';
      }
    }
  }
};
</script>