vue中表格某列为特殊样式，并且点击跳转

<el-table :data="tableData" stripe style="width: 100%;" :cell-style="cellStyle" :header-cell-style="headerStyle">
        <el-table-column prop="id" label="Strata ID">
        </el-table-column>
        <el-table-column prop="name" label="数据源" >
          <template slot-scope="scope">
            <span style="color:rgb(73, 111, 236);cursor: pointer;border-bottom:1px solid #3272f5" @click='DataSource(scope.row)'>{{scope.row.name}}</span>
          </template>             
        </el-table-column>
        <el-table-column prop="Company" label="公司">
        </el-table-column>
         <el-table-column prop="scene" label="现场">
        </el-table-column>
        <el-table-column prop="utility" label="效用">
        </el-table-column>
        <el-table-column prop="Until" label="单位">
        </el-table-column>
        <el-table-column prop="Type" label="数据源类型">
        </el-table-column>
        <el-table-column prop="Rate" label="数据频率">
        </el-table-column>
        <el-table-column prop="CID" label="CID">
        </el-table-column>
        <el-table-column label="选项" width="240">
<template slot-scope="scope">
<el-button type="text" @click="goLightTimeSet(scope.row)" size="small" class="detailsBtn">
  <i class="el-icon-edit"></i>
  编辑</el-button>
<el-button type="text" size="small" @click="delTime(scope.row)" class="delBtn">
  <i class="el-icon-circle-close"></i>
  删除</el-button>
</template>
        </el-table-column>
    </el-table>
  data(){
      return{
          tableData: [],
          form: {
            id: '',
            name: '',
            Company: '',
            scene: '',
            utility: '',
            Until: '',
            Type: '',
            Rate: '',
            CID: '',
            path:'',
          },
      }
  }  
    
methods:{
    //  获取表格的数据
    getTable() {
      if (window.innerWidth <= 1366) {
        this.pageSize = 6;
      }
      console.log(this.pageSize)
      this.tableData = [{
        id: 0,
        name: '数据源1',
        Company: 'aa',
        scene: 'Generational',
        utility: '电力',
        Until: 'gW',
        Type: '自动化',
        Rate: '15Mn',
        CID: 'ccgt',
        path:'/EnergyBox/DataDetails',
      }, {
        id: 1,
        name: '数据源2',
         Company: 'bb',
        scene:'Generational',
        utility: '电力',
         Until: 'gW',
        Type: '自动化',
        Rate: '15Mn',
        CID: 'ccgt',
        path:'/EnergyBox/DataDetails',
      }];
    },
    // 点击每个数据源跳转并存储数据
    DataSource(v){
      this.$router.push({
        path:"/EnergyBox/DataDetails"
      })
      console.log(localStorage.setItem('VName',v.name))  
    },
    //点击编辑
   goLightTimeSet(row) {
      console.log(row)
      this.Name="编辑"
      this.form = { ...row};
      this.centerDialogVisible = true;
    }, 
    //点击删除
    delTime(row) {
      this.$confirm('删除此条定时信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        console.log(row);
        this.getTable();
        this.$message({
          type: 'success',
          message: '设置成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消设置'
        });
      });
    },
}