el-table-column设置下划线蓝色点击跳转

在el-table-column中设置下划线蓝色点击跳转，可以通过使用slot-scope来自定义单元格的内容，并在其中添加超链接。具体步骤如下：

1. 在el-table-column中添加slot-scope属性，指定一个作用域插槽。
2. 在作用域插槽中，使用a标签来创建超链接，并设置样式为下划线蓝色。
3. 使用v-bind:href绑定超链接的目标地址。

以下是一个示例代码：

<el-table-column label="跳转链接" prop="link">
  <template slot-scope="scope">
    <a :href="scope.row.link" style="text-decoration: underline; color: blue;">
      {{ scope.row.link }}
    </a>
  </template>
</el-table-column>

在上述代码中，我们使用了作用域插槽来获取每个单元格的数据，并将其作为超链接的目标地址。同时，我们设置了超链接的样式为下划线蓝色。

相关问题

el-table el-column selection 设置禁用无效

如果在 ElementUI 的 el-table 中设置了 `disable` 属性，但是 el-column 的选择功能仍然可用，可能是由于 `disable` 属性只是禁用了 el-table 的选择功能，而 el-column 是作为 el-table 的子组件，不受 el-table 的 `disable` 属性控制。

如果要禁用 el-column 的选择功能，可以通过修改 el-column 的 `selectable` 属性来实现。具体代码如下：

<template>
  <el-table
    :data="tableData"
    :selectable="!disabled"
    @selection-change="handleSelectionChange"
    :row-key="row => row.id">
    <el-table-column
      type="selection"
      :selectable="selectable"
      width="55">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 20 },
        { id: 3, name: '王五', age: 25 },
      ],
      disabled: true,
      selectable: false,
    };
  },
  methods: {
    handleSelectionChange(selection) {
      console.log(selection);
    },
  },
};
</script>

在上面的代码中，我们通过 `selectable` 属性来控制 el-column 的选择功能是否可用。如果 `selectable` 的值为 `false`，则 el-column 的选择功能将被禁用。在 `el-table` 中，我们可以通过 `selectable` 属性来控制 el-table 的选择功能是否可用。如果 `selectable` 的值为 `false`，则 el-table 的选择功能将被禁用。

同时，我们也可以通过 `disabled` 属性来控制整个 el-table 的选择功能是否可用。如果 `disabled` 的值为 `true`，则整个 el-table 的选择功能将被禁用。

el-table-column点击单元格跳转

根据提供的两个引用，el-table-column点击单元格跳转的实现方式如下：

1. 点击单元格跳转到新页面

<el-table :data="allData">
  <el-table-column prop="tel" label="联系电话" align="center">
    <template slot-scope="scope">
      <div>
        <a href="javascript:;" @click="goEnviro">{{scope.row.tel}}</a>
      </div>
    </template>
  </el-table-column>
</el-table>

<script>
export default {
  data() {
    return {
      allData: [
        { name: "", classify: "", tel: "", update: "", fileType: "", },
      ]
    }
  },
  methods: {
    goEnviro() {
      this.$router.push('/filetext/findfile')
    }
  }
}
</script>

2. 点击单元格跳转到新页面并传递参数

<el-table ref="dataTable" :data="userList">
  <el-table-column prop="username" label="用户账号">
    <template slot-scope="scope">
      <el-link type="success" v-on:click="cellclick(scope.row)">{{scope.row.username}}</el-link>
    </template>
  </el-table-column>
</el-table>

<script>
export default {
  data() {
    return {
      userList: []
    }
  },
  methods: {
    cellclick(row) {
      this.$router.push({
        path: '/user/detail',
        query: {
          id: row.id
        }
      })
    }
  }
}
</script>