[JavaScript知识库]vue表格行添加进度条、element ui表格添加进度条

1. 添加后的内容如下
   
2. 代码如下

<template>
	<el-table :data="tableData" height="500" :span-method="arraySpanMethod" border style="width: 100%">
		<el-table-column type="index" label="序号" width="55">
		</el-table-column>
		<el-table-column prop="date" label="日期" width="180">
			<template slot-scope="scope">
				<!-- 判断是否显示进度条 -->
				<div v-if="scope.row.showProgressBar">
					<el-progress :text-inside="true" :stroke-width="24" :color="customColors" :percentage="scope.row.percentage" status="success"></el-progress>
				</div>
				<div v-else>
					{{scope.row.date}}
				</div>
			</template>
		</el-table-column>
		<el-table-column prop="name" label="姓名" width="180">
		</el-table-column>
		<el-table-column prop="address" label="地址">
		</el-table-column>
	</el-table>
</template>


<script>
	export default {
		data() {
			return {
				//表格内容
				tableData: [{
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄',
					showProgressBar: true,
					percentage: 50,
				}, {
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄',
					showProgressBar: false
				}, {
					date: '2016-05-04',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄',
					showProgressBar: true,
					percentage: 90,
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄',
					showProgressBar: false
				}, {
					date: '2016-05-08',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄',
					showProgressBar: false
				}, {
					date: '2016-05-06',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄',
					showProgressBar: true,
					percentage: 80,
				}, {
					date: '2016-05-07',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄',
					showProgressBar: false
				}],
				//进度条不同进度颜色
				customColors: [{
						color: '#f56c6c',
						percentage: 20
					},
					{
						color: '#e6a23c',
						percentage: 40
					},
					{
						color: '#6f7ad3',
						percentage: 60
					},
					{
						color: '#1989fa',
						percentage: 90
					},
					{
						color: '#5cb87a',
						percentage: 100
					}
				]
			}
		},
		methods: {
			//跨列方法
			arraySpanMethod({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				//是后显示进度条
				if (row.showProgressBar) {
					if (columnIndex == 1) {
						//第二列（进度条在表格第二列）跨三列
						return [1, 3];
					}else if(columnIndex == 0){
						//第一列（序号列）占1列
						return [1, 1];
					}else{
						//其他列 清除
						return [0, 0];
					}
				}
			}
		}
	}
</script>