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

同小颖博客园该文章地址: 如何给el-table中某一列加指定内容和点击事件

背景:

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

页面效果:

公共数据:

bash 复制代码
  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: '女'
      }],
    }
  },

公共点击事件:

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

公共CSS:

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

方法一:

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

less 复制代码
    <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:

css 复制代码
      colData: [
        { prop: 'date', labelName: '日期' },
        { prop: 'name', labelName: '姓名' },
        { prop: 'address', labelName: '地址' },
        { prop: 'sex', labelName: '性别' },
      ],

方法二:

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

ruby 复制代码
    <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差异:

css 复制代码
      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: '性别' },
      ],

点击事件差异:

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

方法三:

使用 表格自带的 formatter HTML:

ruby 复制代码
    <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 还要的哦,只是这里没写)

javascript 复制代码
  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: '性别' },
      ]
    }
  },

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

相关推荐
程序张3 分钟前
Vue3+Vite 现代化前端框架👊打破 Chrome 83 内核限制
前端·javascript·vue.js
拜无忧5 分钟前
【教程】Vue中级转React终极指南-理解Vue和React的差异
前端·vue.js·react.js
web前端1236 分钟前
Android开发四大组件详解
前端
木辰風6 分钟前
idea npm install 很慢(nodejs)
前端·npm·node.js
阿笑带你学前端7 分钟前
Drift数据库开发实战:类型安全的SQLite解决方案
前端·flutter
FE_C_P小麦10 分钟前
Git 常用指令
前端·后端·github
北城笑笑10 分钟前
Server 13 ,CentOS 上使用 Nginx 部署多个前端项目完整指南( 支持多端口与脚本自动化 )
linux·服务器·前端·nginx·centos
Java陈序员11 分钟前
听歌体验直接拉满!推荐一款高颜值音乐播放器!
vue.js·docker·vite
卓伊凡11 分钟前
完整的苹果内购in-purchase实例-采用object-c语言使用苹果的Storyboard开发模式的完整购买实例
前端
用泥种荷花11 分钟前
【web音频学习(一)】音频基础
前端