el-table使用总结(element-UI)

1.表头以及表格所有内容居中显示

• 给标签添加下面两句代码

:header-cell-style="{'text-align':'center'}"
:cell-style="{'text-align':'center'}"

// 表头样式设置
<el-table :header-cell-style="{fontWeight:'bold',fontSize:'13px',color:'#58595d'}"></el-table>

2. 部分列的内容居中显示

• el-table-column中添加 属性 align取值center

<el-table-column
   prop="valid"
    label="是否启动"
    align="center">
    <template slot-scope="scope">
        {{scope.row.valid ? '是' : '否'}}
    </template>
</el-table-column>

3. 表格数据是true/false，但是需要显示其他信息，怎么办？

// valid是Boolean类型
<el-table-column
   prop="valid"
    label="是否启动">
    <template slot-scope="scope">
        {{scope.row.valid ? '是' : '否'}}
    </template>
</el-table-column>

4. 获取的值为1、2、3等类型时，进行中文显示（三种方式）

// 方式1：通过v-if
<el-table-column
    prop="education"
    label="学历">
    <template slot-scope="scope">
            <div v-if="scope.row.education === 1">大学本科</div>
            <div v-if="scope.row.education === 2">硕士研究生</div>
            <div v-if="scope.row.education === 3">博士</div>
    </template>
</el-table-column>

// 方式2： 通过formatter属性
<el-table-column :formatter="formatterData"></el-table-column>
 
formatterData(row, column) {
      var checkType = "";
      switch (row.isCheck) {
        case "0":
          checkType = "未审核";
          break;
        case "1":
          checkType = "已审核";
          break;
        default:
          checkType = "无";
      }
      return checkType;
 });

// 方式3： 通过filter（vue3已废弃），可以使用计算属性代替
<el-table-column>
    <template slot-scope="scope">
        {{ scope.row.data | dataFilter}}
    </template>
</el-table-column>
 
//写在src下的filter文件内，全局使用，或者在当前vue文件中局部使用
Vue.filter('dataFilter', (input) => {
    var checkType = "";
      switch (row.isCheck) {
        case "0":
          checkType = "未审核";
          break;
        case "1":
          checkType = "已审核";
          break;
        default:
          checkType = "无";
      }
      return checkType;
});

5. el-table表格添加el-select

<el-table-column align="center" label="爱好" prop="hobby">
    <template slot-scope="scope">
        <el-select v-model="scope.row[scope.column.property]">
            <el-option 
                v-for="(row, index) in hobbies"
                :key="index"
                :label="row"
                :value="row"
            >
            </el-option>
        </el-select>
    </template>
</el-table-column>

6. 在某列中添加开关，标签等组件， 以及自定义元素