如何给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: '性别' },
      ]
    }
  },

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

相关推荐
gnip1 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
掘金安东尼3 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手7 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
Hilaku7 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
LuckySusu7 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu7 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu7 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu7 小时前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu7 小时前
【js篇】addEventListener()方法的参数和使用
前端·javascript
LuckySusu8 小时前
【js篇】深入理解 JavaScript 原型与原型链
前端·javascript