修改el-table-column单独的样式

矫情吗；* 2022-09-05 12:37 167阅读 0赞

<template>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :cell-style="setCellStyle" //写单独的方法
        :header-cell-style="{ textAlign: 'center' }"
      >
        <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="address" label="地址"> </el-table-column>
      </el-table>
    </template>
    
    <script>
    export default {
          
      data() {
          
        return {
          
          tableData: [
            {
          
              date: "2016-05-02",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1518 弄"
            },
            {
          
              date: "2016-05-04",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1517 弄"
            },
            {
          
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄"
            },
            {
          
              date: "2016-05-03",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1516 弄"
            }
          ]
        };
      },
      methods: {
          
        setCellStyle({
            row, column, rowIndex, columnIndex }) {
          
          let that = this;
          let columns = [1]; //想要改变列的索引
          if (columns.indexOf(columnIndex) > -1) {
           //有出现的话就返回center
            return "text-align:center";
          } else {
          
            return "text-align:left"; //没有的话就返回left
          }
        }
      }
    };
    </script>

> 1、写单独的:cell-style=“setCellStyle”  
> 2、写函数  
> setCellStyle(\{ row, column, rowIndex, columnIndex \}) \{  
> let that = this;  
> let columns = \[1\]; //想要改变列的索引  
> if (columns.indexOf(columnIndex) > -1) \{ //有出现的话就返回center  
> return “text-align:center”;  
> \} else \{  
> return “text-align:left”; //没有的话就返回left  
> \}  
> \}