如何给el-table中某一列加指定内容和点击事件

背景:

小颖最近在写项目时遇到了要给 element-ui中的 el-tablev-for el-table-column 标签时给某列加内容和点击事件,项目忙完了想着总结一下,下面一起来看下具体怎么实现吧

页面效果:

公共数据:

复制代码
  data() {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        sex: '男'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        sex: '男'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        sex: '男'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        sex: '男'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        sex: '男'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        sex: '男'
      }, {
        date: '2016-05-07',
        name: '李晓梅',
        address: '上海市普陀区金沙江路 158号',
        sex: '女'
      }],
    }
  },

公共点击事件:

复制代码
  methods: {
    toDetail(row, column, event) {
      console.log('点击地址啦');
    }
  }

公共CSS:

复制代码
<style lang="scss">
.blue-font-color {
  color: #409eff;
  border-bottom: 1px solid #409eff;
  cursor: default;
}
</style>

方法一:

使用 slot-scope + v-if + v-else

HTML:

复制代码
    <el-table :data="tableData" height="250" border style="width: 100%">
      <el-table-column :prop="dt.prop" :label="dt.labelName" v-for="(dt,index) in colData"
        :key="index">
        <template slot-scope="scope">
          <span v-if="dt.prop=='address'" class="blue-font-color" @click="toDetail(scope.row)">
            {{ scope.row.address }}</span>
          <span v-else>{{ scope.row[dt.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>

Javascript:
colData: [
{ prop: 'date', labelName: '日期' },
{ prop: 'name', labelName: '姓名' },
{ prop: 'address', labelName: '地址' },
{ prop: 'sex', labelName: '性别' },
],

方法二:

使用 表格自带的 formatter + row-click事件

HTML:

复制代码
    <el-table :data="tableData" height="250" border style="width: 100%" @row-click="toDetail">
      <el-table-column :prop="dt.prop" :label="dt.labelName" v-for="(dt,index) in colData"
        :key="index" :formatter="dt.formatter">
      </el-table-column>
    </el-table>

Javascript:
data差异:

复制代码
      colData: [
        { prop: 'date', labelName: '日期' },
        { prop: 'name', labelName: '姓名' },
        {
          prop: 'address', labelName: '地址',
          formatter: (row, column, cellValue, index) => {
            return <span class='blue-font-color'>{cellValue}</span>
          }
        },
        { prop: 'sex', labelName: '性别' },
      ],

点击事件差异:

复制代码
    toDetail(row, column, event) {
      if (column.property == "address") {
        console.log('点击地址啦');
      }
    }
  }

方法三:

使用 表格自带的 formatter

HTML:

复制代码
    <el-table :data="tableData" height="250" border style="width: 100%">
      <el-table-column :prop="dt.prop" :label="dt.labelName" v-for="(dt,index) in colData"
        :key="index" :formatter="dt.formatter">
      </el-table-column>
    </el-table>

Javascript:

data差异:(tableData 还要的哦,只是这里没写)

复制代码
  data() {
    const that = this
    return {
      colData: [
        { prop: 'date', labelName: '日期' },
        { prop: 'name', labelName: '姓名' },
        {
          prop: 'address', labelName: '地址',
          formatter: (row, column, cellValue, index) => {
            return <span class='blue-font-color' onclick={that.toDetail.bind(null, row)}>{cellValue}</span>
          }
        },
        { prop: 'sex', labelName: '性别' },
      ]
    }
  },

点击事件就和上面 公共的点击事件方法 一样。

相关推荐
Icoolkj2 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
^Rocky3 小时前
JavaScript性能优化实战
开发语言·javascript·性能优化
西陵4 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
笑鸿的学习笔记4 小时前
JavaScript笔记之JS 和 HTML5 的关系
javascript·笔记·html5
叫我阿柒啊5 小时前
从Java全栈到前端框架:一次真实面试的深度复盘
java·spring boot·typescript·vue·database·testing·microservices
萌萌哒草头将军5 小时前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
gnip6 小时前
http缓存
前端·javascript
JohnYan7 小时前
工作笔记 - 微信消息发送和处理
javascript·后端·微信
借你耳朵说爱你7 小时前
浅拷贝和深拷贝两种不同的对象复制
vue·web
陈陈爱java8 小时前
Spring八股文
开发语言·javascript·数据库