背景:
小颖最近在写项目时遇到了要给 element-ui中的 el-table在 v-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: '性别' },
]
}
},
点击事件就和上面 公共的点击事件方法 一样。