一、elementui表格单元格颜色
在elementui中，我们可以通过设置单元格的style样式来改变单元格的颜色，这个样式可以直接在表格的columns中配置。
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="age"
label="年龄"
:style="{backgroundColor: '#F2F2F2'}">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
name: '小明',
age: '18'
}, {
name: '小红',
age: '20'
}]
};
}
}
</script>
二、elementui表格单元格编辑
elementui表格的每一个单元格都是可编辑的，我们可以通过设置表格的edit-config属性来实现编辑功能。
<template>
<el-table
:data="tableData"
style="width: 100%"
:edit-config="{editTrigger: 'click', showIcon: true}"
@edit="handleEdit">
<el-table-column
prop="name"
label="姓名"
:editable="true">
</el-table-column>
<el-table-column
prop="age"
label="年龄"
:editable="true">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
name: '小明',
age: '18'
}, {
name: '小红',
age: '20'
}]
};
},
methods: {
handleEdit(row, column, cell, event) {
console.log(row, column, cell, event);
}
}
}
</script>
三、elementui表格点击行变色
有时候我们需要为表格设置一个点击行变色的交互，elementui提供了这个功能，我们可以通过设置表格的highlight-current-row属性来实现。
<template>
<el-table
:data="tableData"
style="width: 100%"
highlight-current-row>
<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: [{
name: '小明',
age: '18'
}, {
name: '小红',
age: '20'
}]
};
}
}
四、elementui表格合并单元格选取
有时候我们需要对表格中的某几个单元格进行合并操作，elementui提供了这个功能，我们可以通过设置表格的span-method属性来实现。
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="age"
label="年龄"
:span-method="setSpan">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
name: '小明',
age: '18'
}, {
name: '小红',
age: '18'
}, {
name: '小李',
age: '20'
}]
};
},
methods: {
setSpan({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 1 && columnIndex === 1) {
return {
rowspan: 2,
colspan: 1
};
}
}
}
}
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/286687.html
微信扫一扫 
支付宝扫一扫 